# Tilt Card

> Cursor-tracked 3D tilt. Use `<wr-tilt-card>` for a ready-made card host, or `[wrTilt]` to add the tilt behaviour to any element.

Source: https://ngwr.dev/animations/tilt-card  
Kind: Animation

## Import

```angular-ts
import { WrTiltCard, WrTilt } from 'ngwr/tilt-card';
```

## Playground

```html
<wr-tilt-card
  [maxTilt]="12"
  [perspective]="800"
  [scale]="1.03"
  [glare]="false"
>
  <h3>Hover me</h3>
  <p>Move the cursor across me.</p>
</wr-tilt-card>
```

## Directive variant ([wrTilt])

```angular-ts
// Directive variant — same package, drops on any element.
import { WrTilt } from 'ngwr/tilt-card';

<img wrTilt [maxTilt]="10" [scale]="1.02" src="…" />
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `maxTilt` | Maximum tilt in degrees. | `number` | `12` |
| `perspective` | CSS perspective in pixels. | `number` | `800` |
| `scale` | Scale applied while hovered. | `number` | `1.03` |
| `glare` | Add a moving glare highlight overlay. | `boolean` | `false` |
| `[wrTilt]` | Directive variant — same inputs as `<wr-tilt-card>`. Drops on any element. | `directive` | `—` |