Material Design: RippleExamples
Production-ready Motion snippets for React, JavaScript, and Vue. Copy them into your site or adapt them with AI.
Examples with tutorials
- Material Design: Ripple
Scroll highlight
Loading: Infinite path drawing
Family-style dialog
Hold to confirm
Multi state badge
Notifications stack
Characters remaining
Loading: Circle spinner
Fill text
Loading: Jumping dots
Loading overlay
Loading progress bar
Loading ripple
Loading: Pulse dots
Physical stagger
iOS App Store
iOS App Store: Layout animation
Conic gradient pointer
Image reveal slider
iOS slider
Notifications list
Tilt card
Typewriter
Split Text
Split Text: Scatter
Split Text: Wavy
Color interpolation
Gestures
Accordion
Bounce easing
Modal dialog
Reveal text effect
Spring: Follow Cursor
Press
Hover
Lightbox
Page wipe
Shared view animation
View animation
HTML content
Basic animation
Parallax
Rotate
Scroll fade in/out
Scroll pinning
Scroll-triggered animation
Spring
Stagger
SVG loading spinner
SVG path morphing
Three.js
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+