64 animated components
Every component is free, MIT licensed, reduced-motion safe and installable with one CLI command. Click any card for code, props and install instructions.
Backgrounds
Aurora
Aurora Background
Velora's signature drifting aurora gradient backdrop.
Patterns
Grid & Dot Pattern
SVG grid and dot backdrops with maskable depth.
Retro Grid
Retro Grid
Perspective grid scrolling forever toward the horizon.
Particles
Particles
Drifting, twinkling particle field on a lightweight canvas.
Meteors
Meteors
Falling meteor streaks for dark hero and CTA sections.
Beams
Background Beams
Light beams flowing along curved paths behind content.
Lit from above
Lamp
A glowing lamp-line header that expands into view.
Flickering Grid
Flickering Grid
Grid of squares fading in and out on staggered timers.
Ripple
Ripple
Concentric rings pulsing outward — calm 'listening' backdrop.
Light Rays
Light Rays
God rays fanning down from the top of a section.
Text
Ship beautiful pages
Animated Gradient Text
Brand gradient sweeping continuously through text.
Text Reveal
Word-by-word blur reveal on scroll.
Build it faster.
Typewriter
Types, holds and deletes through a list of words.
Make it modern
Flip Words
Cycles words with a springy blur-flip transition.
Sparkles Text
Twinkling stars orbiting your headline.
Text Shimmer
A soft light sweep — great for AI loading states.
0+
Number Ticker
Springs a number up when it enters the viewport.
Build faster
Word Rotate
Swaps a single word on a quiet vertical roll.
Hyper Text
Scrambles through letters and resolves into the real text.
Every component ships its own receipts.
Text Highlighter
Marker-pen sweep that draws in when the phrase scrolls into view.
Morphing Text
Blurs one phrase out as the next resolves in.
Buttons
Shimmer Button
CTA button with a continuous light sweep.
Confetti
Dependency-free confetti burst, fired from anywhere.
Rainbow Button
CTA cycling the brand ramp, with a matching glow beneath.
Ripple Button
Expands a ripple from the exact point you pressed.
Magnetic Button
Leans toward the cursor and springs back on leave.
Moving Border
A light laps the button's border via offset-path.
Wipes the theme in from the button
Theme Toggler
Wipes the new theme in as a circle using View Transitions.
Cards & Layout
Patterns
Maskable backdrops.
Meteors
Streaks of light.
Bento Grid
Feature bento with hover-reveal CTAs and rich backgrounds.
Move your cursor here
The glow follows the pointer across the card surface.
Spotlight Card
A radial glow that follows the cursor across the card.
Tilt me
3D perspective that tracks your cursor.
Tilt Card
3D perspective tilt that tracks the cursor.
Marquee
Seamless scrolling loop — horizontal, vertical, hover-pause.
Animated List
Looping feed that springs each item in, newest on top.
Orbiting Circles
Items evenly distributed on rotating orbital rings.
Avatar Circles
Stacked initials avatars with a +N badge — zero images.
Animated Tooltip
Avatar row with springy name tooltips on hover.
Dock
macOS-style dock with cursor magnification.
“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
Card Stack
Deck that shuffles the top card to the back on a timer.
Glare Card
Move the cursor across this card.
Glare Card
Sheet of light tracking the cursor, like a foil trading card.
Expandable Card
Expands into a centred panel with shared-layout transitions.
Direction Aware Hover
Overlay enters from the edge the cursor actually crossed.
Compare Slider
Before/after wipe with a keyboard-accessible divider.
- marquee.tsx
- dock.tsx
- button.tsx
File Tree
Collapsible tree for documenting project structure.
Navigation
Forms
Social Proof
“Swapped three separate animation libraries for Velora and the bundle got smaller.”
Animated Testimonials
Crossfades portraits behind a rotating quote.
@danawhit
Velora publishes the gzipped size of every component. Nobody else does this.
Tweet Card
Static social-proof card — props, not an API call.
Logo Cloud
Customer logos muted until hovered, so they read as texture.
Scroll
A live one is running at the top of this page — scroll to see it fill.
Scroll Progress
Gradient page-progress bar pinned to the top.
Copy scrolls; the panel stays pinned and swaps per section.
Sticky Scroll
Copy scrolls past a pinned panel that swaps per section.
Container Scroll
Screenshot panel that rotates flat as it scrolls into view.
The beam draws as you read.
Tracing Beam
Gradient line that draws itself down long-form content.
Scroll Velocity
Marquee whose speed and direction follow your scrolling.
Parallax Grid
Gallery columns drifting at different rates for depth.