Vertical Carousel
This pattern works well for destination, product or portfolio showcases where immersive visuals and smooth animations are key.
Try it outCarousels
Basic buttons
Essentials: hover, press, elevate, underline
Hover lift + soft shadow
Default card elevation pattern.
Animated underline link
A subtle underline grows on hover.
Learn morePress feedback
Tap/press shrink for tactile feel.
Staggered menu reveal
- Dashboard
- Projects
- Invoices
- Settings
Scroll reveal
Card 1
Reveals as it enters viewport.
Card 2
Reveals as it enters viewport.
Card 3
Reveals as it enters viewport.
Card 4
Reveals as it enters viewport.
Card 5
Reveals as it enters viewport.
Card 6
Reveals as it enters viewport.
Modal (backdrop fade + content scale)
Accordion (height auto + rotate icon)
A production-ready motion library for React with spring physics and a simple API.
Drag interactions (bounded + momentum)
Drag within container; elastic edges, springy hover.
SVG path draw (logos, icons, charts)
Path reveals over time—great for signature effects.
Skeleton loader (shimmer)
Use while content loads; keep durations subtle.
Page transition pattern (AnimatePresence)
Home
Enter/down, exit/up