Fractal topographyExamples
Production-ready Motion snippets for React, JavaScript, and Vue. Copy them into your site or adapt them with AI.
Results
- Fractal topography
Three.js TSL particle morph
Three.js materials
Three.js motion values
Three.js OrbitControls
Three.js scroll-driven logo
Three.js sequences and stagger
Three.js shader lens
vgpu cameras, lights and controls
vgpu colours
vgpu effect bindings
vgpu motion values
vgpu orbit
vgpu scene nodes
vgpu sequences and stagger
vgpu shared uniforms
vgpu vectors
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+