Perspective Animation

MAX

A perspective animation for elements

Demo

3D Perspective

This card rotates in 3D creating a depth and perspective effect.

PREMIUM

MAX

Acquire the MAX Plan

Unlock unlimited potential with our most advanced features and priority support.

All updates

All animations

No subscriptions

No hidden fees

$19.99

Payment once and get lifetime access

Usage Example

<PerspectiveAnimation className="w-full max-w-md" depth={800}>
  <div className="rounded-xl bg-gradient-to-br from-zinc-700 to-zinc-800 p-8 shadow-xl">
    <h3 className="mb-4 text-2xl font-bold text-white">3D Perspective</h3>
    <p className="text-white/80">
      This card rotates in 3D creating a depth and perspective effect.
    </p>
  </div>
</PerspectiveAnimation>
 
<PerspectiveAnimation depth={1500} className="w-full max-w-md">
  <div className="rounded-xl bg-gradient-to-br from-zinc-700 to-zinc-800 p-8 shadow-xl">
    {/* Your content here */}
    <h3 className="mb-4 text-2xl font-bold text-white">3D Perspective</h3>
    <p className="text-white/80">
      This card rotates in 3D creating a depth and perspective effect.
    </p>
  </div>
</PerspectiveAnimation>

Properties

The PerspectiveAnimation component accepts the following props:

Property	Type	Default	Description
`children`	`ReactNode`	-	The content to animate
`active`	`boolean`	`true`	Whether the animation is active
`className`	`string`	`""`	Additional CSS classes
`depth`	`number`	`500`	The depth of the perspective
`duration`	`string`	`"6s"`	The duration of the animation
`delay`	`string`	`"0s"`	The delay of the animation

Usage Examples

Documentation

Animations