Motion Lexicon

Overview

Motion Lexicon is a library of 100 copy-ready React motion components, 10 full page blocks and 44 motion atoms, delivered through a shadcn registry. The site is bilingual, with Chinese and English previews, and each component is tagged with its weight (medium or heavy) and the libraries it needs, such as motion, GSAP, three.js or WebGL.

Components are grouped by product task: agent products, actions, overlays, forms and inputs, navigation, data and commerce, feedback, cards and media, visuals, heroes and typography. Previews can be switched between three visual directions: Product Mono, Editorial Warm and Spatial Dark. Components include reduced-motion paths, and the project ships an agent skill for planning, building and reviewing motion.

Features

• 12 flagship components: Image lightbox, scroll story, 3D product viewer, dither reveal card, network globe, spotlight bento and shader hero.
• Agent UI: Thinking trace, streaming answer, tool call stack, approval flow, diff review and multi-agent handoff.
• Page blocks: Agent workspace, product landing, analytics dashboard, support inbox, commerce storefront, developer docs and onboarding flow.
• Forms and controls: OTP input, password strength, tag input, slider detents, segmented control and inline validation.
• Motion atoms: 44 small interactions, such as a copy button, each installable on its own.
• Reduced motion: Each component provides a reduced-motion path.

Tech stack

• React, motion, GSAP, three.js, WebGL, shadcn registry

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @motion-lexicon/component-name