Examples
Production-ready snippets for Motion across React, JavaScript, and Vue. Ready to copy paste straight into your site, or adapt with AI.
Motion+ examples
Curtains: Mixed effects
Curtains: Showcase
OSS Hero
Toast: Stacked notifications
Radial Menu
Confetti
Scramble text
Scramble text: Hover
Scramble text: Stagger from center
Scramble text
Scramble text: Hover
Scramble text: Stagger from center
Carousel: Vertical
Carousel: Lightbox
Carousel: Loop
Carousel: Pagination with page count
Carousel: RTL
Carousel: Thumbnail gallery
Material Design: Ripple
Cursor trail
Cursor trail velocity
Infinite loading
Cursor trail
Cursor trail velocity
Base UI: Context menu
Base UI: Dialog
Base UI: Dropdown menu
Base UI: Toast
Base UI: Tooltip
Infinite loading
Modal dialog
Typewriter: Change Content
Typewriter: Exploding Countdown
Typewriter: Natural Typing
Typewriter: Exploding Countdown
Typewriter: Natural Typing
Scroll highlight
Scroll highlight
Scroll highlight
iOS Notifications stack
Split text
Scatter text
Wavy text
Notifications stack
Loading ripple
Radix: Context Menu
Radix: Toast
Radix: Tooltip
Physical stagger
Typewriter
Fill text
Loading overlay
Loading progress bar
Loading ripple
Loading ripple
Physical stagger
Physical stagger
Tilt card
Typewriter
Split Text
Split Text: Scatter
Split Text: Wavy
Modal dialog
Reveal text effect
AnimateActivity: Slideshow
Radix: Context Menu
Radix: Dialog
Radix: Tooltip
Engagement stats
Modal dialog
Typewriter
Typewriter: Change Content
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.