feat: add DigitPopIn and StatCard animate="digits"; prepare 0.1.0-alpha.23 - #51
Merged
Merged
Conversation
…ha.23 DigitPopIn renders formatted text one character at a time, each rising into place from a light blur after the one before it, and replays when the text changes. Screen readers get the plain text; reduced motion gets the plain text with no animation. StatCard's animate now also takes "count" and "digits". true keeps the count-up, so no existing call changes. backend.ai-go's Statistics page is the consumer, in its stat cards and in the latency and cowork numbers beside them. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
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
DigitPopInandStatCard'sanimate="digits", and prepares0.1.0-alpha.23sobackend.ai-gocan take it up. The feature and the release bump are one PR because the change is small; say so if you would rather have them split.What changes
DigitPopIn(new, exported): renders formatted text one character at a time. Each character rises into place from a light blur after the one before it (500ms, 70ms stagger, spring easing), and a newtextreplays it. Screen readers get a plain copy of the text; the characters arearia-hidden. Underprefers-reduced-motionit renders plain text. The motion values are custom properties on the root.StatCard:animateacceptsboolean | "count" | "digits".trueis still the count-up, so existing calls are unchanged."digits"renders the value throughDigitPopIn, and the value clips only sideways so the rising characters are not cut off.Admission
backend.ai-go's Statistics page, in its stat cards and in the latency-percentile and cowork numbers beside them, which are not cards. That second use is why the component is exported rather than kept insideStatCard.DigitPopIn.test.tsx(per-character rendering, stagger index, accessible text, replay on change, no replay on same text, reduced motion) and newStatCardcases ("digits", string values,trueunchanged).Validation
pnpm run verify: typecheck, lint, format, boundary, 586 tests, build, pack check.backend.ai-goand checked in Chrome on the Statistics page, including a frame paused mid-animation.backend.ai-go's full suite passes on it after two consumer-side updates for changes since alpha.7 (DataTable resize handle labels, Drawer Escape timing).