Examples
Production-ready snippets for Motion across React, JavaScript, and Vue. Ready to copy paste straight into your site, or adapt with AI.
Spotlight
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+All examples
Layout Anchor
Pokopia: Modal
Command Palette
OSS Hero
Skeleton Shimmer
Copy Button
Create Button
Dots Morph Button
Toast: Stacked notifications
Floating Action Button
Radial Menu
Confetti
Sheet Modal
Context Menu
Mega Menu
Number trend
AnimateView: Clip path
AnimateView: Reorder items
AnimateView: Toggle
AnimateView: Transition types
Scroll Direction: Hide Header
Scroll Horizontal Gallery
Scroll Image Reveal
Scroll Text Lines
Scroll Zoom Hero
Scramble text
Scramble text: Hover
Scramble text: Stagger from center
Scroll velocity: 3D planes
iOS App Folder
To-do list
Bezier curve editor
Color picker
Carousel
Carousel: Autoplay
Carousel: Coverflow
Carousel: Free scroll
Carousel: iOS exposure slider
Carousel: Offset-linked animations
Carousel: Lightbox
Carousel: Loop
Carousel: Pagination
Carousel: Pagination with page count
Carousel: Scaling pagination dots
Carousel: Parallax
Carousel: Progress scrubber
Carousel: RTL
Carousel: Thumbnail gallery
Carousel: Vertical
Ticker: RTL
AnimatePresence modes
Cursor: Floating target
Card stack
Material Design: Ripple
Magnetic filings
Cursor trail
Cursor trail velocity
Base UI: Checkbox
Base UI: Context menu
Base UI: Dialog
Base UI: Dropdown menu
Base UI: Progress
Base UI: Select
Base UI: Switch
Base UI: Tabs
Base UI: Toast
Base UI: Toggle group
Base UI: Tooltip
Infinite loading
Typewriter: Exploding Countdown
Typewriter: Natural Typing
Scroll highlight
Ticker: Overflow
Ticker
Ticker: Draggable
Ticker: Scroll
Ticker: useTickerItem
Ticker: Vertical scrolling
Ticker: Cursor
Ticker: Text hover effect
Cursor: Magnetic target
iOS pointer animation
Apple Intelligence ripple
Warp overlay
Family-style dialog
Cursor: Image hover
Split text
Scatter text
Wavy text
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
Physical stagger
Tilt card
Color interpolation
Image reveal slider
Line graph
Drag: Lock direction
Modal: Shared layout
Apple Watch Home Screen
Aspect ratio
Bounce easing
Conic gradient pointer
AnimateActivity: Slideshow
usePresenceData
Reveal text effect
Base UI: Accordion
Radix: Accordion
Radix: Checkbox
Radix: Context Menu
Radix: Dialog
Radix: Dropdown Menu
Base UI: Radio
Radix: Progress
Radix: Radio Group
Radix: Select
Radix: Switch
Radix: Tabs
Radix: Toast
Radix: Toggle Group
Number formatting
Price switcher
Radix: Toolbar
Radix: Tooltip
Swipe actions
Number counter
Engagement stats
Radix: Slider with AnimateNumber
Accordion
iOS slider
Smooth Tabs
Modal dialog
Typewriter
Typewriter: Change Content
Tab select
AnimateView: App Store
iOS App Store
Follow pointer with spring
HTML content
Keyframe wildcards
Drag with spring follow
Toast: Notifications list
Parallax
Reorder animation
Element scroll-linked animation
Track element within viewport
Animate state
Spinning 3D cube
useTime
CSS spring
iOS Notifications stack
Cursor: Custom content
Cursor: Follow
Cursor: Multi-follow
Exit animation
Cursor: Adaptive caret size
Drag
Drag: Constraints
Enter animation
Gestures
Keyframes
Layout animation
Motion along a path
Path drawing
Path morphing
Scroll-linked animations
Scroll-linked spring animation
Scroll-triggered animations
Shared layout animation
Transition options
Value transform & path drawing
Variants
Rotate
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.