Examples
Production-ready snippets for Motion across React, JavaScript, and Vue. Ready to copy paste straight into your site, or adapt with AI.
Examples with tutorials
Command Palette
Scroll Direction: Hide Header
Scroll Image Reveal
Scroll Zoom Hero
Scroll velocity: 3D planes
iOS App Folder
To-do list
Carousel: iOS exposure slider
AnimatePresence modes
Cursor: Floating target
Card stack
Material Design: Ripple
Material Design: Ripple
Magnetic filings
Cursor trail
Cursor trail velocity
Infinite loading
Scroll highlight
Loading: Infinite path drawing
Apple Intelligence ripple
Family-style dialog
Split text
Hold to confirm
Multi state badge
Notifications stack
Hold to confirm
Characters remaining
Multi state badge
Loading: Circle spinner
Fill text
Loading: Jumping dots
Loading overlay
Loading progress bar
Loading ripple
Loading: Pulse dots
Loading: Circle spinner
Fill text
Loading: Jumping dots
Loading overlay
Loading progress bar
Loading ripple
Loading: Pulse dots
Loading: Circle spinner
Fill text
Loading: Jumping dots
Loading overlay
Loading progress bar
Loading ripple
Loading: Pulse dots
Physical stagger
iOS App Store
iOS App Store: Layout animation
Conic gradient pointer
Image reveal slider
iOS slider
Notifications list
Tilt card
Typewriter
Tilt card
Split Text
Split Text: Scatter
Split Text: Wavy
Color interpolation
Image reveal slider
Gestures
Accordion
Bounce easing
Modal dialog
Reveal text effect
Spring: Follow Cursor
Press
Swipe actions
Hover
Accordion
iOS slider
Smooth Tabs
Tab select
iOS App Store
Follow pointer with spring
HTML content
Keyframe wildcards
Parallax
Spinning 3D cube
CSS spring
Lightbox
Page wipe
iOS Notifications stack
Shared view animation
View animation
HTML content
Basic animation
Parallax
Rotate
Scroll fade in/out
Scroll pinning
Scroll-triggered animation
Spring
Stagger
SVG loading spinner
SVG path morphing
Three.js
Exit animation
Drag
Enter animation
Gestures
Keyframes
Layout animation
Motion along a path
Path drawing
Path morphing
Transition options
Variants
Rotate
Pull example source straight into Cursor, Claude Code, and any MCP-aware agent.
Premium examples are searchable for Motion+ members through the Motion MCP server.
Learn more about Motion+Motion+
Unlock all 370+ examples
- Source code for every Plus example.
- Provide examples direct to your agent via Motion's MCP.
- Lifetime access to new examples and APIs.