Tilt Card

A card that leans toward the mouse in 3D, with a soft glare.

Dependenciesmotion

Membership

Balick UI

Move the pointer over the card.

No. 0001Open source

Installation#

pnpm dlx shadcn@latest add @balick/tilt-card

Or pass the full URL: https://ui.balick.me/r/tilt-card.json

Usage#

import { TiltCard } from "@/components/ui/tilt-card"

export function Membership() {
  return (
    <TiltCard className="w-64 rounded-2xl border bg-card p-5">
      <p className="font-medium">Membership</p>
    </TiltCard>
  )
}

Props#

Prop	Type	Default	Description
`maxTilt` Largest angle the card leans, in degrees.	`number`	10	Largest angle the card leans, in degrees.
`glare` Light a soft spot under the pointer.	`boolean`	true	Light a soft spot under the pointer.
`scale` Scale of the card while the pointer is over it.	`number`	1.02	Scale of the card while the pointer is over it.