Tilt Card

Angular adaptation of an effect by David Haz / reactbits.dev.

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

Hover me

Move the cursor across me.

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

Customize

Max Tilt (°)

12 °

Perspective (px)

800 px

Scale

1.03

Glare

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

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

[wrTilt] on a plain <div> — same behaviour, no card chrome.

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

Import

Playground

Hover me

Customize

Directive variant ([wrTilt])

API