Tilted Card

A deeply interactive, parallax-driven 3D tilt component. It calculates the relative pointer coordinates and eases the card toward them through a small spring of its own (no animation library) to rotate it along the X and Y axes, mimicking a physical object held in space.

It automatically injects a dynamic, radial glare layer over the content that tracks the light source based on your mouse position to complete the tactile illusion.

Hover a card and move the pointer across it — rotation, scale and the radial glare all derive from the cursor's position inside the element.

Interactive Tilted Card

Adjust tilt intensity, glare opacity, and hover scale using the interactive controls above to test different design approaches in real-time.

tiltIntensity: controls the maximum rotational degree on hover.
glareOpacity: sets peak alpha opacity for radial light reflection.
scaleOnHover: defines the 3D lift scale multiplier when hovered.

Active Color

Tilt Intensity20

Glare Opacity0.20

Scale On Hover1.04

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Tilted Card

npx shadcn@latest add @algorize-ui/tilted-card

components/custom/blocks/TiltedCardBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Nothing beyond the shared setup — Tilted Card needs only the cn helper and lucide-react, which the installation guide already put in place.

Examples

Stronger tilt

tiltIntensity{35}: is the maximum rotation in degrees on each axis, reached at the edge of the box. Defaults to 15; past ~25 the perspective starts to shear.

Subtle tilt

tiltIntensity{6}: keeps the motion restrained for dense layouts where many cards move at once.

Stronger glare

glareOpacity{0.55}: is the peak alpha of the radial highlight that tracks the pointer.

Without glare

SetglareOpacity{0}: to drop the reflection entirely — right when the card already carries its own lighting.

Lift on hover

scaleOnHover{1.12}: is how far the card comes toward the viewer on hover.

Features

Discover the key capabilities that make this component an excellent choice for modern, animated user interfaces.

Fluid Animations

Hardware-accelerated transitions that ensure smooth 60fps performance across devices.

Highly Customizable

Exposes intuitive props for tailoring colors, sizes, and animation speeds to fit your brand.

Responsive Design

Automatically adapts to mobile, tablet, and desktop viewports without horizontal scrolling issues.

Accessible

Built with semantic HTML and ARIA labels where necessary to support screen readers and keyboard navigation.

Best Practices & Guidelines

Animation Performance

Avoid placing too many heavy animated components on a single screen to prevent layout thrashing and maintain 60fps performance. Use intersection observers to pause off-screen animations.

State Management

When triggering animations via state changes, ensure you wrap state updates in startTransition or use lightweight stores to prevent React rendering bottlenecks during the animation tick.

Props Reference

Component	Prop	Type	Default	Description
`TiltedCard`	`children`	`ReactNode`	Required	The internal content and visual design of the card to be mapped into the 3D space.
`TiltedCard`	`tiltIntensity`	`number`	`15`	The maximum rotational degree the card can reach when the mouse hits the absolute edge of the bounding box.
`TiltedCard`	`glareOpacity`	`number`	`0.2`	The maximum opacity (from 0 to 1) of the mouse-tracking radial gradient light reflection. Set to 0 to disable the glare.
`TiltedCard`	`scaleOnHover`	`number`	`1.02`	The transform scale multiplier applied to the entire component when the mouse enters the bounding box, creating a subtle lift effect.
`TiltedCard`	`className`	`string`	`undefined`	Custom Tailwind CSS classes to apply to the outermost perspective wrapper.