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
Scroll Direction: Hide Header
AnimatePresence modes
Cursor trail
Cursor trail velocity
Infinite loading
Scroll highlight
Split text
Notifications stack
Characters remaining
Loading: Circle spinner
Loading: Jumping dots
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
Loading: Jumping dots
Loading ripple
Loading: Pulse dots
Physical stagger
Tilt card
Typewriter
Split Text
Split Text: Scatter
Split Text: Wavy
Gestures
Bounce easing
Modal dialog
Reveal text effect
Press
Hover
HTML content
Keyframe wildcards
CSS spring
HTML content
Basic animation
Parallax
Rotate
Scroll fade in/out
Scroll pinning
Scroll-triggered animation
Spring
Stagger
SVG loading spinner
Exit animation
Enter animation
Gestures
Transition options
Rotate
Pull example source straight into Cursor, Claude Code, and any MCP-aware agent.
Premium examples are searchable for Motion+ members through the Motion AI Kit.
Learn more about Motion+Motion+
Unlock all 400+ examples
- Source code for every Plus example.
- Provide examples direct to your agent via Motion's MCP.
- Lifetime access to new examples and APIs.