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>

API Reference

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

Props

Prop Type Default Description
color string — Any CSS colour for the radial glow that follows the cursor. Defaults to a subtle neutral glow (the foreground token mixed to a low alpha) that reads well in both light and dark themes.
size int 350 The spotlight radius in pixels (the gradient's solid-centre to transparent-edge falloff distance).

Slots

Slot Description
default The card content. It sits above the decorative spotlight overlay on its own stacking context.