Repository navigation
feat: focus and quiet (focus, avatar-stack, countdown, expand-row, number-ticker, spring motion) - #63
Merged
Merged
Conversation
…mber-ticker, spring motion Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This was referenced Oct 9, 2026
zyx1121
added a commit
that referenced
this pull request
Oct 10, 2026
…smoke test (#70) Two checks the zyx registry already runs: - theme:check also fails when an @Utility or @Keyframes that a registry item ships is missing from app/globals.css, so the site cannot render an item differently from a project that installed it - the smoke test adds every ui, component and block item from the built registry after the hand-written assertions; the seven items since #63 (focus, avatar-stack, countdown, expand-row, number-ticker, chart, signature-pad) were never installed in CI README lists those seven items and no longer says a combobox menu is as wide as its trigger (#67). Claude-Session: https://claude.ai/code/session_01DNMgVpzJEQhK39qSpfRJvU Co-authored-by: Claude Opus 5.5 <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.
Loki chose the direction from the comparison page (https://claude.ai/artifact/5f3SP6BMTgiqKh6GTEwGfL): direction C (a living surface) set against A (quiet precision). Every app page gets one loud thing; the rest stays quiet.
DESIGN.md
focusblock per page, under the header; only it uses primary-colored text, the spring and rolling numbers. Pages with nothing pressing have no focus. Rows with more to say open in place.duration-spring(500ms, 10% overshoot, as a CSSlinear()curve),animate-rise(the focus rises on load) andstagger-rise(a list's rows rise 30ms apart, 200ms each). Reduced motion turns rising into fading and stops digits rolling.New items
number-ticker(ui): digits roll to the new value; screen readers get the plain number.focus(block): Focus, FocusLabel, FocusTitle, FocusHighlight, FocusMeta.avatar-stack(block): overlapping 40px avatars that spread on hover or focus, names in tooltips, +N past max.countdown(block): time left to the minute with rolling digits; SSR-safe through useSyncExternalStore.expand-row(block): a list row opening in place on the spring (Base UI Collapsible), actions outside the toggle.Each has a doc page and demo (demos use roles, not names).
Verified
On the sandbox: typecheck, lint, format, theme:check, tokens:check and
shadcn build && next buildpass. In Peck against the static build: /focus shows the countdown rolling (a stretch bug in the digit column was found and fixed), /expand-row opens in place.🤖 Generated with Claude Code