Tilt Card

A 3D tilt card that rotates based on cursor movement. It includes a perspective effect and a spotlight that appears on hover. Use it to add interactive visual effects to card components. The card responds to pointer events and adjusts its transform accordingly.

bytom from Spell

Installation

terminal

pnpm dlx layro-cli add @xxtomm/tilt-card

npx layro-cli add @xxtomm/tilt-card

npx layro-cli add @xxtomm/tilt-card

bunx layro-cli add @xxtomm/tilt-card

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client"

import { useRef, useState, useCallback } from "react"
import { cn } from "@/lib/utils"

export interface TiltCardProps {
  /** Maximum tilt angle in degrees */
  tiltLimit?: number
  /** Scale factor on hover */
  scale?: number
  /** Perspective distance in pixels */
  perspective?: number
  /** Tilt direction: "gravitate" follows cursor, "evade" tilts away */
  effect?: "gravitate" | "evade"