Tilt Card

A card component that tilts and scales when hovered or focused, creating a 3D effect. It responds to mouse movement and keyboard focus, adding depth and interactivity. It can include a glare effect and parallax elements. Use it to enhance visual engagement in a product or content display.

byEdu Calvo from Smoothui

Installation

terminal

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

npx layro-cli add @educlopez/tilt-card

npx layro-cli add @educlopez/tilt-card

bunx layro-cli add @educlopez/tilt-card

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

Code

Demo

"use client";

import { cn } from "@/lib/utils";
import {
  motion,
  useMotionTemplate,
  useMotionValue,
  useReducedMotion,
  useSpring,
} from "motion/react";
import {
  type ReactNode,
  type PointerEvent as ReactPointerEvent,
  useEffect,