feat(site): add per-digit pop-in animation for numeric values#26059
Draft
jakehwll wants to merge 2 commits into
Draft
feat(site): add per-digit pop-in animation for numeric values#26059jakehwll wants to merge 2 commits into
jakehwll wants to merge 2 commits into
Conversation
Each character slides up and fades in with a bouncy overshoot easing. The last two characters stagger behind the leading ones. The animation replays on value change via React key remounting. Integrates into UsageIndicator percentage display so the usage ring numbers animate alongside the stroke.
Track a generation counter per character position. Only the positions where the character actually changed get a new React key, so only those spans remount and replay the enter animation. Stable digits stay put. Add tabular-nums to the wrapper so digit widths are fixed and the layout does not shift as values change.
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
1 participant
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.
Adds an
AnimatedNumbercomponent that renders each character as an individually animated span, sliding up with a bouncy overshoot easing. Integrates it into the usage indicator percentage display.What changed
New
AnimatedNumbercomponent splits a value into characters and animates each one in withanimate-in fade-in-0 slide-in-from-bottom-1usingcubic-bezier(0.34, 1.45, 0.64, 1). The last two characters stagger behind the leading ones by 70ms intervals, so trailing digits feel alive without looking chaotic. The animation replays on value change via React key remounting.Applied to the
UsageSectionpercentage text inUsageIndicator.tsxso the numbers now pop in alongside the existing stroke animation on the usage ring.Files
AnimatedNumber.tsxAnimatedNumber.stories.tsxDefault,Percentage(with randomize),Counter(with +1/+100/reset) storiesUsageIndicator.tsx{roundedPercent}%with<AnimatedNumber>