Quick start

Five minutes from nothing to a moving hero on your own site.

Before you start

You need a Next.js project (App Router) with Tailwind CSS v4 and the shadcn CLI set up. If you have no components.json, run npx shadcn@latest init first. Everything else is handled by the install command.

1. Pick a piece

Open Backgrounds for a live scene behind your hero, 3D for a centrepiece, Glass for frosted interface pieces, or Components and Blocks for everything else. Hover a card to see it live; on a phone it plays while it is on screen.

2. Make it yours

Every item has controls on its page: look, colours, speed. Backgrounds have a colour picker on the card that re-tints the whole scene. When it looks right, the code, the install line and the prompt below it already match what you chose.

3. Install and place it

npx shadcn@latest add @vibebox/aurora

import { Aurora } from "@/components/vibebox/aurora";

export function Hero() {
  return (
    <Aurora preset="violet" className="min-h-[70svh]">
      <div className="mx-auto max-w-3xl px-6 pt-32 text-white">
        <h1 className="text-5xl font-semibold tracking-tight">Your headline.</h1>
      </div>
    </Aurora>
  );
}

4. Check it on a phone

Open the page at 390 px wide. Text should keep its contrast over the scene (add a scrim if it does not), the call to action should be reachable with a thumb, and nothing should scroll sideways.

5. Ship it

The source is yours; nothing phones home. Keep the licence header on the files, use one animated background per page, and let reduced motion show the still frame.

Working with an AI tool

Every item page has a detailed prompt with the colours, fonts, art and rules of the piece. Paste it into Claude, Codex or Cursor along with your page's file and ask for the change you want. See Prompts.