Floating Action ButtonExamples
Production-ready Motion snippets for React, JavaScript, and Vue. Copy them into your site or adapt them with AI.
Spotlight
All examples
Footer reveal
Rolling text button
Rolling text button: Staggered
Scroll word reveal
Curtains: Blinds
Curtains: Clip wipe
Curtains: Doors
Curtains: Fade
Curtains: Iris
Curtains: Iris from click
Curtains: Mixed effects
Curtains: Pixels
Curtains: Scope
Curtains: Shutter
Curtains: Stagger wipe
Curtains: Wipe
Add to basket
Pointer collision detection
Bobble hover
Clerk: Card Stack
Clerk: Conditional Field
Clerk: Sign-in-or-up
Clerk: User Button
Layout Anchor
Pokopia: Modal
Command Palette
OSS Hero
Skeleton Shimmer
Copy Button
Create Button
Dots Morph Button
Toast: Stacked notifications- Floating Action Button
Radial Menu
Confetti
Sheet Modal
Context Menu
Mega Menu
Number trend
AnimateView: Clip path
AnimateView: Reorder items
AnimateView: Toggle
AnimateView: Transition types
Scroll Direction: Hide Header
Scroll Horizontal Gallery
Scroll Image Reveal
Scroll Text Lines
Scroll Zoom Hero
Scramble text
Scramble text: Hover
Scramble text: Stagger from center
Scroll velocity: 3D planes
iOS App Folder
To-do list
Bezier curve editor
Color picker
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: Progress scrubber
Carousel: RTL
Carousel: Thumbnail gallery
Carousel: Vertical
Ticker: RTL
AnimatePresence modes
Cursor: Floating target
Card stack
Material Design: Ripple
Magnetic filings
Cursor trail
Cursor trail velocity
Base UI: Checkbox
Base UI: Context menu
Base UI: Dialog
Base UI: Dropdown menu
Base UI: Progress
Base UI: Select
Base UI: Switch
Base UI: Tabs
Base UI: Toast
Base UI: Toggle group
Base UI: Tooltip
Infinite loading
Typewriter: Exploding Countdown
Typewriter: Natural Typing
Scroll highlight
Ticker: Overflow
Ticker
Ticker: Draggable
Ticker: Scroll
Ticker: UseTickerItem
Ticker: Vertical scrolling
Ticker: Cursor
Ticker: Text hover effect
Cursor: Magnetic target
iOS pointer animation
Apple Intelligence ripple
Warp overlay
Family-style dialog
Cursor: Image hover
Split text
Scatter text
Wavy text
Hold to confirm
Characters remaining
Multi state badge
Loading: Circle spinner
Fill text
Loading: Jumping dots
Loading overlay
Loading progress bar
Loading ripple
Loading: Pulse dots
Physical stagger
Tilt card
Color interpolation
Image reveal slider
Line graph
Drag: Lock direction
Modal: Shared layout
Apple Watch Home Screen
Aspect ratio
Bounce easing
Conic gradient pointer
AnimateActivity: Slideshow
usePresenceData
Reveal text effect
Base UI: Accordion
Radix: Accordion
Radix: Checkbox
Radix: Context Menu
Radix: Dialog
Radix: Dropdown Menu
Base UI: Radio
Radix: Progress
Radix: Radio Group
Radix: Select
Radix: Switch
Radix: Tabs
Radix: Toast
Radix: Toggle Group
Number formatting
Price switcher
Radix: Toolbar
Radix: Tooltip
Swipe actions
Number counter
Engagement stats
Radix: Slider with AnimateNumber
Accordion
iOS slider
Smooth Tabs
Modal dialog
Typewriter
Typewriter: Change Content
Tab select
AnimateView: App Store
iOS App Store
Follow pointer with spring
HTML content
Keyframe wildcards
Drag with spring follow
Toast: Notifications list
Parallax
Reorder animation
Element scroll-linked animation
Track element within viewport
Animate state
Spinning 3D cube
useTime
CSS spring
iOS Notifications stack
Cursor: Custom content
Cursor: Follow
Cursor: Multi-follow
Exit animation
Cursor: Adaptive caret size
Drag
Drag: Constraints
Enter animation
Gestures
Keyframes
Layout animation
Motion along a path
Path drawing
Path morphing
Scroll-linked animations
Scroll-linked spring animation
Scroll-triggered animations
Shared layout animation
Transition options
Value transform & path drawing
Variants
Rotate