sh4dcnv2 · atlas
← libraries

@motion-lexicon

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

150 components react shadcn-cli MIT

Install this registry

shadcn (npm) npx shadcn@latest add https://motion-lexicon.pages.dev/r/registry.json
pnpm pnpm dlx shadcn@latest add https://motion-lexicon.pages.dev/r/registry.json
bun bunx shadcn@latest add https://motion-lexicon.pages.dev/r/registry.json
fetch registry curl -s https://motion-lexicon.pages.dev/r/registry.json

Components

150 total
Agent workspace 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 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 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 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 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 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 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 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 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 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 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 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 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
Human approval flow 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 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
Agent prompt composer 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 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 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 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 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 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 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 ui

Combines search, keyboard navigation, and deliberate focus management.

npx shadcn@latest add https://motion-lexicon.pages.dev/r/command-palette.json
Context menu 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 ui

Includes focus containment, drag dismissal, and interruptible spring motion.

npx shadcn@latest add https://motion-lexicon.pages.dev/r/drawer.json
Dropdown ui

Moves selection continuously with full keyboard behavior.

npx shadcn@latest add https://motion-lexicon.pages.dev/r/dropdown.json
Modal ui

Handles focus, backdrop, exit, and async confirmation as one flow.

npx shadcn@latest add https://motion-lexicon.pages.dev/r/modal.json
Popover 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 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 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 ui

Coordinates typing, paste, error, and success feedback.

npx shadcn@latest add https://motion-lexicon.pages.dev/r/otp-input.json
Password strength 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 ui

Snaps to meaningful detents while preserving continuous input.

npx shadcn@latest add https://motion-lexicon.pages.dev/r/slider-detents.json
Tag input ui

Gives clear feedback for adding, removing, and rejecting tags.

npx shadcn@latest add https://motion-lexicon.pages.dev/r/tag-input.json
Accordion ui

Keeps content height and disclosure state visually continuous.

npx shadcn@latest add https://motion-lexicon.pages.dev/r/accordion.json
Hide on scroll 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 ui

Carries one shared highlight between options.

npx shadcn@latest add https://motion-lexicon.pages.dev/r/segmented-control.json
Tabs ui

Coordinates the indicator, direction, and panel change.

npx shadcn@latest add https://motion-lexicon.pages.dev/r/tabs.json
Filter grid ui

Preserves spatial continuity as filtered results rearrange.

npx shadcn@latest add https://motion-lexicon.pages.dev/r/filter-grid.json
Reorder list 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 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 ui

Covers pending, determinate, and complete progress states.

npx shadcn@latest add https://motion-lexicon.pages.dev/r/progress-bar.json
Value flash 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 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 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 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 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 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 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 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 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 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 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 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 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
Gallery lightbox 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 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
3D product viewer 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 ui

Browses media with depth, snapping, and keyboard control.

npx shadcn@latest add https://motion-lexicon.pages.dev/r/coverflow-gallery.json
Image trail 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 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 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 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 and after comparison 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 ui

Presents product or project history with progressive focus.

npx shadcn@latest add https://motion-lexicon.pages.dev/r/changelog-timeline.json
Kanban board 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 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 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 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 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 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
Fade in / Fade out 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
Slide in 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
Scale in 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
Reveal 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
Stagger 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
Keyframes ui

Compose multi-stage keyframes, interpolation, stepped motion, and fill behavior.

npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-keyframes.json
Duration 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
Translate ui

Combine translation, scale, rotation, skew, perspective, and transform origin.

npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-translate.json
3D tilt / Flip 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
Origin-aware animation 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
Crossfade ui

Crossfade overlapping, similarly sized states to reduce visual jumps.

npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-crossfade.json
Morph 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
Accordion / Collapse 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
Direction-aware transition 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
Scroll reveal 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
Scroll-driven animation 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
Parallax 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
Page transition 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
Hover effect ui

Reinforce interactivity on pointer hover while keeping layout stable.

npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-hover-effect.json
Press / Tap feedback 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
Hold to confirm 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
Drag to reorder 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
Swipe to dismiss 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
Shake / Wiggle 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
Ripple 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
Easing ui

Compare common easing curves and custom cubic-bezier velocity profiles.

npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-easing.json
Spring 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
Loop ui

Compare loop direction, count, pauses, and rhythm while controlling distraction.

npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-loop.json
Marquee 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
Orbit 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
Idle animation 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
Blur 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
Before / after slider 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
Line drawing 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
Text morph 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
Skeleton / Shimmer 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
Number ticker 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
Typewriter 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
Compositing 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
Anticipation ui

Tune anticipation, follow-through, and deformation to understand physical feedback.

npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-anticipation.json