Live workshop
Motion for product teams
Springs, layout animation and reduced motion in two hours.
Thu, 14:00 UTC12 seats left
Animated React card and layout components
Bento grids, spotlight, tilt, glare and wobble cards, marquees, docks, focus and hover grids, expandable and draggable cards. Pointer effects are decorative; content and links stay accessible.
21 components · free and MIT licensed · install any of them with the shadcn CLI
Deploy succeeded
Looping feed that springs each item in, newest on top.
Maya Chen, Design engineer
Tom Okafor, Frontend lead
Sofia Lindqvist, Indie hacker
Dan Romero, CTO
Avatar row with springy name tooltips on hover.
Maya ChenTom OkaforSofia LindqvistDan Romeroand 2,400 more
Stacked initials avatars with a +N badge — zero images.
Patterns
Maskable backdrops.
Meteors
Streaks of light.
Feature bento with hover-reveal CTAs and rich backgrounds.
- QuickstartInstall the CLI and add your first component in under a minute.
- ThemingRe-skin every component by changing seven CSS variables.
- AccessibilityKeyboard support, reduced motion and screen reader notes for each part.
- RegistryPull components straight into your codebase with the shadcn CLI.
- ExamplesCopy-paste sections built from the library, ready to adapt.
- ChangelogEvery release, what changed, and how to upgrade safely.
Link-card grid with a highlight that glides to whichever card you hover or focus.
“Swapped three separate animation libraries for Velora and the bundle got smaller.”
Dana Whitfield
“The size on every docs page is the reason we shipped it without a review meeting.”
Marco Elias
“Reduced-motion worked out of the box. That never happens.”
Priya Raman
Deck that shuffles the top card to the back on a timer.
After
Before
Before/after wipe with a keyboard-accessible divider.
Hover me
Enters from your edge
Overlay enters from the edge the cursor actually crossed.
macOS-style dock with cursor magnification.
Arrow keys move the card; Enter or Space brings it to the front.
Moraine Lake
Above the clouds
Northern lights
Red rock road
Forest light
Scattered photo cards you can fling around with inertia, tilt and bounds.
Velora
Card that reveals shuffling brand-tinted characters through a mask following the pointer.
Expands into a centred panel with shared-layout transitions.
- marquee.tsx
- dock.tsx
- button.tsx
Collapsible tree for documenting project structure.
Forest light Canopy walk Moraine Lake Highland morning Night summit Valley of mist
Image grid where the hovered card stays sharp while the others blur and step back.
Velora Pass
•••• •••• 4821
Member
Priya Raman
Valid thru
09/28
Sheet of light tracking the cursor, like a foil trading card.
Layout Grid
NewBento grid of image tiles that expand in place to reveal rich content.
AstroNext.jsRemixViteNuxtSvelteKit
Seamless scrolling loop — horizontal, vertical, hover-pause.
Items evenly distributed on rotating orbital rings.
Move your cursor here
The glow follows the pointer across the card surface.
A radial glow that follows the cursor across the card.
3D perspective tilt that tracks the cursor.
Launch week
Ship previews for every pull request
Each branch gets its own URL, so reviewers click instead of cloning.
Wobble Card
NewColored card that drifts toward the pointer, with parallax content and grain.