blatui

Components

Tilt Card

A card that tilts in 3D toward the cursor, with an optional glare highlight.

php artisan blatui:add tilt-card

Northern Lights

Hover and move your cursor to tilt the card in 3D.

<x-ui.tilt-card class="w-72">
    <img src="https://picsum.photos/seed/blatui-tilt/400/240" alt="" class="aspect-[5/3] w-full object-cover" />
    <div class="p-5">
        <h3 class="font-semibold">Northern Lights</h3>
        <p class="text-muted-foreground mt-1 text-sm">Hover and move your cursor to tilt the card in 3D.</p>
    </div>
</x-ui.tilt-card>

Glare

Holographic

A glare highlight follows the pointer across the surface.

<x-ui.tilt-card :glare="true" :max="16" class="w-72">
    <img src="https://picsum.photos/seed/blatui-glare/400/240" alt="" class="aspect-[5/3] w-full object-cover" />
    <div class="p-5">
        <h3 class="font-semibold">Holographic</h3>
        <p class="text-muted-foreground mt-1 text-sm">A glare highlight follows the pointer across the surface.</p>
    </div>
</x-ui.tilt-card>