Docs
Tilt Card

Tilt Card

3D perspective tilt on mousemove using Framer Motion spring physics.

Tilt Effect

Hover to see a smooth 3D perspective tilt powered by Framer Motion.

Installation

Usage

import { TiltCard } from "@/components/pioneerui/tilt-card"
 
export default function Card() {
  return (
    <TiltCard tiltAmount={12} glare>
      <h3>Tilt me</h3>
    </TiltCard>
  )
}

Props

PropTypeDefaultDescription
tiltAmountnumber10Maximum tilt angle in degrees
glarebooleantrueWhether to show a glare overlay
childrenReact.ReactNodeundefinedCard content
classNamestringundefinedAdditional CSS classes for the wrapper