Overview
Components
Text Animations
Tilt Card
A cursor-reactive card wrapper with configurable tilt depth, hover scale, perspective, and optional spotlight.
John Doe
5367 4567 8901 2345
Exp.
12/25
Installation
pnpm dlx shadcn-svelte@latest add https://sv-animations.vercel.app/s/tilt-card.json
Copy the Source Code
Copy and paste the following code into your project:
tilt-card.svelte
index.ts
Folder Structure
Folder Structure
Props
| Name | Type | Default | Description |
|---|---|---|---|
tiltLimit | number | 15 | Sets the maximum rotation angle in degrees on both axes. |
scale | number | 1.05 | Controls how much the card scales up while hovered. |
perspective | number | 1200 | Sets the CSS perspective distance used for the 3D depth effect. |
effect | "gravitate" | "evade" | "evade" | Determines whether the card tilts away from the cursor or follows it. |
spotlight | boolean | true | Toggles the radial highlight overlay that tracks the pointer position. |
class | ClassValue | undefined | Custom classes applied to the root tilt wrapper. |
style | string | undefined | Inline styles appended to the root wrapper. |