Backgrounds that move.

100 backgrounds for heroes, sections and cards: gradients that drift, stars and particles, grids lit by the pointer, weather, waves and generative patterns. Each is a container: put your content inside and the effect sits behind it.

Wrap your content: `<Aurora className="min-h-[480px]"><h1>Ship faster</h1></Aurora>`. The root is `relative isolate overflow-hidden`, the effect is an absolutely positioned layer behind your children, and your `className` is merged onto the root.

No. Most are CSS and SVG the server renders, with keyframes the install adds to your stylesheet, so they ship no JavaScript. Pointer effects write two CSS variables per move, and the simulations draw on a small canvas.

Signed in, copy the background's command from its page: `npx shadcn@latest add` with the item's URL. It adds the file to your components folder and the keyframes it needs to your stylesheet.

With the CLI, no: it merges the keyframes into your CSS. Installing by hand, the Manual tab on the page has a globals.css step; paste it in or the background stays still. That CSS is code, behind the same gate as the component.

React, Vue, Svelte and Solid. There are no per-library pages: a background uses no UI primitives, so its one React version is the same file under Base UI, Radix UI, React Aria and Ark UI. Vue, Svelte and Solid use Ark UI.

Yes. They are TypeScript with Tailwind CSS v4 classes and plain markup. Variety comes from an index, not Math.random, so the server and the client render the same thing.

CSS and SVG backgrounds animate transform, opacity and masks, which the browser composites without script, so they are the cheap tier. 14 of the 100 (particles, a flock, the Game of Life, a tesseract) draw on a 2D canvas instead.

The canvas ones run their loop only while on screen (an IntersectionObserver stops it), cap the device pixel ratio at 2, and a hidden tab pauses. Their budget is a couple of milliseconds of script per frame at 1280 by 720.

Prefer a CSS or SVG one: it has no loop at all. Use a canvas background for things CSS cannot draw cheaply, such as a real simulation. The gallery marks each, and the page says which kind it is.

The effect layer sets `content-visibility: auto` where it is safe, so the browser skips painting it off screen. Neither that nor a size container is ever on the root, which would collapse a root sized by its children.

Give the root the section's size and put the section's content inside it: `<GridPattern className="py-24">…</GridPattern>`. The effect is clipped to the section by `overflow-hidden`.

Pass `className="fixed inset-0 -z-10"` and no children. Without `-z-10` the root paints over your in-flow text and takes its clicks. Fixed is never the default.

Yes: the layer is `aria-hidden` and `pointer-events-none`, so it never takes a click. A pointer effect listens on the root, not on the page, so your links and buttons keep working.

Yes: a card is just a smaller container with a border and radius, since the root is relative, isolated and clips its effect. Several on one page add up, which is why this gallery shows posters that play on hover.

Each page says what to keep in mind for text on top, such as the foreground color. A moving or bright background can pass WCAG contrast at one frame and fail at another, so check the brightest and darkest points, or add a scrim behind the text.

Each background stops on a still frame under `prefers-reduced-motion`, and the canvas ones draw a single frame. Flashing effects stay under three flashes a second.

They are decorative, so screen readers skip them. Your content inside is read as normal.

Canvas ones read their colors from CSS variables and repaint on a theme change. The CSS ones use your theme's tokens or the color props on their page, so check a custom color in both themes.

10 of the 100 backgrounds are free: they take a free account (Google or GitHub sign-in) to see the code and install them, and carry no mark in the gallery. The other 90, marked Pro, take a Pro plan. Every demo is free to try here, for anyone, with no account.

Seeing, copying or installing a Pro background's code takes a Pro plan; the page and its demo stay free to view. Individual is personal, non-commercial use only. Client work or anything your users pay for takes a Team (up to 5 seats in one company) or Organization license, each monthly, yearly or a one-time Lifetime.

Not on its own. Redistributing the Pro code, or building UI libraries, themes, templates, starter kits or Figma kits from it, is never allowed. Free backgrounds need only a free account. The full terms are on the license page.

You keep using what you installed in existing projects, but get no new downloads or updates, and the MCP answers 403. The code you copied is yours to edit and keep.

With Pro, yes: the MCP server exposes 22 tools, and its catalog serves the animated backgrounds. Describe what you want (a slow aurora behind a hero, a grid that lights up under the cursor) and your agent searches, picks one and installs it on your stack. Your personal MCP URL is at /dashboard/mcp.

No. The MCP is one-way: the agent asks for items and the server answers; your files never leave your machine. It needs a Pro plan, and answers 403 after a subscription ends.