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: Pixels
Curtains: Scope
Curtains: Shutter
Curtains: Stagger wipe
Curtains: Wipe
Pointer collision detection
Bobble hover
Pokopia: Modal
Command Palette
Copy Button
Floating Action Button
Sheet Modal
Context Menu
Mega Menu
Number trend
Carousel: iOS exposure slider
Scroll Image Reveal
Scroll Text Lines
Scroll Zoom Hero
Scroll velocity: 3D planes
Bezier curve editor
Carousel
Carousel: Autoplay
Carousel: Coverflow
Carousel: Free scroll
Carousel: Offset-linked animations
Carousel: Pagination
Carousel: Scaling pagination dots
Carousel: Parallax
Carousel: Progress scrubber
Ticker: RTL
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: RTL
Carousel: Thumbnail gallery
Carousel: Vertical
Ticker: RTL
Cursor: Floating target
Cursor: Floating target
Card stack
Card stack
Material Design: Ripple
Material Design: Ripple
Magnetic filings
Magnetic filings
Base UI: Select
Ticker: Overflow
Ticker: Overflow
Ticker
Ticker: Cursor
Ticker: Draggable
Ticker: Scroll
Ticker: Text hover effect
Ticker: useTickerItem
Ticker: Vertical scrolling
Ticker
Ticker: Draggable
Ticker: Scroll
Ticker: useTickerItem
Ticker: Vertical scrolling
Ticker: Cursor
Ticker: Text hover effect
Cursor: Magnetic target
iOS pointer animation
Cursor: Magnetic target
iOS pointer animation
Warp overlay
Warp overlay
Cursor: Image hover
Cursor: Image hover
Swipe actions
Smooth tabs
Fill text
Loading overlay
Loading progress bar
Radix: Slider with AnimateNumber
Radix: Dropdown Menu
Radix: Radio Group
Radix: Select
Apple Watch Home Screen
Image reveal slider
iOS slider
Cursor: Adaptive caret size
Cursor: Custom content
Cursor: Follow
Cursor: Multi-follow
Drag with spring follow
Notifications list
Tilt card
Fill text
Loading overlay
Loading progress bar
Image reveal slider
iOS slider
Notifications list
Tilt card
Price switcher
Number counter
Engagement stats
Image reveal slider
Apple Watch Home Screen
Spring: Follow Cursor
Radix: Dropdown Menu
Base UI: Radio
Radix: Select
Radix: Toast
Number formatting
Price switcher
Swipe actions
Number counter
Radix: Slider with AnimateNumber
iOS slider
Smooth Tabs
Toast: Notifications list
Parallax
iOS Notifications stack
Cursor: Custom content
Cursor: Follow
Cursor: Multi-follow
Cursor: Adaptive caret size
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.