Motion Lexicon

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

English · 简体中文

Website · Components · Page Blocks · Primitives · Motion Lexicon Skill · Guides

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.

Collection	Use it for	Delivery
Components	One complete product interaction	Live preview, source, typed API, and shadcn Registry install
Page Blocks	One responsive product page assembled from Components	Self-contained React page, viewport preview, source, and Registry install
Primitives	A reusable motion rule or timing decision	44 canonical workbenches covering all 91 source terms
Motion Lexicon Skill	Product-aware composition and implementation guidance	Component 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:

implementation → direct-import demo → preview and code view → /r/:id.json

npx shadcn@latest add https://motion-lexicon.pages.dev/r/cinematic-hero.json
npx shadcn@latest add https://motion-lexicon.pages.dev/r/focus-gallery.json
npx shadcn@latest add https://motion-lexicon.pages.dev/r/onboarding-flow.json

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

{
  "registries": {
    "@motion-lexicon": "https://motion-lexicon.pages.dev/r/{name}.json"
  }
}

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.

# Install for the current project
npx skills add Ryan-yang125/motion-lexicon --skill motion-lexicon

# Install at user scope
npx skills add Ryan-yang125/motion-lexicon --skill motion-lexicon --global

# Install only for Codex; replace codex with another supported agent ID when needed
npx 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

src/registry/components/       100 React Component implementations
src/registry/demos/            Direct-import, real-product Component demos
src/registry/blocks/           10 React Page Block implementations
src/registry/block-demos/      Direct-import, responsive Block demos
src/registry/primitives/       44 canonical motion primitives
src/data/                      Catalog, routing, i18n, and SEO source
skills/motion-lexicon/         Independently versioned Skill 4.2.0
scripts/                       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/.

npm ci
npm run dev
npm run build

Quality gates

npm run lint
npm run typecheck
npm run test
npm run i18n:check
npm run vocabulary:check
npm run motion-grammar:check
npm run skill:check
npm run artifacts:check
npm run seo:check
npm run motion:check
npm run a11y:check
npm run build
npm run bundle:check
npm run crawl:dist
npm 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: MIT
• Project-authored content: CC BY 4.0
• Interior-derived interaction work: MIT attribution

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