feat(storybook): complete Foundations/Motion page - token tables + interactive presets#46
Merged
Merged
Conversation
…teractive presets The Foundations/Motion story predated spec 0033 (only the old 3 easings + 3 durations, no preset demos). Rewrite it into a full motion reference, all driven by the generated Roots tokens (nothing hardcoded), reading in light + dark: - Durations table: all 5 (micro/fast/base/slow/slower) with literal ms + a replayable bar. - Easings table: all 5 (standard/emphasized/decelerate/spring/spring-strong) with literal cubic-bezier + an interactive track; the spring curves visibly overshoot and settle. - Presets: the 5 shipped animate-* utilities (pop-in/out, shake, fade-in/out), each a Play button running the REAL Tailwind utility (remount to replay) + a token-composition line. shake carries motion-reduce:animate-none and a visible mandatory-gating note. Uses literal animate-* class strings so Tailwind v4's scanner emits them. Verified: storybook build + lint green; page rendered and animates (Playwright). Spec: docs/specs/0034-motion-foundations-page.md Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01YHabPujNkgKUUNJjaBQCgT
mattmaynes
commented
Jul 13, 2026
mattmaynes
commented
Jul 13, 2026
mattmaynes
commented
Jul 13, 2026
mattmaynes
commented
Jul 13, 2026
mattmaynes
left a comment
mattmaynes
left a comment
Contributor
Author
There was a problem hiding this comment.
🔧 Spectra Engineer - review
Token-composition mappings all match packages/roots/preset-motion.css exactly (pop-in=base+spring, pop-out=fast+standard, shake=slow+standard, fade-in=base+standard, fade-out=fast+standard). The literal animate-* class strings are all emitted into the compiled CSS (verified in storybook-static), the remount-by-key replay pattern is correct and leak-free, and every value reads from tokens via tokenVal(). pnpm build and pnpm lint both pass. One functional finding on the easing hover affordance, plus a couple of minor notes below.
…op, shake note) Persona review of PR #46 (designer + engineer): - major: easing track clipped ease-spring-strong's overshoot - widen track 360->480px so the full bounce (peak ~392px) is visible; fix the inaccurate "padding" comment. - major: hover-to-play was a CSS no-op - remove the dead :hover rule + false copy; make the track click-to-replay (role/tabindex/keyboard + Play button both remount the dot). - minor: shake reduced-motion note was small danger-red text - restyle as a warning-toned callout with a bold "Reduced motion required" label (token-driven, light+dark). - nit: rename the misleading `keyframe` prop -> `anim`/`animationName`. pnpm build + lint green; overshoot confirmed in-track (RAF sampling + frozen-peak screenshot). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01YHabPujNkgKUUNJjaBQCgT
Capture the review lesson from PR #46 (overshoot clipped by a too-narrow track + a dead hover affordance both passed a static screenshot): feedback 0016 + a learnings entry. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01YHabPujNkgKUUNJjaBQCgT
mattmaynes
added a commit
that referenced
this pull request
Jul 14, 2026
Pre-existing format:check failure on main (from PR #46), unrelated to the seeds change but blocks CI repo-wide (prettier --check .). Formatting only, no logic change. Folded in to unblock the release. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01NYM2qa9QBSvQYBGP3pATQK
mattmaynes
added a commit
that referenced
this pull request
Jul 14, 2026
#48) * fix(seeds): default form controls to 16px on mobile to prevent iOS zoom iOS Safari auto-zooms the page when a focused form control's font-size is below 16px. Input, Textarea, and the Select trigger all used text-sm (14px), so every consumer hit this on phones. Set them to `text-base md:text-sm`: 16px on mobile (no zoom), 14px from md up (keeps the denser desktop typography). Dropdown items stay text-sm - they are not focusable fields. Adds a test per control; captured in docs/feedback/0017. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01NYM2qa9QBSvQYBGP3pATQK * docs(overview): record the 16px mobile form-control learning (feedback 0017) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01NYM2qa9QBSvQYBGP3pATQK * chore(format): prettier --write Foundations.stories.tsx Pre-existing format:check failure on main (from PR #46), unrelated to the seeds change but blocks CI repo-wide (prettier --check .). Formatting only, no logic change. Folded in to unblock the release. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01NYM2qa9QBSvQYBGP3pATQK --------- Co-authored-by: Claude Opus 4.8 (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.
Implements spec 0034. The Foundations/Motion story predated the 0033 motion tokens - it only showed the old 3 easings + 3 durations (paired 1:1), with no literal-value table and no demo of the animation presets. This rewrites it into a complete, interactive motion reference.
What's on the page (all driven by the generated Roots
tokens- nothing hardcoded; renders light + dark)micro80ms,fast120ms,base200ms,slow320ms,slower480ms), literal value + a replayable bar per row.standard,emphasized,decelerate,spring,spring-strong), literalcubic-bezier(...)+ an interactive track; the spring curves visibly overshoot and settle.animate-*utilities (pop-in/out,shake,fade-in/out), each with a Play button that runs the REAL Tailwind utility on a sample (remount to replay) and a token-composition line (e.g.animate-pop-in = pop-in . duration-base . ease-spring).shakeis gatedmotion-reduce:animate-nonewith a visible mandatory-gating (vestibular) note.Notes
animate-*class strings so Tailwind v4's source scanner emits them (same rule the file notes for radii/shadows).Motioncomponent changes; every other Foundations section is untouched.spring-stronghas no shipped preset (by design) - it appears in the easings table/track, not as a preset player.Verification
apps/storybookpnpm build(compiles Tailwind) +pnpm lintgreen; all fiveanimate-*classes confirmed emitted into the compiled CSS.spring-strong=cubic-bezier(0.34, 2.2, 0.64, 1)), and the Play buttons animate without error.packages/rootsuntouched.🤖 Generated with Claude Code