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

PERSPECTIVE

Import

Usage

Static content

Write the text as a child. The browser shows it as plain text before the element is defined, so the page never paints an empty gap while the library loads.

Dynamic content

Use the text attribute when text changes at runtime. Setting the property restarts the animation automatically.

If both are present, the attribute wins and the child text stays as the pre-upgrade fallback.

Vanish right

Set vanish="right" to flip the direction — text grows from left to right.

RECEDING

Depth

Increase depth toward 1 for a more extreme effect, or reduce it for a subtle optical refinement.

SHALLOW

DEEP

Animated rotation

Add animate to continuously rotate the perspective illusion back and forth. speed sets cycles per second.

ROTATING

Pause on hover

Add pause-on-hover to freeze the animation when the cursor enters.

HOVER ME

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
text	text	string	—	Text to render with the perspective effect. Falls back to the child text when unset
depth	depth	number	0.65	Effect intensity — how small the vanishing end gets (0–1)
vanish	vanish	"left" \| "right"	"left"	Which end of the text is the vanishing point
animate	animate	boolean	false	Continuously rotate the perspective back and forth
speed	speed	number	1.5	Rotation cycles per second (only applies when animate is set)
pause-on-hover	pauseOnHover	boolean	false	Freeze animation on mouseenter, resume on mouseleave

JavaScript API

Control the perspective programmatically with play(), pause(), finish(), and cancel().

playState: –

Accessibility

When prefers-reduced-motion is set, the animated mode falls back to the static perspective layout.