You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
feat(docs): build the Performant card's story - #243
The Performant feature card still showed the image exported from the mock. SHA-215 rebuilds its illustration in code and gives it a story that plays on hover.
What changes
The Performant story
The card shows the mock's GPU chip alone, 1.5 times the mock's size, in the lit look the mock gives its CPU chip. The motion brief dropped the CPU chip, so the GPU does the work on its own. On the still frame the chip glows softly with nothing under it. A hover streams particles into a band under the chip, some rising into the pins and some falling out, and brings the halo up to the mock's full glow. When the pointer leaves, nothing new enters, each particle finishes its trip, and the halo settles back. The illustration is DOM, driven by one Motion frame loop that runs only during a play. SHA-178's features section decisions record the values.
A story that holds
story.tsx gains useHeldStory() beside useStory(). A hover starts the story, it holds while the pointer stays, and its ending plays once the pointer leaves. Both hooks share one hover gate, so the Extensible card behaves as before, and its spec still passes.
Particles at the window's edge
A particle is transparent until it enters the band and after it leaves, and the band clips itself. A clip alone isn't enough, because where the band's edge meets the window's rounded clip, a browser can let a pixel's sliver of a waiting particle through.
Tests
features-performant.spec.ts covers the hover, the drain back to an empty still frame, a hover during the drain, touch, a touch-screen laptop, and reduced motion. homepage.spec.ts now finds a code-built illustration by text it shows, because two cards have one.
Replace the exported image with two gray chips drawn from the mock, with
no work flowing to either. The story hands the work to the GPU from here
and winds it down back to this frame.
Add useHeldStory beside useStory: a hover plays the story's opening, the
story holds while the pointer stays, and its ending plays once the pointer
leaves. Each part finishes once started. Both shapes share one hover gate,
so the Extensible card's repeating story behaves as before.
Draw the mock's GPU chip alone at 1.5 times its size. A hover warms the
chip and starts a band of work flowing into and out of its pins, which
runs while the pointer stays. Leaving cuts back to the still frame until
the ending lands.
The still frame now shows the chip softly lit with no work under it. A
hover streams particles in from the band's ends and brings the halo up to
the mock's full glow. Once the pointer leaves, nothing new enters, each
particle finishes its trip, and the halo settles as the last one leaves.
Particles waiting at either end of the band are transparent, and the band
clips itself, so none shows at the window's edge in any browser.
The band streams in from the hover, so the held story drops its opening
stage: a hover goes straight to the hold.
Check that a hover streams the band in and that it runs dry after the
pointer leaves, back to the still frame. A hover during that ending must
not cut it short, and touch and reduced motion must leave the still frame.
The band carries a data-band attribute for the spec to find it.
The frame loop can observe the previous stage for one frame after a pointer leave because this ref is synchronized in a passive effect, which may run after Motion's next animation-frame callback. If a delayed particle enters during that frame, the following ending frame sees a positive trip count and drains it even though it entered after the leave. Synchronize stageRef in a layout effect (before animation frames run) so ending captures the pre-leave particle set.
Add Playwright assertion for full hover halo opacity
The new hover specs only observe particle count/position; none checks this halo branch, so the halo could remain at the still-frame value and every test would pass. Add a Playwright assertion that the chip halo reaches its full computed opacity while the pointer remains on the card (the existing final screenshot already covers the return to the still value).
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
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 Performant feature card still showed the image exported from the mock. SHA-215 rebuilds its illustration in code and gives it a story that plays on hover.
What changes
The Performant story
The card shows the mock's GPU chip alone, 1.5 times the mock's size, in the lit look the mock gives its CPU chip. The motion brief dropped the CPU chip, so the GPU does the work on its own. On the still frame the chip glows softly with nothing under it. A hover streams particles into a band under the chip, some rising into the pins and some falling out, and brings the halo up to the mock's full glow. When the pointer leaves, nothing new enters, each particle finishes its trip, and the halo settles back. The illustration is DOM, driven by one Motion frame loop that runs only during a play. SHA-178's features section decisions record the values.
A story that holds
story.tsxgainsuseHeldStory()besideuseStory(). A hover starts the story, it holds while the pointer stays, and its ending plays once the pointer leaves. Both hooks share one hover gate, so the Extensible card behaves as before, and its spec still passes.Particles at the window's edge
A particle is transparent until it enters the band and after it leaves, and the band clips itself. A clip alone isn't enough, because where the band's edge meets the window's rounded clip, a browser can let a pixel's sliver of a waiting particle through.
Tests
features-performant.spec.tscovers the hover, the drain back to an empty still frame, a hover during the drain, touch, a touch-screen laptop, and reduced motion.homepage.spec.tsnow finds a code-built illustration by text it shows, because two cards have one.