# Tilt Card

> A card that tilts in 3D toward the pointer.

Source: https://ngwr.dev/bits/tilt-card  
Updated in v15

## Installation

Import the class, and `@use` the entry point in your global styles: without it the component renders unstyled.

```typescript
import { Component } from '@angular/core';
import { WrTilt, WrTiltCard } from 'ngwr/bits/tilt-card';

@Component({ imports: [WrTilt, WrTiltCard] })
export class MyComponent {}
```

```scss
@use 'ngwr/bits/tilt-card';
```

## Playground

```angular-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>
```

```angular-ts
import { Component } from '@angular/core';

import { WrTiltCard } from 'ngwr/bits/tilt-card';

/**
 * Playground
 */
@Component({
  selector: 'ngwr-the-angular-ui-library-for-signal-forms-playground-example',
  templateUrl: './ngwr-the-angular-ui-library-for-signal-forms-playground-example.html',
  imports: [WrTiltCard],
})
export class NgwrTheAngularUiLibraryForSignalFormsPlaygroundExample {}
```

## Directive variant ([wrTilt])

`[wrTilt]` adds the same tilt to any element.

```angular-ts
import { WrTilt } from 'ngwr/bits/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]` | Same inputs as `<wr-tilt-card>`, on any element. | `directive` | `—` |

## CSS variables

Set these on the component's selector or a wrapper, not on `:root`: the defaults are declared on `ngwr/bits/tilt-card`'s own element.

| Variable | Default | Declared on |
| --- | --- | --- |
| `--wr-tilt-card-padding` | `var(--wr-space-xl)` | `.wr-tilt-card` |
| `--wr-tilt-card-radius` | `var(--wr-border-radius-base)` | `.wr-tilt-card` |

## See also

- [Spotlight Card](https://ngwr.dev/bits/spotlight-card) — A card with a soft highlight that follows the pointer.
- [Card](https://ngwr.dev/reference/components/card) — A surface that groups related content.
- [Border Glow](https://ngwr.dev/bits/border-glow) — A card whose border glows where the pointer is.