motion-perspective
Scales characters progressively to simulate a vanishing-point perspective — text that recedes into the distance. Static by default, with an optional animated rotation mode.
Preview
Import
Usage
Vanish right
Set vanish="right" to flip the direction — text grows from left to right.
Depth
Increase depth toward 1 for a more extreme effect, or reduce it for a subtle optical refinement.
Animated rotation
Add animate to continuously rotate the perspective illusion back and forth. speed sets cycles per second.
Pause on hover
Add pause-on-hover to freeze the animation when the cursor enters.
How it works
Characters are laid out in a bottom-aligned flex row. Each character's font-size is scaled from (1 - depth)em at the vanishing end to 1em at the foreground end. Because all characters share the same baseline, the result mimics text on a flat plane receding into the distance.
In animated mode, a requestAnimationFrame loop drives a cosine wave across the character positions, continuously cycling the perspective illusion through a full rotation.
Properties
| Attribute | Property | Type | Default | Description |
|---|---|---|---|---|
| | | string | — | Text to render with the perspective effect |
| | | number | 0.65 | Effect intensity — how small the vanishing end gets (0–1) |
| | | "left" | "right" | "left" | Which end of the text is the vanishing point |
| | | boolean | false | Continuously rotate the perspective back and forth |
| | | number | 1.5 | Rotation cycles per second (only applies when animate is set) |
| | | boolean | false | Freeze animation on mouseenter, resume on mouseleave |
Accessibility
When prefers-reduced-motion is set, the animated mode falls back to the static perspective layout.