Tilt Card

Documentation Index

Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.

Add pointer-responsive perspective and optional glare to a card.

tilt-card-demo

Overview

Tilt Card provides a restrained depth cue for visual or featured content. Its children remain normal document content while the wrapper handles perspective and glare.

Installation

npx honestui@latest add tilt-card

Usage

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

<TiltCard max={10} glare><ArticleCard /></TiltCard>

Accessibility

Pointer tilt and glare disable themselves for touch and reduced motion. The card's content must remain understandable and operable without the effect.

API Reference

PropTypeDefaultDescription
children*ReactNodeCard content.
maxnumber12Maximum rotation in degrees.
glarebooleantrueShows a pointer-positioned highlight.
classNamestringCard surface and layout classes.