Component•Premium

Letter Cascade

A flowing sequence of vertical letter rolls, triggered on hover, focus, touch, or scroll.

Customize

TextDuration (seconds)0.6Letter delay (seconds)0.06Blur (pixels)8Font size72DirectionSequence originPlay on scroll

Hover, tap, or focus the text to roll each letter in sequence. Enter and Space replay it. Reduced motion is respected.

Overview

About the Letter Cascade

A flowing sequence of vertical letter rolls, triggered on hover, focus, touch, or scroll. It is delivered as editable TypeScript for React. Instance-scoped embedded CSS. Tailwind CSS is not required. Its focused API can be adapted to your own content and visual system.

Usage

When to use it

Interactive headlines and playful brand statements.

What’s included

Files in the product ZIP

Letter Cascade source

components/letter-cascade.tsx

Editable React and TypeScript component source.

Working example

examples/example.tsx

A minimal import and render example that matches the packaged API.

Installation guide

README.md

Manual ZIP installation, styling, compatibility, asset, and usage notes.

Usage

Import and render

Copy the packaged source to the documented path, then use the public API shown below.

Import

import { LetterCascade } from "@/components/letter-cascade";

Minimum example

<LetterCascade text="Hover Me!" duration={0.6} stagger={0.06} />

Props

Component API

Prop	Type	Default	Description
text	string	"Hover Me!"	Displayed text; Unicode graphemes stay together.
duration	number	0.6	Seconds for each letter rotation.
stagger	number	0.06	Seconds between letters.
direction	"top" \| "bottom"	"bottom"	Vertical roll direction (rotateX).
origin	"first" \| "last" \| "center"	"first"	Sequence starting point.
blur	number	8	Maximum blur in CSS pixels; zero disables it.
fontSize	number	72	Font size in CSS pixels; style can override it responsively.
color	string	"#ffffff"	Text color.
playOnScroll	boolean	false	Replay on entering the viewport.
scrollThreshold	number	0.1	Visible proportion needed to trigger scroll playback.
active	boolean	undefined	True plays once; false disables playback; omitted allows normal interaction.
onAnimationStart	() => void	—	Called on playback start.
onAnimationComplete	() => void	—	Called after the full uncancelled sequence finishes.
className	string	—	Root class.
style	CSSProperties	—	Root inline styles.

Compatibility

Verified project setup

ReactLoom's preview is tested with Next.js 16.3.8 App Router, React 19.2.8, TypeScript 5.9.3, and Tailwind CSS 4.3.3. This describes the store environment, not the product's minimum requirements.
This interactive component includes the "use client" directive and must remain behind a Client Component boundary in the Next.js App Router.
Instance-scoped embedded CSS. Tailwind CSS is not required.

Images: No image files are included or required by the packaged component.
Fonts: No font files are included. The component uses system font fallbacks unless your app supplies a matching font.

Installation

Add it to your project

Download the Letter Cascade ZIP, place the source file at src/components/letter-cascade.tsx, and copy the example into your own page or feature folder.

Target path

src/components/letter-cascade.tsx

No additional npm runtime packages are required beyond the React host; follow the styling requirements below.

Styling requirements

Copy components/letter-cascade.tsx and import LetterCascade. Keep use client in Next.js App Router.
duration and stagger use seconds. Hover, focus, tap, Enter and Space replay the sequence. Repeated triggers restart cleanly.
Reduced motion disables playback; hidden tabs cancel animation. Scroll playback uses IntersectionObserver.
Uses native Intl.Segmenter for Unicode graphemes and native Web Animations API in modern browsers. No fonts, images or third-party code included.