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
Carousel: iOS exposure slider
iOS App Folder
To-do list
Carousel: Vertical
Carousel
Carousel: Autoplay
Carousel: Coverflow
Carousel: Free scroll
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: Vertical
Carousel: Thumbnail gallery
Color picker
Ticker: RTL
AnimatePresence modes
Cursor: Floating target
Card stack
Material Design: Ripple
Magnetic filings
Cursor trail
Cursor trail velocity
Infinite loading
Modal dialog
Typewriter: Change Content
Typewriter: Exploding Countdown
Typewriter: Natural Typing
Scroll highlight
Ticker: Overflow
Ticker
Ticker: Cursor
Ticker: Draggable
Ticker: Scroll
Ticker: Text hover effect
Ticker: useTickerItem
Ticker: Vertical scrolling
Cursor: Magnetic target
iOS pointer animation
Split text
Wavy text
Characters remaining
Apple Intelligence ripple
Warp overlay
Family-style dialog
Cursor: Image hover
Swipe actions
Smooth tabs
Hold to confirm
Multi state badge
iOS Notifications stack
Scale correction
Loading: Circle spinner
Fill text
Loading: Jumping dots
Loading overlay
Loading progress bar
Loading ripple
Loading: Pulse dots
Radix: Slider with AnimateNumber
Radix: Accordion
Radix: Checkbox
Radix: Context Menu
Radix: Dropdown Menu
Radix: Progress
Radix: Radio Group
Radix: Select
Radix: Switch
Radix: Toast
Radix: Toggle Group
Radix: Toolbar
Radix: Tooltip
iOS App Store
Apple Watch Home Screen
Modal: Shared layout
Physical stagger
Tab select
Image reveal slider
iOS slider
Accordion
Conic gradient pointer
Cursor: Adaptive caret size
Cursor: Custom content
Cursor: Follow
Cursor: Multi-follow
Line graph
Drag with spring follow
Notifications list
Reveal text effect
Tilt card
Typewriter
Variants
Parallax
Path drawing
Path morphing
Reorder animation
Element scroll-linked animation
Scroll-linked animations
Scroll-linked spring animation
Track element within viewport
Scroll-triggered animations
Shared layout animation
Animate state
useTime
Value transform & path drawing
Price switcher
Number formatting
Number counter
Engagement stats
Aspect Ratio
Bounce Easing
Drag Lock Direction
HTML content
Radix: Tabs
CSS Spring
Drag
Drag: Constraints
Enter Animation
Exit animation
Follow pointer with spring
Gestures
Keyframes
Keyframe wildcards
Layout animation
Motion along a path
Radix: Dialog
Rotate
useAnimationFrame
Transition
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.