@motion-lexicon
Copy-ready React page blocks and motion components with bilingual previews, reduced-motion paths, and shadcn Registry delivery.
Install this registry
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 curl -s https://motion-lexicon.pages.dev/r/registry.json Components
150 totalOrganizes 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 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 Explores time ranges through stable metrics, trends, and channel structure.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/analytics-dashboard.json 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 Maintains a clear handling path across queue, conversation, and customer context.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/support-inbox.json 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 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 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 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 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 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 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 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 Carries recommendations, custom instructions, and explicit confirmation before an agent acts.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/approval-flow.json 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 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 Presents retrieved chunks, provenance, and relevance with focused disclosure.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/context-sources.json Reviews agent-proposed field edits with explicit per-change decisions.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/diff-review.json 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 Reports clipboard state in place without shifting nearby content.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/copy-button.json Keeps pending, success, and error feedback inside one action.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/loading-button.json Protects high-risk actions with cancellable touch, pointer, and keyboard progress.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/hold-action.json Combines search, keyboard navigation, and deliberate focus management.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/command-palette.json Opens from the trigger coordinate and stays inside the viewport.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/context-menu.json Includes focus containment, drag dismissal, and interruptible spring motion.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/drawer.json Moves selection continuously with full keyboard behavior.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/dropdown.json Handles focus, backdrop, exit, and async confirmation as one flow.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/modal.json Derives its reveal origin from the trigger and available space.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/popover.json Expands from a toolbar action into a focused search field.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/expanding-search.json Places pending, error, and success states next to the input.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/inline-validation.json Coordinates typing, paste, error, and success feedback.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/otp-input.json Makes rule checks and strength changes legible as one response.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/password-strength.json Snaps to meaningful detents while preserving continuous input.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/slider-detents.json Gives clear feedback for adding, removing, and rejecting tags.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/tag-input.json Keeps content height and disclosure state visually continuous.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/accordion.json Hides and restores a toolbar in response to scroll direction.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/hide-on-scroll.json Carries one shared highlight between options.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/segmented-control.json Coordinates the indicator, direction, and panel change.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/tabs.json Preserves spatial continuity as filtered results rearrange.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/filter-grid.json Provides clear drop position for pointer and keyboard reordering.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/reorder-list.json Explains sorting through row position while keeping data readable.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/sortable-table.json Covers pending, determinate, and complete progress states.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/progress-bar.json Explains value changes with direction and brief color feedback.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/value-flash.json 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 Reveals a new theme outward from the exact toggle point.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/theme-reveal.json Keeps highlight, panel, and focus movement in one continuous navigation path.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/mega-menu.json Scales nearby destinations with restrained spring response to pointer distance.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/floating-dock.json Coordinates recording, levels, pause, and completion inside one input surface.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/voice-capture.json 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 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 Shares stable geometry between skeleton and content for a composed handoff.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/skeleton-reveal.json Preserves date groups and the unread boundary as live activity arrives.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/activity-feed.json Explains system relationships through nodes, routed links, and moving signals.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/integration-map.json 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 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 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 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 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 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 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 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 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 Expands contained media into an immersive hero through chapter scrolling.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/scroll-media-expansion.json 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 Uses image, typography, and action to establish a paced brand opening.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/cinematic-hero.json Uses a low-power WebGL field that reshapes around pointer intent.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/shader-hero.json 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 Presents multiple product surfaces in depth while retaining the active focus.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/screenshot-stack.json Demonstrates a developer workflow and result through progressive commands.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/terminal-hero.json 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 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 Lets one image gain focus while neighboring media yields.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/focus-gallery.json Browses stacked records or stories in a compact space.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/card-stack.json Transitions portrait, quote, attribution, and progress as one evidence unit.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/animated-testimonials.json Browses media with depth, snapping, and keyboard control.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/coverflow-gallery.json Generates and retires restrained image fragments along pointer or drag paths.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/image-trail.json Uses image resolution as a controllable reveal and transition material.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/pixelated-image.json Adds controlled color-channel displacement to editorial media on focus.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/chromatic-image.json Binds implementation differences and rendered output inside one switchable comparison surface.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/code-comparison.json Compares two complete image states through a stable boundary.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/before-after-comparison.json 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 Transitions technical labels and status through quick character substitution.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/text-scramble.json 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 Cycles compact, operable messages inside a badge or inline space.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/text-loop.json 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 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 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 Preserves navigation context while a product sidebar resizes or collapses.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/resizable-sidebar.json Expands transient notices into a readable, actionable grouped history.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/notification-center.json 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 Preserves route origin and destination meaning through layered page depth.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/page-transition-stack.json 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 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 Accepts files through drag, picker, and paste with clear intake feedback.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/file-dropzone.json 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 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 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 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 Searches and selects a changing result set while preserving keyboard position.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/animated-combobox.json Handles read, edit, save, error, and commit states inside shared geometry.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/inline-edit.json 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 Presents KPI, direction, and comparison period as one readable update.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/metric-ticker.json 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 Presents product or project history with progressive focus.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/changelog-timeline.json 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 Explains changing price through quantity, tier, and billing interval.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/pricing-calculator.json 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 Provides a branded atmospheric field that breathes slowly while visible.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/aurora-canvas.json 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 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 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 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 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 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 Introduce list items at short intervals to communicate order and rhythm.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-stagger.json Compose multi-stage keyframes, interpolation, stepped motion, and fill behavior.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-keyframes.json Compare how duration and delay affect response, rhythm, and perceived waiting.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-duration.json Combine translation, scale, rotation, skew, perspective, and transform origin.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-translate.json 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 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 Crossfade overlapping, similarly sized states to reduce visual jumps.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-crossfade.json 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 Coordinate height, opacity, and icon state for clear disclosure transitions.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-accordion-collapse.json 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 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 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 Move foreground and background at restrained relative speeds to create depth.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-parallax.json 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 Reinforce interactivity on pointer hover while keeping layout stable.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-hover-effect.json 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 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 Keep pickup, placeholder, and drop states clear while reordering.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-drag-to-reorder.json 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 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 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 Compare common easing curves and custom cubic-bezier velocity profiles.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-easing.json 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 Compare loop direction, count, pauses, and rhythm while controlling distraction.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-loop.json Continuously scroll overflowing content and pause it on hover or focus.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-marquee.json 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 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 Reveal media or content layers with coordinated blur, opacity, and masking.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-blur.json 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 Draw icons, paths, or explanatory connectors with stroke offset animation.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-line-drawing.json Transition between similarly sized short labels while preserving reading position.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-text-morph.json Communicate loading progress with a low-contrast shimmer across placeholders.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-skeleton-shimmer.json 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 Reveal short text character by character while preserving complete accessible text.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-typewriter.json Compare compositor-friendly properties, hardware-acceleration hints, and layout-triggering properties.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-compositing.json Tune anticipation, follow-through, and deformation to understand physical feedback.
npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-anticipation.json