Domino Cascade
Tip a letter and start a chain reaction. Bottom-hinged characters topple into their neighbors, then spring upright in a flowing rebuild.
Overview
About the Domino Cascade
Tip a letter and start a chain reaction. Bottom-hinged characters topple into their neighbors, then spring upright in a flowing rebuild. It is delivered as editable TypeScript for React. Inline styles and native DOM animation. No Tailwind CSS required. Its focused API can be adapted to your own content and visual system.
Usage
When to use it
- Playful headlines and interactive portfolio introductions.
- Creative brand statements with a cascading chain reaction.
What’s included
Files in the product ZIP
Domino Cascade source
components/domino-cascade.tsxEditable React and TypeScript component source.
Working example
examples/example.tsxA minimal import and render example that matches the packaged API.
Installation guide
README.mdManual 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 { DominoCascade } from "@/components/domino-cascade";<DominoCascade text="Set things in motion." angle={76} returnDelay={1.5} />Props
Component API
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "Set things in motion." | Text split into a chain of individually hinged letters. |
| color | string | "#fafafa" | Letter color. |
| background | string | "#0a0a0a" | Container background. |
| fontSize | number | 88 | Maximum responsive font size, 16–160 pixels. |
| angle | number | 76 | Maximum sideways fall angle, 25–88 degrees. |
| stagger | number | 0.035 | Extra delay after a letter tips before it pushes the next, 0–0.25 seconds. |
| returnDelay | number | 1.5 | Seconds before each fallen letter rebuilds, 0.5–5. |
| stiffness | number | 145 | Spring stiffness, 60–240. |
| direction | "auto" | "left" | "right" | "auto" | Fall direction from pointer movement, or a fixed direction. |
| autoPlay | boolean | false | Automatically alternate cascades for a showcase. |
| paused | boolean | false | Display upright text without input or animation. |
| height | number | string | 440 | Container height. |
| className / style | string / CSSProperties | — | Container styling. |
Hover a letter to start a directional chain reaction. Each letter hinges near its baseline and pushes its neighbor only after tipping far enough. Letters spring upright after their own delay. Reduced motion shows still text; an accessible text alternative is included. Touch scrolling is preserved.
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.
- Inline styles and native DOM animation. No Tailwind CSS 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 Domino Cascade ZIP, place the source file at src/components/domino-cascade.tsx, and copy the example into your own page or feature folder.
Target path
src/components/domino-cascade.tsxNo additional npm runtime packages are required beyond the React host; follow the styling requirements below.
Styling requirements
- No additional dependencies or font assets required.
- A tilted letter passes its fall to its next neighbor, including across word spaces.
- Reduced motion keeps the text still. Offscreen and hidden tabs suspend animation.