01 / Keyboard surfaceMove without leaving context.
No command selected
Command Palette
Search and run application actions from a focus-safe modal command surface.
Compositions / 08 implemented
Composition explorer
Complete workflows assembled from the same accessible motion contracts.
08 resultsPackage / Copy source
1 foundations
Nine production-ready components, typed source graphs, and deterministic install plans.
- Components
- 09
- Compositions
- 08
Expandable Project Card
Reveal project details and actions inside an accessible, variable-height card.
Notification center
02 unread- Preview ready
Composition docs are available locally.
Now - Accessibility verified
Keyboard checks passed.
4m - Production build complete1h
Notification Center
Manage persistent unread history alongside queued, pausable live notifications.
4 projects
- EC
Easecraft
Accessible motion infrastructure.
- FN
Field Notes
Publication and identity system.
- RL
Relay
- IX
Index
Filterable Work Gallery
Filter a semantic project gallery with focus-safe exits and animated two-axis reflow.
Step 1 of 4: Profile
01 / Identity
Set up your profile
Choose how your teammates will recognize you across the workspace.
Onboarding Progress Sequence
Guide a controlled or self-managed setup flow with animated panels and explicit progress.
EC
06 / Navigation sheet
Everything in reach.
Last destination: overview
Mobile Navigation Panel
Open a focus-safe mobile navigation sheet with grouped destinations and current-page state.
07 / Flexible billingPlans that move with you.
No plan selected
Monthly billing selected.
Solo
For independent makers shipping focused work.
- Included3 active projects
- Included30-day history
- Not includedTeam collaboration
Studio
Most popularFor teams building systems together.
- IncludedUnlimited projects
- IncludedUnlimited history
- IncludedUp to 10 teammates
Scale
For organizations coordinating many teams.
- IncludedUnlimited projects
- IncludedAudit log and SSO
- IncludedUnlimited teammates
Animated Pricing Comparison
Compare stable plan cards while animated prices respond to monthly or annual billing.
Section 1 of 4: Brief
January 2026
Write the motion brief
Frame animation as behavior before choosing an effect.
Principle 01Meaning before movement.
Motion begins as a product decision: what changed, why it matters, and where attention should move next.
That brief becomes the constraint every primitive and component must preserve.
March 2026
Build one execution layer
Centralize lifecycle, timing, and accessibility decisions.
- Tokens
- 04
- Foundations
- 05
Scoped Anime.js lifecycles, semantic motion tokens, and reduced-motion resolution form the shared execution layer.
Every higher-level interaction inherits cleanup and fallback behavior from this layer.
May 2026
Prove the component system
Turn the foundation into useful, testable interface behavior.
09Accessible components
Nine production-ready components prove text, feedback, layout, overlay, and viewport motion through stable public APIs.
Each component ships with focused behavior and integration coverage.
July 2026
Complete the composition registry
Deliver realistic patterns through package and copy-source paths.
Milestone 08The composition catalog is complete.
Eight copyable compositions now connect metadata, dependency graphs, package exports, source delivery, tests, and live documentation.
The registry is ready for copy actions and interactive playground work.
Scroll-driven Article Timeline
Reveal a long-form article once while its timeline tracks the most visible section.