blatui

Components

Meteors

Animated falling meteor streaks behind your content.

php artisan blatui:add meteors

A meteor shower of detail

Streaks of light fall quietly behind your content — pure CSS, no canvas, no images. 

<x-ui.meteors class="w-full max-w-xl rounded-xl border bg-slate-950 text-white">
    <div class="flex flex-col items-center gap-3 px-6 py-16 text-center">
        <h2 class="text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
            A meteor shower of detail
        </h2>
        <p class="max-w-md text-balance text-white/70">
            Streaks of light fall quietly behind your content — pure CSS, no canvas, no images.
        </p>
    </div>
</x-ui.meteors>

On Card

Background magic

Drop meteors behind any card. They respect the theme colour and pause for reduced-motion users. 

<x-ui.card class="w-full max-w-sm overflow-hidden p-0">
    <x-ui.meteors :count="14">
        <div class="flex flex-col gap-2 p-6">
            <div class="bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg">
                <x-lucide-sparkles class="size-5" aria-hidden="true" />
            </div>
            <h3 class="mt-2 text-lg font-semibold tracking-tight">Background magic</h3>
            <p class="text-muted-foreground text-sm text-balance">
                Drop meteors behind any card. They respect the theme colour and pause for
                reduced-motion users.
            </p>
        </div>
    </x-ui.meteors>
</x-ui.card>

API Reference

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

Props

Prop Type Default Description
count int 20 How many meteor streaks to render. Clamped to between 1 and 100 so the decorative layer can never explode the DOM.
color string — Any CSS colour for the meteor head and trail. Defaults to the foreground token at low opacity so it suits both light and dark surfaces.

Slots

Slot Description
default The content rendered above the meteor layer. The wrapper is relative and overflow-hidden, so meteors fall behind whatever you put here.