import { Component } from '@angular/core';
import { WrTilt } from 'ngwr/animations/tilt';
@Component({ imports: [WrTilt] })
export class MyComponent {}Tilt
A card leans toward the pointer in 3D while the pointer is over it, and settles back flat when it leaves. The lean is small, ten degrees at most, and the card's box never changes: transform only, so nothing around it moves. It has no inputs and no stylesheet.
Installation
Import the class. This entry point has no stylesheet.
Basic
Put wrTilt on the card. Each animation frame takes the target angles from the latest pointer position and eases the rendered angles toward them, an exponential step sized by the frame's real duration, then writes one inline transform; the loop runs only while the rendered angles are short of the target, so a still pointer costs no frames. On leave the target is flat and the same ease brings the card back; when it lands, the inline transform and will-change come off, so at rest the card is exactly as its stylesheet says. The ease is in the frame loop and not a CSS transition, so it never replaces the card's own transition and a fast pointer never lags.
<a class="link-card" routerLink="/guides/forms" wrTilt>
<span class="link-card__title">Forms guide</span>
<span class="link-card__desc">Signal Forms, end to end.</span>
</a>Styling
There is no stylesheet and nothing to @use: the directive paints inline and the host carries the class wr-tilt as a hook for a consumer's own rules, a shadow that deepens on hover, say. The edge under the pointer dips away, as if pressed, at a viewing distance where the near edge grows by about four percent at the full angle and the far edge shrinks by as much: the card reads as tilted, not as coming out of the page.
Accessibility
| Part | Behaviour |
|---|---|
| Keyboard | Focus tilts nothing: the focus ring is the hint, and it is the card's own. |
| Screen readers | Nothing is added to the card: no children, no attributes a reader hears. |
| Touch | A touch pointer is ignored: it has no hover, and a tap would leave the card leaning. |
| Reduced motion | Under prefers-reduced-motion: reduce and under forced-colors: active nothing listens and the card never leans. |
| Server | Nothing runs: the listeners are added after the first render, in the browser only. |