Motion Lexicon

Motion Lexicon

Copy-ready React motion components for memorable products.
100 components · 10 Page Blocks · live previews · shadcn Registry · reduced motion.

·

· · · · ·

100 components
10 page blocks
44 primitives

Start with Components

Motion Lexicon is a React component library for product interactions with a clear resting frame, a recognizable motion signature, real content, and an installation path. Components lead discovery; Page Blocks, Primitives, and the Skill extend the same system.

CollectionUse it forDelivery
One complete product interactionLive preview, source, typed API, and shadcn Registry install
One responsive product page assembled from ComponentsSelf-contained React page, viewport preview, source, and Registry install
A reusable motion rule or timing decision44 canonical workbenches covering all 91 source terms
Product-aware composition and implementation guidanceComponent selection, page plan, implementation, and review workflow

The 100 Components span 11 categories: Agent UI, Actions, Overlays & Surfaces, Forms & Input, Navigation, Data & Commerce, Feedback, Cards & Media, Visual & Ambient, Hero & Story, and Text & Type.

Three scene families

  • Product Mono — precise product states, data, forms, navigation, and feedback.
  • Editorial Warm — image-led stories, material detail, generous type, and cultural character.
  • Spatial Dark — dimensional product worlds, technical depth, and restrained light.

Each scene begins with an intentional static frame. Motion explains a user action or meaningful state change; reduced motion preserves the same outcome.

Install

Every Component and Page Block follows one source chain:

text
implementation → direct-import demo → preview and code view → /r/:id.json
bash
npx shadcn@latest add https://motion-lexicon.pages.dev/r/cinematic-hero.jsonnpx shadcn@latest add https://motion-lexicon.pages.dev/r/focus-gallery.jsonnpx shadcn@latest add https://motion-lexicon.pages.dev/r/onboarding-flow.json

Add the registry once to components.json for shorter commands:

json
{  "registries": {    "@motion-lexicon": "https://motion-lexicon.pages.dev/r/{name}.json"  }}
bash
npx shadcn@latest add @motion-lexicon/cinematic-hero

Registry items declare their runtime dependencies. The library uses React, Motion, GSAP, Three.js, WebGL, SVG, and CSS where they suit the component job. Heavy scenes gate work to the viewport and release graphics resources on unmount.

Motion Lexicon Skill 4.2.0

The Skill is versioned independently from the website package. Install it when an agent needs a page plan, exact Registry component selection, implementation guidance, or motion and accessibility review.

bash
# Install for the current projectnpx skills add Ryan-yang125/motion-lexicon --skill motion-lexicon
# Install at user scopenpx skills add Ryan-yang125/motion-lexicon --skill motion-lexicon --global
# Install only for Codex; replace codex with another supported agent ID when needednpx skills add Ryan-yang125/motion-lexicon --skill motion-lexicon --agent codex

Use npx skills list for a project install and npx skills list --global for a user-scope install.

Development

text
src/registry/components/       100 React Component implementationssrc/registry/demos/            Direct-import, real-product Component demossrc/registry/blocks/           10 React Page Block implementationssrc/registry/block-demos/      Direct-import, responsive Block demossrc/registry/primitives/       44 canonical motion primitivessrc/data/                      Catalog, routing, i18n, and SEO sourceskills/motion-lexicon/         Independently versioned Skill 4.2.0scripts/                       Registry, prerender, and quality checks

Motion Lexicon is a static React + TypeScript application. npm run build generates the application, localized prerendered pages, sitemap, public catalog, and the shadcn-compatible registry under /r/.

bash
npm cinpm run devnpm run build

Quality gates

bash
npm run lintnpm run typechecknpm run testnpm run i18n:checknpm run vocabulary:checknpm run motion-grammar:checknpm run skill:checknpm run artifacts:checknpm run seo:checknpm run motion:checknpm run a11y:checknpm run buildnpm run bundle:checknpm run crawl:distnpm run test:visual

Release assets

V6 screenshots, social images, machine-readable catalog output, and public Registry JSON are regenerated during release acceptance after catalog and visual review are complete.

License and attribution

  • Application and component code:
  • Project-authored content:
  • Interior-derived interaction work:

The collection builds on interaction principles and MIT-licensed implementations from .