Components

Cinematic Text

Free

The film-title reveal: each word drifts down out of a heavy blur and settles, slow enough to feel like a camera pulling focus.

Interactive components for modern interfaces.

Every word drifts down out of a heavy blur and settles into focus.

Installation

FreeNo license required.
npx shadcn add https://useplanes.com/r/cinematic-text.json
<CinematicText as="h1" className="text-6xl font-semibold tracking-[-0.055em]">
  Interactive components for modern interfaces.
</CinematicText>

Examples

Reduced motion

With prefers-reduced-motion the line is not split at all: it renders as one run of type and fades in over 0.22s, with no stagger, no blur, and no travel.

<CinematicText>Reduced motion is a single fade.</CinematicText>

Use cases

  • Landing hero

    The headline resolves word by word as the page loads, over a video or shader background.

  • Section opener

    A full-bleed statement that lands as the reader scrolls into the section.

  • Product reveal

    A name or tagline that arrives slowly enough to carry weight before the CTA appears.

  • Chapter title

    Long-form or case-study dividers that read as title cards rather than headings.