Velora UI

100 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.

New in v0.7.0 18 components

Read the changelog

Backgrounds16 components

Spring release

Northern lights for your hero

A slow, drifting gradient that sits behind any headline.

Velora's signature drifting aurora gradient backdrop.

Now in public beta

Deploy on every push

Preview links for each branch, ready before the review starts.

Light beams flowing along curved paths behind content.

Hover the grid

An isometric grid whose cells light up in brand tints under the pointer.

Realtime sync

Every edit, everywhere, instantly

Canvas dot grid where drifting glows brighten dots and tint them toward the brand.

Flickering Grid

Grid of squares fading in and out on staggered timers.

Grid pattern · Dot pattern

Texture that stays out of the way

SVG grid and dot backdrops with maskable depth.

Lit from above

A glowing lamp line that opens as the section scrolls in.

A glowing lamp-line header that expands into view.

Light Rays

God rays fanning down from the top of a section.

Meteors

Falling meteor streaks for dark hero and CTA sections.

Quiet software for loud ideas

A calm workspace for teams that ship.

Drifting brand-gradient blobs under a static film-grain overlay; wraps its content.

Particles

Drifting, twinkling particle field on a lightweight canvas.

Launch week · Day 3

Back to the grid

Perspective grid scrolling forever toward the horizon.

Looking for devices…

Keep your phone nearby

Concentric rings pulsing outward — calm 'listening' backdrop.

Make a wish

A twinkling star field with brand-tinted streaks shooting across at random.

Into the vortex

Brand-tinted particles spiralling into the centre, leaving soft fading trails.

Make some waves

Blurred, translucent ribbons of brand colour flowing sideways on a canvas.

Text12 components

Ship beautiful pages

Brand gradient sweeping continuously through text.

Make it modern, animated, accessible

Cycles words with a springy blur-flip transition.

VELORA UI

Scrambles through letters and resolves into the real text.

Animate, Measure, Ship

Blurs one phrase out as the next resolves in.

12,480+

Springs a number up when it enters the viewport.

Magic moments

Twinkling stars orbiting your headline.

Every component ships its own receipts.

Marker-pen sweep that draws in when the phrase scrolls into view.

VELORAVELORAVELORAVELORA

Giant outlined word that draws in, then glows in brand colours under the pointer.

Every word arrives exactly when it should

Word-by-word blur reveal on scroll.

Generating your page…

A soft light sweep — great for AI loading states.

Build it faster., smoother., free.

Types, holds and deletes through a list of words.

Build faster, lighter, calmer

Swaps a single word on a quiet vertical roll.

Buttons8 components

Dependency-free confetti burst, fired from anywhere.

Leans toward the cursor and springs back on leave.

A light laps the button's border via offset-path.

CTA cycling the brand ramp, with a matching glow beneath.

Expands a ripple from the exact point you pressed.

CTA button with a continuous light sweep.

Button that morphs through loading, success and error states while a Promise settles.

Wipes the theme in from the button

Wipes the new theme in as a circle using View Transitions.

Cards & Layout21 components

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.

“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.

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.

Bento 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.

Live workshop

Motion for product teams

Springs, layout animation and reduced motion in two hours.

Thu, 14:00 UTC12 seats left

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.

Colored card that drifts toward the pointer, with parallax content and grain.

Forms3 components

Upload zone that lifts and glows while a file is over it.

  1. Step 1: Account, complete
  2. Step 2: Plan
  3. Step 3: Done

Progress indicator for multi-step forms and checkouts.

Search field whose placeholder cycles while empty.

Overlays1 component

Native dialog whose panel springs in with a tilt over a blurred backdrop.

Loaders2 components

LoadingLoading
Dots
LoadingLoading
Pulse
LoadingLoading
Orbit
LoadingLoading
Bars
LoadingLoading
Spinner

Five tiny CSS loading indicators — dots, pulse, orbit, bars and spinner.

  1. Creating your workspace
  2. Inviting your team
  3. Importing projects
  4. Setting up permissions
  5. Applying your theme
  6. Almost there

Full-screen overlay that ticks through a list of steps, keeping the active one centred.

Social Proof3 components

DW

“Swapped three separate animation libraries for Velora and the bundle got smaller.”

Dana Whitfield — Staff engineer, Corvine

Crossfades portraits behind a rotating quote.

Astro
Next.js
Remix
Vite
Nuxt
SvelteKit

Customer logos muted until hovered, so they read as texture.

Dana Whitfield

@danawhit

Velora publishes the gzipped size of every component. Nobody else does this.

Static social-proof card — props, not an API call.

Scroll9 components

Your screenshot

Screenshot panel that rotates flat as it scrolls into view.

Product studio

