blatui

Components

Spotlight Card

A card with a soft radial spotlight that follows the cursor on hover.

php artisan blatui:add spotlight-card

Spotlight Card

A soft radial glow tracks your cursor as it moves across the surface, adding depth on hover without overwhelming the content. 

{{-- Move your cursor over the card to reveal the spotlight. --}}
<x-ui.spotlight-card class="max-w-sm">
    <h3 class="text-lg font-semibold">Spotlight Card</h3>
    <p class="text-muted-foreground mt-2 text-sm">
        A soft radial glow tracks your cursor as it moves across the surface,
        adding depth on hover without overwhelming the content.
    </p>
</x-ui.spotlight-card>

Colored

Primary glow

Tinted with the theme's primary token, so it stays on-brand in light and dark.

Violet glow

A tighter, custom-coloured spotlight using an explicit rgba value and a smaller radius. 

{{-- Pass any CSS colour to `color` to tint the glow. --}}
<div class="grid gap-4 sm:grid-cols-2">
    <x-ui.spotlight-card color="color-mix(in oklab, var(--primary) 35%, transparent)">
        <h3 class="text-base font-semibold">Primary glow</h3>
        <p class="text-muted-foreground mt-2 text-sm">
            Tinted with the theme's primary token, so it stays on-brand in
            light and dark.
        </p>
    </x-ui.spotlight-card>

    <x-ui.spotlight-card color="rgba(168,85,247,0.4)" :size="280">
        <h3 class="text-base font-semibold">Violet glow</h3>
        <p class="text-muted-foreground mt-2 text-sm">
            A tighter, custom-coloured spotlight using an explicit rgba value
            and a smaller radius.
        </p>
    </x-ui.spotlight-card>
</div>