Components

Aurora

An animated northern-lights gradient backdrop with your content overlaid.

php artisan blatui:add aurora

Ship interfaces that feel alive

A living aurora backdrop, painted in pure CSS — no images, no canvas. Drop any content on top.

<x-ui.aurora class="w-full max-w-xl">
    <div class="flex flex-col items-center gap-3 py-12 text-center">
        <h2 class="text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
            Ship interfaces that feel alive
        </h2>
        <p class="max-w-md text-balance text-white/80">
            A living aurora backdrop, painted in pure CSS — no images, no canvas. Drop any content on top.
        </p>
    </div>
</x-ui.aurora>

Custom

A warmer sky

Bring your own palette with :colors, then dial the blur and speed.

<x-ui.aurora
    :colors="['#f97316', '#ef4444', '#ec4899', '#f59e0b']"
    :blur="80"
    :speed="18"
    class="w-full max-w-xl"
>
    <div class="flex flex-col items-center gap-3 py-12 text-center">
        <h2 class="text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
            A warmer sky
        </h2>
        <p class="max-w-md text-balance text-white/80">
            Bring your own palette with <code class="rounded bg-white/15 px-1.5 py-0.5 text-sm">:colors</code>,
            then dial the <code class="rounded bg-white/15 px-1.5 py-0.5 text-sm">blur</code> and
            <code class="rounded bg-white/15 px-1.5 py-0.5 text-sm">speed</code>.
        </p>
    </div>
</x-ui.aurora>

API Reference

Props, slots and exposed methods for <x-ui.aurora>.

Props

Prop	Type	Default	Description
`colors`	`array`	—	CSS colour strings for the drifting aurora blobs, overriding the default cyan/violet/emerald/magenta palette. The list is cycled if there are more blob positions than colours. When overriding, bring your own scrim in the slot to keep overlaid text legible.
`blur`	`number`	`60`	Blur radius in pixels applied to the aurora layer. Higher values make the colours softer and more diffuse.
`speed`	`number`	`12`	Seconds for one full drift and rotation cycle. The drift is disabled under prefers-reduced-motion.

Slots

Slot	Description
`default`	The foreground content shown over the aurora, inside padded container. The decorative aurora layer is aria-hidden, so only this content is read by assistive tech.