32 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.
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.
Buttons
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.
Effects
<BorderBeam />
Border Beam
A beam of light traveling around any border.
Animated Beam
Draws an animated connection between any two elements.
Blur Fade
The workhorse entrance — blur, fade and drift into view.
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.