We design and ship software people love

Fifteen launches this year, from analytics suites to brand systems. Scroll to browse the work.

Hero copy over three card rows that slide apart as a tilted block flattens.

Open it up. Everything is already set.

A CSS-drawn laptop pins in place and opens its lid as the screenshot scales up.

Gallery columns drifting at different rates for depth.

Scroll this box

Paragraph 1. The bar above fills as you read, easing on a spring so it never jitters.

Paragraph 2. The bar above fills as you read, easing on a spring so it never jitters.

Paragraph 3. The bar above fills as you read, easing on a spring so it never jitters.

Paragraph 4. The bar above fills as you read, easing on a spring so it never jitters.

Paragraph 5. The bar above fills as you read, easing on a spring so it never jitters.

Paragraph 6. The bar above fills as you read, easing on a spring so it never jitters.

Paragraph 7. The bar above fills as you read, easing on a spring so it never jitters.

Paragraph 8. The bar above fills as you read, easing on a spring so it never jitters.

Paragraph 9. The bar above fills as you read, easing on a spring so it never jitters.

Paragraph 10. The bar above fills as you read, easing on a spring so it never jitters.

Paragraph 11. The bar above fills as you read, easing on a spring so it never jitters.

Paragraph 12. The bar above fills as you read, easing on a spring so it never jitters.

Gradient page-progress bar pinned to the top.

Velora UI · Animations with receipts ·

Marquee whose speed and direction follow your scrolling.

Install

Add a component with one CLI command. The source lands in your repo.

Customize

Every class is yours to edit. Tokens come from your theme.

Ship

No runtime to configure. It is just a React component.

Copy scrolls past a pinned panel that swaps per section.

  1. 2023

    Two engineers, one spare room and a shared belief that UI libraries should ship as source you own.

    First commit
    Kitchen-table office
  2. 2024

    The first public release. A thousand teams installed a component in the first month, and the issue tracker never slept again.

    v1.0 launch
    1,000 teams
  3. 2025

    Theming, reduced-motion support and an accessibility audit of every component. Contributors from 40 countries.

    Theme builder
    Community call
  4. Today

    Still small, still shipping. The next chapter is being written in the open.

Vertical timeline with sticky labels and a gradient beam that fills as you scroll.

The beam draws as you read.

Gradient line that draws itself down long-form content.

Effects4 components

Draws an animated connection between any two elements.

0s
0.15s
0.3s

The workhorse entrance — blur, fade and drift into view.

<BorderBeam />

A beam of light traveling around any border.

Follows your pointer

Bring the cursor near any edge and the border lights up where you are.

Learn more

Border glow that follows the pointer around a card's edge as it comes near.

3D2 components

Depth on demand
Every layer floats at its own height as the card turns toward you.
+130px
Hover or tab in

Perspective card that turns toward the pointer while its layers lift to different depths.

Card that tilts back as a glowing pin rises with a label chip and rippling rings.

Carousels3 components

A tilted 3D grid of images whose columns scroll up and down in an endless loop.

Snap-scrolling row of tall image cards that morph into a full modal story.

Mountain peaks rising above a sea of clouds

Full-bleed image slider with crossfade-zoom, autoplay, dots, arrows and swipe.

Cursor & Pointer4 components

Q3 launch board

Move your mouse around the canvas to see a teammate's cursor.

Swaps the cursor for an arrow and a name tag that trail the pointer inside a region.

Close-up of a circuit board covered in chips and components

Circular magnifier that follows the pointer or arrow keys to zoom into an image.

Every component ships with reduced motion built in.

Draws an outline around a phrase on scroll, then glides a pointer icon to its corner.

Move your mouse around this box

The ring trails behind the dot and grows over links and buttons.

Dot-and-ring custom cursor; the ring trails on a spring and grows over links and buttons.

Data & Maps2 components

Dotted canvas globe with markers, great-circle arcs, drag and keyboard rotation.

Dotted SVG world map with markers, pulsing hubs and animated connection arcs.

Mockups4 components

velora.dev

Your product here

Browser window frame for product screenshots.

counter.tsxtsx
import { useState } from "react"; // A counter that remembers its last valueexport function Counter({ start = 0 }: { start?: number }) {  const [count, setCount] = useState(start);  const label = `Clicked ${count} times`;   return (    <button type="button" onClick={() => setCount(count + 1)}>      {label}    </button>  );}

Code panel with tabs, line numbers, highlighted lines and a copy button.

Your app here

iPhone frame with dynamic island — pure CSS.

bash

$ npx shadcn@latest add velora/marquee

✔ Checking registry…

✔ Installing dependencies…

✔ Created components/velora/marquee.tsx

A terminal window that types its lines in view.