Motion-First Components

Components, hooks, and blocks for any shadcn/ui project. The code goes into your repo, so you can change anything.

Browse componentsRead docs

Built on

shadcn/uiBase UIMotionTailwind CSS

Index

The Registry

Components

01Actions

Buttons whose motion reports what the action is doing.

  1. Copy Button
  2. Download Button
  3. Expandable Toggle Button
  4. Like
  5. Like Burst
  6. Like Button
  7. Play Button
  8. Seek Button
  9. Sliding Play Button
  10. Status Button

02Form

Inputs and form controls for focused interaction states.

  1. Adaptive Switch
  2. Expandable Slider
  3. Expandable Subscribe
  4. Filter Tags
  5. Floating Select
  6. OTP Input

03Tabs & Navigation

Tab lists, selectable rails, and menus with roving focus and a moving indicator.

  1. Expandable Segmented Tabs
  2. Expandable Tabs
  3. Highlight Tabs
  4. Nav Link
  5. Navigation Menu
  6. Rail List
  7. Sliding List

04Overlays

Dialogs, drawers, popovers, and panels that float above the page.

  1. Adaptive Drawer
  2. Arc Menu
  3. Expandable Dialog
  4. Expandable Panel
  5. Feedback Popover
  6. Floating Shortcut Button

05Display

Read-only output — status, text, and elapsed time — where motion carries the change.

  1. Check Mark
  2. Ring HUD
  3. Shy Heart
  4. Status Badge
  5. Text Morph
  6. Timer

06Layout & Flow

Structural primitives that measure, arrange, and transition changing content.

  1. Expandable Toolbar
  2. Multi-Step Flow
  3. Smooth Height

07Motion Primitives

Reusable motion behaviors that animate icons, elements, and nested content.

  1. Change Highlight
  2. Context Cursor
  3. Heartbeat
  4. Icon Swap
  5. Jitter
  6. Projected Shadow
  7. Scan Reveal
  8. Squeeze
  9. Staggered Entrance
  10. Stroke Trace
  11. Text Decode

Hooks

01Accessibility

Hooks that adapt interfaces to user preferences.

  1. useReducedMotion

02Measurement

Hooks for measuring rendered element dimensions.

  1. useElementHeight
  2. useElementSizeMap

03Motion

Hooks that drive scroll-linked, gesture-linked, and eased movement.

  1. useScrollAnchor
  2. useScrollProgress
  3. useSequencePlayer
  4. useSwipeNavigation

Blocks

01App Patterns

Composed product interfaces for navigation, rich content, and complete screen states.

  1. Deck Lift
  2. Mermaid Diagram
  3. Rail Stage

02Marketing Scenes

Immersive scroll heroes and scene galleries for marketing surfaces.

  1. Demo Tabs
  2. Ripple Scene Gallery
  3. Scroll Expand & Focus Hero
  4. Vertical Scene Gallery