import { Component } from '@angular/core';
import { WrTilt, WrTiltCard } from 'ngwr/bits/tilt-card';
@Component({ imports: [WrTilt, WrTiltCard] })
export class MyComponent {}Tilt Card
A card that tilts in 3D toward the pointer.
Installation
Import the class, and @use the entry point in your global styles: without it the component renders unstyled.
Angular adaptation of an effect by David Haz / reactbits.dev.
Playground
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 (°)
Perspective (px)
Scale
Glare
Directive variant ([wrTilt])
[wrTilt] adds the same tilt to any element.
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 |