Perspective Card

A pointer-driven card with 3D tilt, soft shadow, specular shine, and background parallax. Respects prefers-reduced-motion. A demo photo ships under components/3d/perspective-card/images.

Default

Move the pointer across the page - the card tilts, floats, and the image drifts under a soft shine.

Loading…

Installation

CLI

npx @sonojs/ui@latest add perspective-card

Usage

page.tsx

"use client"

import { PerspectiveCard } from "@/components/3d/perspective-card"

export default function Page() {
  return (
    <PerspectiveCard
      image="/media/hero.jpg"
      width="320px"
      height="360px"
    />
  )
}

Props

Prop	Type	Default	Description
image	string	bundled demo	Background image URL.
width	string	"300px"	Card width (CSS length).
height	string	"350px"	Card height (CSS length).
className	string	-	Classes on the outer wrapper.