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

import 'motion-components/motion-perspective'   // just this one
import 'motion-components'               // or the whole library

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.

<motion-perspective depth="0.7" vanish="left">
  PERSPECTIVE
</motion-perspective>

Dynamic content

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

const el = document.querySelector('motion-perspective')
el.text = 'UPDATED'   // animation restarts

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.

<motion-perspective depth="0.7" vanish="right">
  RECEDING
</motion-perspective>

Depth

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

<motion-perspective depth="0.3" vanish="left">SHALLOW</motion-perspective>
<motion-perspective depth="0.85" vanish="left">DEEP</motion-perspective>

loop

Add loop to continuously rotate the perspective illusion back and forth. duration sets the seconds per cycle. Lower is faster. The old oscillate attribute still works as an alias for loop.

<motion-perspective depth="0.7" loop duration="1.667">
  ROTATING
</motion-perspective>

Pause on hover

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

<motion-perspective depth="0.7" loop duration="2" pause-on-hover>
  HOVER ME
</motion-perspective>

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 loop mode, a requestAnimationFrame cycle drives a cosine wave across the character positions, continuously cycling the perspective illusion through a full rotation.

Properties

JavaScript API

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

Accessibility

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