Meteors

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

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