# Tilt Card

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

Source: https://www.honestui.com/docs/animated/tilt-card

```tsx
import { ArrowUpRight } from "honestui/icons";

import { TiltCard } from "@/registry/default/animated/tilt-card";

export function TiltCardDemo() {
  return (
    <TiltCard className="w-72 border bg-card p-6 shadow-lg" max={10}>
      <div className="text-muted-foreground text-xs font-medium uppercase">Spotlight</div>
      <h3 className="mt-8 text-xl font-semibold">Motion systems</h3>
      <p className="text-muted-foreground mt-2 text-sm leading-6">A gentle layer of depth that responds as you explore the card.</p>
      <ArrowUpRight className="mt-8 size-5" />
    </TiltCard>
  );
}

```

## Overview [#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 [#installation]

<CliBlock commands="[&#x22;tilt-card&#x22;]" />

## Usage [#usage]

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

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

## Accessibility [#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 [#api-reference]


  ### `children`

type: `ReactNode`

Card content.

  ### `max`

type: `number` · default: `12`

Maximum rotation in degrees.

  ### `glare`

type: `boolean` · default: `true`

Shows a pointer-positioned highlight.

  ### `className`

type: `string`

Card surface and layout classes.