Skip to content

feat(viewer): sentence-case labels and native motion - #12

Merged
hyamero merged 42 commits into
mainfrom
feat/motion
Sep 29, 2026
Merged

hyamero merged 42 commits into
mainfrom
feat/motion

Conversation

@hyamero

@hyamero hyamero commented Sep 29, 2026 •

Copy link
Copy Markdown
Member

Depends on #11 (merge that first; this diff then shrinks to the commits here).

Typography. Section, legend, lens and group-frame labels drop the uppercase + 0.12em tracking style: inspector sections are 13px semibold, captions and group labels 12.5px medium muted.

Motion (Web Animations API, no dependency; single file 629 KB of the 700 KB budget). One module, src/motion/, with the easing and duration vocabulary. anime.js was tried first and dropped: most of the code was cleanup after its inline style commits, and it cost ~36 KB.

  • Intro: frames, then cards in the diagram's reading direction, then each connection draws from its source once both ends are in; normalised to one span, so big diagrams take no longer.
  • Live reloads under serve animate only new nodes and edges (ids shown are kept in sessionStorage next to the camera); the chrome stays still.
  • Popovers grow from their trigger (160ms). Opened from the keyboard (/, Enter/Space, ArrowDown) they appear instantly.
  • Inspector content fades in on a new selection; the view-tab underline slides; the live toast rises in; canvas panels settle in on first load; buttons dip 4% on press.
  • Each element is its own el.animate(…, { fill: 'backwards' }): hidden through its stagger delay, nothing inline once done, so dim/focus emphasis stays pure CSS, even mid-intro. Edges draw with pathLength=1 and an animated stroke-dashoffset; the arrowhead waits until the line arrives.
  • PNG/SVG export settles any running motion before cloning.
  • The live toast keeps one persistent role=status region, so switching between "disconnected" and "errors" is still announced.
  • Reduced motion: nothing animates.

Tests. E2E runs with reduced motion by default; e2e/motion.spec.ts covers the intro settling cleanly, per-element settling, emphasis after the intro, pointer vs keyboard popovers, export mid-intro and reduced motion; serve.spec.ts covers new-only reveal on live reload. The reduced-motion camera test now checks frame by frame instead of after a 20ms sleep (it flaked under load). Visual baselines regenerated on CI (Linux).

@hyamero hyamero changed the title feat(viewer): sentence-case labels and anime.js motion feat(viewer): sentence-case labels and native motion Sep 29, 2026
@hyamero
hyamero merged commit 3292859 into main Sep 29, 2026
2 checks passed
@hyamero
hyamero deleted the feat/motion branch September 30, 2026 03:31
@github-actions

github-actions Bot commented Oct 2, 2026

Copy link
Copy Markdown
Contributor

🎉 This PR is included in version 0.1.0-rc.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

@github-actions

github-actions Bot commented Oct 2, 2026

Copy link
Copy Markdown
Contributor

🎉 This PR is included in version 0.1.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant