Stacked Text Reveal

A premium text-driven narrative transition component. Phrases slide up sequentially and cylinder-rotate behind a header anchor, before stretching apart to reveal the full stack in an accordion shutter motion.

Building

Initializing Timeline...

Narrative Presets

Edit Phrases Stack

Words Hierarchy (Top to Bottom)

Top Anchor

Middle

Bottom Anchor

Line Spacing (stepHeight)1.30 em

Background Image

Speed Presets

Micro-Timing Overrides (s)

Intro Pop-in

Slide Duration

Slide Stagger

Reveal Delay

Reveal (Stretch) Duration

Required Dependencies

npm install gsap @gsap/react react-icons

Architecture & Setup

Copy these files into your codebase matching the structure below: 📁 src/ ├── 📁 css/ │ └── 📁 stacked-text-reveal/ │ └── 📄 variables.css ├── 📁 types/ │ └── 📄 stacked-text-reveal.types.ts ├── 📁 constants/ │ └── 📄 stacked-text-reveal.constants.ts ├── 📁 hooks/ │ └── 📁 gsap/ │ └── 📁 stacked-text-reveal/ │ ├── 📄 index.ts │ ├── 📄 animateReveal.ts │ └── 📄 useStackedTextRevealAnimation.ts ├── 📁 services/ │ └── 📁 ui.utilities/ │ └── 📁 stacked-text-reveal/ │ ├── 📄 index.ts │ └── 📄 layout.ts └── 📁 components/ └── 📁 stacked-text-reveal/ ├── 📄 StackedTextReveal.tsx ├── 📄 StackedTextRevealLoader.tsx └── 📁 preview/ ├── 📄 index.tsx ├── 📄 Controls.tsx └── 📄 Presets.tsx