Repository navigation
feat(docs): build the Extensible card's story - #242
Merged
hunterbecton merged 8 commits intoOct 10, 2026
Merged
Conversation
Replace the exported Extensible illustration with the code window built in the DOM, so its story can move the lines (SHA-214). Lengths are in mock pixels scaled by the card's window, so it scales like the image did. The code repeats every seven lines, so lines 8 to 10 copy lines 1 to 3 and the story can scroll seven lines back onto the still frame. Feature cards now pick their illustration by id, and the content module keeps only copy.
Move the favorites' hover query into lib/use-can-hover.ts, so the feature cards can play their stories behind the same gate.
Move the card tab's copy of the --ease-out curve into lib/easing.ts, so the feature cards' stories ease on the same curve without a second copy.
Add the lifecycle every feature card's story shares, in story.tsx. A hover behind the site's hover gate plays a card's story, and it keeps playing while the pointer stays. Once the pointer leaves, the play under way finishes and the card rests on its still frame. A hover during a play doesn't restart it. Touch pointers and reduced motion leave the card on its still frame. The Extensible story steps the code up one line at a time and types each new line in the ninth slot, where the bottom fade has barely begun: its bars grow in from their baseline, left to right. The still frame leaves the tenth slot empty under the fade, so seven steps land back on it. Each play, and the end of the story, mounts a fresh column at the still frame, so the swap shows no seam. features-extensible.spec.ts covers the hover, the finish after the pointer leaves, no restart, the story continuing while the pointer stays, touch, and reduced motion.
Contributor
|
React Doctor found no new issues. 🎉 Reviewed by React Doctor for commit |
Contributor
There was a problem hiding this comment.
🟢 Approval recommended
The implementation is internally consistent and its interaction and accessibility behavior are thoroughly covered.
0 open findings
What changed in this PR
Rebuilds the Extensible feature-card illustration in code and adds a reusable hover-story lifecycle.
Changes:
- Adds the animated Extensible code-window illustration.
- Introduces shared hover detection, easing, and story lifecycle utilities.
- Adds comprehensive interaction, touch, reduced-motion, and accessibility coverage.
| File | Description |
|---|---|
apps/docs/src/lib/use-can-hover.ts |
Adds the shared hover-capability hook. |
apps/docs/src/lib/easing.ts |
Exports the shared easing curve. |
apps/docs/src/content/homepage.ts |
Identifies feature cards by typed IDs. |
apps/docs/src/components/features/story.tsx |
Implements reusable story-card lifecycle. |
apps/docs/src/components/features/features.tsx |
Selects coded or static illustrations by ID. |
apps/docs/src/components/features/features.module.css |
Makes illustration windows size containers. |
apps/docs/src/components/features/extensible-illustration.tsx |
Implements the animated code-window story. |
apps/docs/src/components/features/extensible-illustration.module.css |
Styles and scales the coded illustration. |
apps/docs/src/components/favorites/favorites-list.tsx |
Adopts shared hover detection. |
apps/docs/src/components/favorites/card-tab.tsx |
Adopts the shared easing token. |
apps/docs-tests/docs/homepage.spec.ts |
Updates feature-illustration assertions. |
apps/docs-tests/docs/features-extensible.spec.ts |
Tests the complete story lifecycle. |
🧠 Review effort: Balanced
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
The still frame left the tenth slot empty, so the bottom fade covered plain black and didn't show. The slot now holds the next line again, faint under the fade as in the mock. A play starts with that line blank, and the first step lifts it into the ninth slot to type, as before. The line blanks when a play starts and returns when the story stops, both under the darkest part of the fade.
During a play the tenth slot was empty, so the bottom fade covered plain black. The slot now always holds the next line, faint under the fade, as a hint of the code to come. Each step drops that line flat as it starts to rise, while the fade still hides most of it, and the line types in once it lands in the ninth slot. A play now ends exactly on the still frame, so the start and end of the story no longer blank or restore anything.
A line animating under the bottom fade looked odd, so the fade goes, at the author's call. With nothing to hide the bottom slot, the story types each new line there, in full view, rather than in the ninth slot, and the still frame shows all ten lines. A play takes 1.95 seconds.
Without the fade, the tenth line sat against the code block's bottom edge. The still frame writes nine lines again and leaves the tenth slot empty, so the code stops short of the edge. Each step lifts a blank line out of that slot, and it types in as the ninth. A play takes 1.99 seconds.
hunterbecton
deleted the
hunter/sha-214-build-the-extensible-cards-story
branch
October 10, 2026 14:55
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Why
The Extensible feature card showed an image exported from Figma. SHA-214 rebuilds it in code, gives it a story that plays on hover, and builds the hover lifecycle the other three feature cards will reuse.
What changes
The still frame in code
extensible-illustration.tsxdraws the mock's code window in the DOM. Every length is a mock pixel scaled to the card's window, which is now a size container, so the drawing scales the way the image did. It follows the mock's geometry, with three exceptions. The code repeats every seven lines, so lines 8 and 9 copy lines 1 and 2. The mock's fade over the bottom edge is gone, because a line typing under it looked odd. Without the fade, the tenth line sat against the bottom edge, so the still frame writes nine lines and leaves the tenth slot empty.The story
On hover, the code steps up one line at a time. Each step lifts a blank line out of the empty tenth slot, and it types in as the ninth line, its bars growing up from their baseline. Seven steps land back on the still frame after 1.99 seconds. The story keeps playing while the pointer stays. Once the pointer leaves, the play under way finishes. Each play mounts a fresh column of code, so one play hands over to the next without a seam.
The shared lifecycle
story.tsxholds what every feature card's story shares.StoryCardrenders the card, and an illustration callsuseStory()to learn when to play.useStory()listens to the whole card behind the site's hover gate, ignores touch pointers, and never starts under reduced motion. A hover during a play doesn't restart it. The hero pause and the preload wait for the first card with a live scene.The hover gate moved from
favorites-list.tsxtolib/use-can-hover.ts, and the card tab's--ease-outcurve moved tolib/easing.ts, so the favorites and the feature cards share both. SHA-178 records the shared motion rules and the values the author picked.Feature cards now pick their illustration by
idinfeatures.tsx, andcontent/homepage.tskeeps only their copy.features-extensible.spec.tscovers the hover, the finish after the pointer leaves, no restart, the repeat while the pointer stays, touch, and reduced motion.