Cinematic Text

v1.0.1

FreeTypography

Cinematic typography that reveals a looping video through bold text, with cursor-driven SVG distortion shaders (liquid, prism, glitch, wave, melt) and optional 3D tilt. Dependency-free.

Cinematic Text

Pointera11y

Fullscreen to test full viewport

Installation

Step 1. Initialize ProjectOne-time setup

Run once in your project root to configure paths and dependencies:

npx vectorvesper init

Step 2. Add ComponentInstalls source & assets

Downloads and registers the component in your project:

npx vectorvesper add cinematic-text

Requires Tailwind CSS to be configured in your project.

Usage

Import

import { WarpedVideoText } from "@/components/vv/cinematic-text";

Usage

<WarpedVideoText />

This component respects prefers-reduced-motion and provides a graceful fallback.

Tailwind CSS must be configured in your project for styles to apply correctly.

Props

Big display type with video playing inside the letters, warped by one of five distortion effects. The block tilts toward the cursor. Text is sized to fit the box automatically, so long words shrink rather than overflow.

<WarpedVideoText />

The whole block — type, video fill, warp and tilt.

Prop	Type	Default	Description
`text`	`string`	`"CREATIVE"`	The word or line to render. Short words read best at display size.
`video`	`string`	`""`	Video shown through the letters. With none set the type renders as a flat fill.
`poster`	`string`	`—`	Still shown until the video can play.
`isPlaying`	`boolean`	`true`	Whether the video runs. Set false to freeze it on the current frame.
`fx`	`"liquid" \| "prism" \| "glitch" \| "wave" \| "melt"`	`"liquid"`	Which distortion runs over the letters. Liquid ripples, prism splits colour, glitch tears in blocks, wave undulates, melt drips downward.
`freq`	`number`	`0.015`	Scale of the distortion — lower gives broad slow shapes, higher a finer ripple.
`damp`	`number`	`8`	How strongly the distortion is held back. Higher is calmer.
`enableTilt`	`boolean`	`true`	Tilts the whole block toward the cursor.
`tiltMaxX`	`number`	`12`	Maximum tilt away from level, in degrees, on the vertical axis.
`tiltMaxY`	`number`	`12`	The same on the horizontal axis.
`tiltPerspective`	`number`	`1200`	Depth of the viewing frustum in pixels. Lower exaggerates the tilt.
`tiltLerp`	`number`	`0.08`	How quickly the tilt follows the cursor, per frame. Lower trails further behind.
`font`	`string`	`"font-sans"`	Class applied to the type. Point it at your own display face.
`fontSize`	`number`	`145`	Base size before fitting. Treated as a ceiling when fitText is on.
`fitText`	`boolean`	`true`	Shrinks the text horizontally so it fits the box. Turn it off to let long words overflow instead.
`minTextScaleX`	`number`	`0.4`	How far fitting may squeeze the letters before it stops. Below about 0.5 the type starts to look condensed.
`charWidthRatio`	`number`	`0.55`	Assumed width of a character relative to its height, used to estimate the fit. Raise it for a wide face, lower it for a condensed one.
`width`	`number`	`1200`	Width of the drawing surface.
`height`	`number`	`300`	Height of the drawing surface.
`innerWidth`	`number`	`—`	Optional narrower width for the text itself, leaving margin inside the box.
`videoFit`	`"cover" \| "contain" \| "fill"`	`"cover"`	How the video maps into the letters.
`videoScale`	`number`	`1.04`	Slight zoom on the video. Just over 1 by default so the warp never exposes an edge.
`videoPosition`	`string`	`"center"`	Which part of the video to favour when it is cropped.
`bleed`	`number`	`0`	Extra area drawn beyond the box, to stop the warp clipping at the edges.
`filterMargin`	`number`	`20`	Padding reserved around the type for the distortion to spill into. Raise it if a strong effect looks cut off.
`clipOverflow`	`boolean`	`true`	Clips anything outside the box. Turn it off to let the warp run past the edges.
`className`	`string`	`""`	Applied to the wrapper.
`style`	`React.CSSProperties`	`—`	Inline styles merged onto the wrapper.
`aria-label`	`string`	`the text prop`	Label announced for the block. Falls back to whatever `text` is, so it is usually already correct.

Examples

Video through the letters

import WarpedVideoText from "@/components/vv/cinematic-text/WarpedVideoText";

<WarpedVideoText
  text="ATLAS"
  video="/reel.mp4"
  poster="/reel-poster.webp"
  fx="liquid"
/>

Calmer, in your own face

<WarpedVideoText
  text="STUDIO NORTH"
  video="/reel.mp4"
  fx="wave"
  damp={16}
  freq={0.008}
  font="font-display"
  enableTilt={false}
/>

A long line that has to fitminTextScaleX is the floor — below it the text stops shrinking and starts overflowing instead.

<WarpedVideoText
  text="EVERYTHING IN MOTION"
  video="/reel.mp4"
  width={1600}
  minTextScaleX={0.35}
  charWidthRatio={0.48}
/>

The warp and the tilt both keep running under reduced motion. Pass enableTilt={false} and isPlaying={false} when the preference is set for a still version that still reads.

The distortion is recomputed as the video plays, which is the expensive part. A short, small, looping clip costs far less than a full-resolution one.

Client component. It measures the box and reads the pointer, so it has to run in the browser.

Source

/**
 * Cinematic Text — Vector Vesper
 * https://vectorvesper.dev/components
 *
 * Copyright (c) 2026 Vector Vesper
 * Released under the MIT License. This notice must be retained in copies and
 * substantial portions of the file. https://vectorvesper.dev/license
 */
export { default as WarpedVideoText } from "./WarpedVideoText";
export type { WarpedVideoTextProps } from "./WarpedVideoText";

View on GitHub Report an issue