---
name: "@motion-lexicon"
slug: "motion-lexicon"
description: "Copy-ready React page blocks and motion components with bilingual previews, reduced-motion paths, and shadcn Registry delivery."
category: "Animated components"
tags: ["3d", "ai", "animation", "audio", "auth", "backgrounds", "blocks", "buttons", "cards", "charts", "dashboard", "developer-tools", "e-commerce", "editor", "forms", "glassmorphism", "icons", "loaders", "maps", "marketing", "media", "mobile", "navigation", "onboarding", "overlays", "retro", "tables", "theming"]
framework: "react"
license: "MIT"
author: "Ryan-yang125"
website: "https://motion-lexicon.pages.dev"
github: "https://github.com/Ryan-yang125/motion-lexicon"
registry: "https://motion-lexicon.pages.dev/r/registry.json"
pro: false
pro_url: null
github_stars: 41
component_count: 150
generated_at: "2026-09-05T09:50:59.044Z"
---

# @motion-lexicon

Copy-ready React page blocks and motion components with bilingual previews, reduced-motion paths, and shadcn Registry delivery.

## Links

- Website: https://motion-lexicon.pages.dev
- GitHub: https://github.com/Ryan-yang125/motion-lexicon
- Registry JSON: https://motion-lexicon.pages.dev/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/motion-lexicon
- This file: https://sh4dcn.vercel.app/md/motion-lexicon.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://motion-lexicon.pages.dev/r/registry.json
pnpm dlx shadcn@latest add https://motion-lexicon.pages.dev/r/registry.json
bunx shadcn@latest add https://motion-lexicon.pages.dev/r/registry.json
# clone the source repo
git clone https://github.com/Ryan-yang125/motion-lexicon.git
# fetch the raw registry index
curl -s https://motion-lexicon.pages.dev/r/registry.json
```

## Components (150)

| name | type | description | install |
| --- | --- | --- | --- |
| agent-workspace | registry:block | Organizes missions, thinking, tool execution, human approval, and evidence into one continuous agent product page. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/agent-workspace.json` |
| product-landing | registry:block | Connects positioning, collaborative review, and launch action through one continuous release workspace. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/product-landing.json` |
| analytics-dashboard | registry:block | Explores time ranges through stable metrics, trends, and channel structure. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/analytics-dashboard.json` |
| project-dashboard | registry:block | Organizes milestones, current work, and team activity into one actionable project workspace. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/project-dashboard.json` |
| support-inbox | registry:block | Maintains a clear handling path across queue, conversation, and customer context. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/support-inbox.json` |
| creative-portfolio | registry:block | Presents an independent creative practice through work, material studies, and case-story transitions. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/creative-portfolio.json` |
| commerce-storefront | registry:block | Organizes product story, detail browsing, volume pricing, and cart confirmation into a complete purchase path. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/commerce-storefront.json` |
| developer-docs | registry:block | Organizes installation, code comparison, command search, and preview output into navigable developer documentation. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/developer-docs.json` |
| media-editorial | registry:block | Browses a complete visual feature through chapters, focus galleries, and scroll-led storytelling. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/media-editorial.json` |
| onboarding-flow | registry:block | Organizes account setup, file import, and completion checklist into a successful first-workspace path. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/onboarding-flow.json` |
| agent-thinking-trace | registry:ui | Organizes reasoning phases, current focus, and elapsed time into an expandable evidence trail. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/agent-thinking-trace.json` |
| streaming-answer | registry:ui | Brings generated text, cited sources, and follow-up prompts into one progressive answer. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/streaming-answer.json` |
| tool-call-stack | registry:ui | Collects search, write, command, and failure states into an inspectable execution record. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/tool-call-stack.json` |
| approval-flow | registry:ui | Carries recommendations, custom instructions, and explicit confirmation before an agent acts. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/approval-flow.json` |
| task-progress | registry:ui | Presents queued, active, blocked, failed, recovered, and complete work across compact and expanded layouts. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/task-progress.json` |
| prompt-composer | registry:ui | Combines sources, attachments, model choice, voice, and sending into one focused input surface. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/prompt-composer.json` |
| context-sources | registry:ui | Presents retrieved chunks, provenance, and relevance with focused disclosure. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/context-sources.json` |
| diff-review | registry:ui | Reviews agent-proposed field edits with explicit per-change decisions. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/diff-review.json` |
| multi-agent-handoff | registry:ui | Moves task ownership, artifacts, and the next responsible agent along one continuous relay. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/multi-agent-handoff.json` |
| copy-button | registry:ui | Reports clipboard state in place without shifting nearby content. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/copy-button.json` |
| loading-button | registry:ui | Keeps pending, success, and error feedback inside one action. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/loading-button.json` |
| hold-action | registry:ui | Protects high-risk actions with cancellable touch, pointer, and keyboard progress. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/hold-action.json` |
| command-palette | registry:ui | Combines search, keyboard navigation, and deliberate focus management. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/command-palette.json` |
| context-menu | registry:ui | Opens from the trigger coordinate and stays inside the viewport. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/context-menu.json` |
| drawer | registry:ui | Includes focus containment, drag dismissal, and interruptible spring motion. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/drawer.json` |
| dropdown | registry:ui | Moves selection continuously with full keyboard behavior. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/dropdown.json` |
| modal | registry:ui | Handles focus, backdrop, exit, and async confirmation as one flow. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/modal.json` |
| popover | registry:ui | Derives its reveal origin from the trigger and available space. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/popover.json` |
| expanding-search | registry:ui | Expands from a toolbar action into a focused search field. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/expanding-search.json` |
| inline-validation | registry:ui | Places pending, error, and success states next to the input. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/inline-validation.json` |
| otp-input | registry:ui | Coordinates typing, paste, error, and success feedback. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/otp-input.json` |
| password-strength | registry:ui | Makes rule checks and strength changes legible as one response. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/password-strength.json` |
| slider-detents | registry:ui | Snaps to meaningful detents while preserving continuous input. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/slider-detents.json` |
| tag-input | registry:ui | Gives clear feedback for adding, removing, and rejecting tags. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/tag-input.json` |
| accordion | registry:ui | Keeps content height and disclosure state visually continuous. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/accordion.json` |
| hide-on-scroll | registry:ui | Hides and restores a toolbar in response to scroll direction. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/hide-on-scroll.json` |
| segmented-control | registry:ui | Carries one shared highlight between options. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/segmented-control.json` |
| tabs | registry:ui | Coordinates the indicator, direction, and panel change. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/tabs.json` |
| filter-grid | registry:ui | Preserves spatial continuity as filtered results rearrange. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/filter-grid.json` |
| reorder-list | registry:ui | Provides clear drop position for pointer and keyboard reordering. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/reorder-list.json` |
| sortable-table | registry:ui | Explains sorting through row position while keeping data readable. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/sortable-table.json` |
| progress-bar | registry:ui | Covers pending, determinate, and complete progress states. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/progress-bar.json` |
| value-flash | registry:ui | Explains value changes with direction and brief color feedback. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/value-flash.json` |
| magnetic-action | registry:ui | Lets a primary action lean toward a nearby pointer and settle cleanly on release. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/magnetic-action.json` |
| theme-reveal | registry:ui | Reveals a new theme outward from the exact toggle point. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/theme-reveal.json` |
| mega-menu | registry:ui | Keeps highlight, panel, and focus movement in one continuous navigation path. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/mega-menu.json` |
| floating-dock | registry:ui | Scales nearby destinations with restrained spring response to pointer distance. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/floating-dock.json` |
| voice-capture | registry:ui | Coordinates recording, levels, pause, and completion inside one input surface. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/voice-capture.json` |
| toast-stack | registry:ui | Layers incoming notices into a stack that expands and dismisses by swipe or keyboard. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/toast-stack.json` |
| upload-queue | registry:ui | Turns file intake, per-item progress, retry, and completion into one compact flow. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/upload-queue.json` |
| skeleton-reveal | registry:ui | Shares stable geometry between skeleton and content for a composed handoff. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/skeleton-reveal.json` |
| activity-feed | registry:ui | Preserves date groups and the unread boundary as live activity arrives. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/activity-feed.json` |
| integration-map | registry:ui | Explains system relationships through nodes, routed links, and moving signals. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/integration-map.json` |
| cursor-lens | registry:ui | Compares two states of the same media through a movable detail lens. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/cursor-lens.json` |
| media-carousel | registry:ui | Keeps native drag inertia, deliberate snap positions, and keyboard navigation across media cards. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/media-carousel.json` |
| image-lightbox | registry:ui | Expands a thumbnail into an immersive gallery while managing focus and keyboard browsing. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/image-lightbox.json` |
| scroll-story | registry:ui | Binds local scroll progress to chapters that progressively reshape a product scene. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/scroll-story.json` |
| procedural-product-viewer | registry:ui | Presents a procedural 3D product with drag inspection, inertia, and recentering. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/procedural-product-viewer.json` |
| dither-reveal-card | registry:ui | Advances a pixel-dither threshold so imagery develops with a tactile texture. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/dither-reveal-card.json` |
| network-globe | registry:ui | Maps global connections across a 3D globe with nodes, arcs, and selectable focus. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/network-globe.json` |
| kinetic-logo-exchange | registry:ui | Reorders and reveals brand marks in a kinetic queue that yields to user selection. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/kinetic-logo-exchange.json` |
| spotlight-bento | registry:ui | Carries one continuous spotlight across multiple tiles to unify the bento surface. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/spotlight-bento.json` |
| scroll-media-expansion | registry:ui | Expands contained media into an immersive hero through chapter scrolling. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/scroll-media-expansion.json` |
| device-scroll-reveal | registry:ui | Advances product screens, chapter copy, and product state inside a device frame. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/device-scroll-reveal.json` |
| cinematic-hero | registry:ui | Uses image, typography, and action to establish a paced brand opening. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/cinematic-hero.json` |
| shader-hero | registry:ui | Uses a low-power WebGL field that reshapes around pointer intent. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/shader-hero.json` |
| split-screen-reveal | registry:ui | Connects two product states or story perspectives with a draggable boundary. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/split-screen-reveal.json` |
| screenshot-stack | registry:ui | Presents multiple product surfaces in depth while retaining the active focus. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/screenshot-stack.json` |
| terminal-hero | registry:ui | Demonstrates a developer workflow and result through progressive commands. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/terminal-hero.json` |
| product-orbit-hero | registry:ui | Arranges capabilities around a central product object with synchronized focus copy. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/product-orbit-hero.json` |
| expandable-card | registry:ui | Expands a compact story card in place into a full reading surface. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/expandable-card.json` |
| focus-gallery | registry:ui | Lets one image gain focus while neighboring media yields. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/focus-gallery.json` |
| card-stack | registry:ui | Browses stacked records or stories in a compact space. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/card-stack.json` |
| animated-testimonials | registry:ui | Transitions portrait, quote, attribution, and progress as one evidence unit. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/animated-testimonials.json` |
| coverflow-gallery | registry:ui | Browses media with depth, snapping, and keyboard control. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/coverflow-gallery.json` |
| image-trail | registry:ui | Generates and retires restrained image fragments along pointer or drag paths. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/image-trail.json` |
| pixelated-image | registry:ui | Uses image resolution as a controllable reveal and transition material. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/pixelated-image.json` |
| chromatic-image | registry:ui | Adds controlled color-channel displacement to editorial media on focus. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/chromatic-image.json` |
| code-comparison | registry:ui | Binds implementation differences and rendered output inside one switchable comparison surface. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/code-comparison.json` |
| before-after-comparison | registry:ui | Compares two complete image states through a stable boundary. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/before-after-comparison.json` |
| split-text-reveal | registry:ui | Reveals a heading by word or character while retaining complete static legibility. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/split-text-reveal.json` |
| text-scramble | registry:ui | Transitions technical labels and status through quick character substitution. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/text-scramble.json` |
| text-morph | registry:ui | Moves between related phrases within a fixed reading rhythm and stable width. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/text-morph.json` |
| text-loop | registry:ui | Cycles compact, operable messages inside a badge or inline space. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/text-loop.json` |
| scroll-velocity | registry:ui | Lets background typography respond briefly to page velocity and settle readable at rest. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/scroll-velocity.json` |
| kinetic-heading | registry:ui | Changes display-heading spacing, weight, and tension through pointer or keyboard input. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/kinetic-heading.json` |
| dynamic-toolbar | registry:ui | Expands compact actions around the current task while retaining a clear primary entry. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/dynamic-toolbar.json` |
| resizable-sidebar | registry:ui | Preserves navigation context while a product sidebar resizes or collapses. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/resizable-sidebar.json` |
| notification-center | registry:ui | Expands transient notices into a readable, actionable grouped history. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/notification-center.json` |
| mobile-bottom-sheet | registry:ui | Presents mobile actions and detail in a draggable, focus-managed bottom sheet. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/mobile-bottom-sheet.json` |
| page-transition-stack | registry:ui | Preserves route origin and destination meaning through layered page depth. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/page-transition-stack.json` |
| hover-preview | registry:ui | Previews a destination without leaving place, with keyboard and touch pinning support. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/hover-preview.json` |
| workspace-switcher | registry:ui | Manages workspace identity, recent state, and selection changes in a compact control. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/workspace-switcher.json` |
| file-dropzone | registry:ui | Accepts files through drag, picker, and paste with clear intake feedback. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/file-dropzone.json` |
| multi-step-form | registry:ui | Maintains step direction, validation, pending state, and saved progress in a short flow. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/multi-step-form.json` |
| sign-in-flow | registry:ui | Coordinates identity input, pending, error, and success while retaining entered context. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/sign-in-flow.json` |
| onboarding-checklist | registry:ui | Turns setup tasks into a product surface with progress and next-step clarity. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/onboarding-checklist.json` |
| date-range-picker | registry:ui | Distinguishes hover, provisional, confirmed range, and presets inside a calendar grid. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/date-range-picker.json` |
| animated-combobox | registry:ui | Searches and selects a changing result set while preserving keyboard position. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/animated-combobox.json` |
| inline-edit | registry:ui | Handles read, edit, save, error, and commit states inside shared geometry. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/inline-edit.json` |
| animated-empty-state | registry:ui | Moves a valid empty state directly toward one clear first action and result. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/animated-empty-state.json` |
| metric-ticker | registry:ui | Presents KPI, direction, and comparison period as one readable update. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/metric-ticker.json` |
| animated-chart | registry:ui | Compares data ranges and series changes while keeping labels and focus stable. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/animated-chart.json` |
| changelog-timeline | registry:ui | Presents product or project history with progressive focus. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/changelog-timeline.json` |
| kanban-board | registry:ui | Moves work across columns while responding through destination, count, and surrounding cards. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/kanban-board.json` |
| pricing-calculator | registry:ui | Explains changing price through quantity, tier, and billing interval. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/pricing-calculator.json` |
| add-to-cart-morph | registry:ui | Connects product selection continuously to a persistent cart confirmation state. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/add-to-cart-morph.json` |
| aurora-canvas | registry:ui | Provides a branded atmospheric field that breathes slowly while visible. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/aurora-canvas.json` |
| grid-distortion | registry:ui | Bends a grid or media surface around input and returns it smoothly. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/grid-distortion.json` |
| fluid-glass-surface | registry:ui | Creates a refractive glass surface for focused controls or media while preserving legibility. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/fluid-glass-surface.json` |
| primitive-fade-in-fade-out | registry:ui | Introduce or remove an element with opacity for low-distraction state changes. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-fade-in-fade-out.json` |
| primitive-slide-in | registry:ui | Bring content in from a clear direction so its spatial relationship stays legible. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-slide-in.json` |
| primitive-scale-in | registry:ui | Scale from near the final size, with an optional slight overshoot for Pop in. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-scale-in.json` |
| primitive-reveal | registry:ui | Reveal content with clipping and slight travel for headings, media, and sections. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-reveal.json` |
| primitive-stagger | registry:ui | Introduce list items at short intervals to communicate order and rhythm. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-stagger.json` |
| primitive-keyframes | registry:ui | Compose multi-stage keyframes, interpolation, stepped motion, and fill behavior. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-keyframes.json` |
| primitive-duration | registry:ui | Compare how duration and delay affect response, rhythm, and perceived waiting. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-duration.json` |
| primitive-translate | registry:ui | Combine translation, scale, rotation, skew, perspective, and transform origin. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-translate.json` |
| primitive-3d-tilt-flip | registry:ui | Use controlled perspective and rotation for card flips or hover depth. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-3d-tilt-flip.json` |
| primitive-origin-aware-animation | registry:ui | Expand or scale from the trigger point to preserve spatial continuity. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-origin-aware-animation.json` |
| primitive-crossfade | registry:ui | Crossfade overlapping, similarly sized states to reduce visual jumps. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-crossfade.json` |
| primitive-morph | registry:ui | Create continuous transformation between before and after layouts of a shared element. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-morph.json` |
| primitive-accordion-collapse | registry:ui | Coordinate height, opacity, and icon state for clear disclosure transitions. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-accordion-collapse.json` |
| primitive-direction-aware-transition | registry:ui | Match enter and exit directions to navigation order and preserve context. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-direction-aware-transition.json` |
| primitive-scroll-reveal | registry:ui | Reveal content once as it enters the viewport with a reduced-motion fallback. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-scroll-reveal.json` |
| primitive-scroll-driven-animation | registry:ui | Bind animation progress to a scroll range and tune its start, end, and travel. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-scroll-driven-animation.json` |
| primitive-parallax | registry:ui | Move foreground and background at restrained relative speeds to create depth. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-parallax.json` |
| primitive-page-transition | registry:ui | Preserve continuity across page or view changes with a safe fallback. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-page-transition.json` |
| primitive-hover-effect | registry:ui | Reinforce interactivity on pointer hover while keeping layout stable. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-hover-effect.json` |
| primitive-press-tap-feedback | registry:ui | Confirm input immediately with a brief scale and contrast response. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-press-tap-feedback.json` |
| primitive-hold-to-confirm | registry:ui | Show cancellable progress during hold-to-confirm interactions to reduce mistakes. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-hold-to-confirm.json` |
| primitive-drag-to-reorder | registry:ui | Keep pickup, placeholder, and drop states clear while reordering. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-drag-to-reorder.json` |
| primitive-swipe-to-dismiss | registry:ui | Map swipe distance to travel and opacity with resistance before the threshold. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-swipe-to-dismiss.json` |
| primitive-shake-wiggle | registry:ui | Use one brief horizontal shake for errors or inputs that need attention. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-shake-wiggle.json` |
| primitive-ripple | registry:ui | Expand a restrained ripple from the input coordinate for precise touch feedback. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-ripple.json` |
| primitive-easing | registry:ui | Compare common easing curves and custom cubic-bezier velocity profiles. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-easing.json` |
| primitive-spring | registry:ui | Tune a physical spring response with stiffness, damping, mass, and initial velocity. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-spring.json` |
| primitive-loop | registry:ui | Compare loop direction, count, pauses, and rhythm while controlling distraction. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-loop.json` |
| primitive-marquee | registry:ui | Continuously scroll overflowing content and pause it on hover or focus. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-marquee.json` |
| primitive-orbit | registry:ui | Move a decorative node slowly around a center for low-frequency status displays. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-orbit.json` |
| primitive-idle-animation | registry:ui | Use subtle breathing or floating motion for available, waiting, or active states. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-idle-animation.json` |
| primitive-blur | registry:ui | Reveal media or content layers with coordinated blur, opacity, and masking. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-blur.json` |
| primitive-before-after-slider | registry:ui | Compare before and after states of the same visual with a draggable divider. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-before-after-slider.json` |
| primitive-line-drawing | registry:ui | Draw icons, paths, or explanatory connectors with stroke offset animation. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-line-drawing.json` |
| primitive-text-morph | registry:ui | Transition between similarly sized short labels while preserving reading position. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-text-morph.json` |
| primitive-skeleton-shimmer | registry:ui | Communicate loading progress with a low-contrast shimmer across placeholders. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-skeleton-shimmer.json` |
| primitive-number-ticker | registry:ui | Show changing values with tabular figures and stable vertical digit movement. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-number-ticker.json` |
| primitive-typewriter | registry:ui | Reveal short text character by character while preserving complete accessible text. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-typewriter.json` |
| primitive-compositing | registry:ui | Compare compositor-friendly properties, hardware-acceleration hints, and layout-triggering properties. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-compositing.json` |
| primitive-anticipation | registry:ui | Tune anticipation, follow-through, and deformation to understand physical feedback. | `npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-anticipation.json` |

## For AI agents

```text
You are adding components from @motion-lexicon to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/motion-lexicon.md) for the component list.
2. Fetch the machine-readable index: https://motion-lexicon.pages.dev/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: motion-lexicon).
```