Flying Word Stage

Install

Or by hand, in a Next.js project with shadcn set up. It writes components/pastetaste/flying-word-stage.tsx.

Install the pastetaste component "Flying Word Stage" (flying-word-stage) into this Next.js project and use it.

What it is: A pinned rounded stage with one giant word: photos and chips fly upward past it at different speeds, behind and in front of the letters, then the word rolls to the next one and its subline swaps.

Before you place it, ask me (one short message, in my language; "skip" = sensible default): which page and section it goes in, my brand colour (hex), the text, labels or images it should show, and whether I want my logo or my own copy in the demo content. Then:

Steps:
1. If the project has no components.json, run: npx shadcn@latest init -y -d. Then run: npx shadcn@latest add https://pastetaste.com/r/flying-word-stage.json
   (it writes components/pastetaste/flying-word-stage.tsx; install any npm packages it reports: gsap@^3.15.0).
2. Import it: import { FlyingWordStage } from "@/components/pastetaste/flying-word-stage" (check the file for the exact named export).
3. Put it where it fits on the page I name, keep the rest of the page untouched, and pass props for my colours instead of editing the installed file.
4. It does not depend on Tailwind; colours come from CSS variables (--pt-*) or props.
5. It supports prefers-reduced-motion with a still state; do not remove it.

Props (all optional unless the type has no default):
- words: string[] = 14 DAYS, 1 PRICE — Words the big word rolls through at the end of the scroll.
- sublines: string[] = 2 lines — Line under the word, one per word.
- pieces: FlyPiece[] = 12 pieces — Photos (src) or text chips (text, background) with x, w, speed, rotate and layer back or front.
- ctaLabel / onCta: string / () => void = Start the 14 days — White pill button at the bottom of the stage.
- fontSize: string = clamp(76px, 22vw, 360px) — Size of the giant word, any CSS length.
- scrollLength: number = 3.2 — Pinned scroll length in viewport heights.
- background / colour: string = warm off-white / near black — Stage background and ink.
- ariaLabel / className / style: string / string / CSSProperties — On the outer element.

Live preview: https://pastetaste.com/c/flying-word-stage
Then run the dev server, check it in the browser at desktop and mobile width, and tell me the page URL.

Props 8