ConfettiExamples
Production-ready Motion snippets for React, JavaScript, and Vue. Copy them into your site or adapt them with AI.
Results
- Confetti
OSS Hero
Radial Menu
Scramble text
Scramble text: Hover
Scramble text: Stagger from center
Scroll Direction: Hide Header
Scatter text
Toast: Stacked notifications
Footer reveal
Rolling text button
Rolling text button: Staggered
Scroll word reveal
Curtains: Mixed effects
Curtains: Showcase
Add to basket
Add to basket
Clerk: Card Stack
OSS Hero
Toast: Stacked notifications
Radial Menu
Confetti
Scramble text
Scramble text: Hover
Scramble text: Stagger from center
Scroll Direction: Hide Header
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
AnimatePresence modes
AnimatePresence modes
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
Split text
Wavy text
Characters remaining
iOS Notifications stack
Split text
Scatter text
Wavy text
Notifications stack
Characters remaining
Characters remaining
Loading: Circle spinner
Loading: Jumping dots
Loading ripple
Loading: Pulse dots
Radix: Context Menu
Radix: Toast
Radix: Tooltip
Physical stagger
Typewriter
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
Physical stagger
Scroll-triggered animations
Animate state
Tilt card
Typewriter
Split Text
Split Text: Scatter
Split Text: Wavy
Gestures
Bounce easing
Modal dialog
Reveal text effect
HTML content
CSS Spring
Enter Animation
Exit animation
Gestures
Keyframe wildcards
Radix: Dialog
Rotate
AnimateActivity: Slideshow
Press
Radix: Context Menu
Radix: Dialog
Radix: Tooltip
Engagement stats
Hover
Modal dialog
Typewriter
Typewriter: Change Content
HTML content
Keyframe wildcards
Animate state
CSS spring
Transition
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
Scroll-triggered animations
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+