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>

API Reference

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

Props

Prop	Type	Default	Description
`max`	`number`	`12`	Maximum 3D tilt in degrees on each axis as the card rotates toward the cursor.
`scale`	`number`	`1.03`	How much the card scales up while the pointer is over it (1 = no zoom).
`glare`	`bool`	`false`	Show a pointer-following highlight overlay (a soft white radial glare) across the card surface.

Slots

Slot	Description
`default`	The card content that tilts in 3D. The inner card surface carries the border, background and rounding.