Split Text Reveal

Live preview — fully interactive

The prompt

Build a masked split-text headline reveal: every character rotates up from below its line, staggered across multiple lines, with a click-to-replay.

## Structure
- A centered stage: uppercase eyebrow, an h1 containing 3 explicit .line spans (each display block, overflow hidden, w

Full prompt (1882 chars) unlocks after purchase

The code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { background: #08080d; color: #f2f2f7; font-family: 'Inter', system-ui, sans-serif; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
  .stage { text-align: cen

Complete self-contained HTML unlocks after purchase

About this effect

The award-site headline entrance, rebuilt without GSAP's paid SplitText plugin. A small vanilla-JS splitter breaks each line into word and character spans at runtime; every character then hinges up from below its overflow-hidden line mask with rotation and a 24ms stagger, cascading across three lines. Click anywhere to replay. Drop it into any landing page hero as-is.