gongnyang / awesome-html-scrolline-deck

Scrolline 
 Scroll-driven presentation decks: one stage, one continuous timeline, and moves that turn one element into the next. 
 한국어 · Getting started · Claude Code skill · Architecture 
You write a `deck.yaml`. Scrolline lays every beat on one paused GSAP timeline, the mouse wheel scrubs it, presenter keys jump between stops, and the same timeline renders to MP4.
## Why v2
- **v1 reused 12 scene templates**, so every deck read as the same deck with new pictures. v2 has no scenes: a deck is one continuous master timeline on one stage.
- **Beats hand off instead of cutting.** A link move carries part of one beat (a bar, a dot, a date) into the place it holds in the next beat, so the audience follows one object rather than a slide change.
- **Each concept has its own motion grammar.** A concept pack fixes the camera axis, timing and allowed moves, and names signature moves the deck must use. The six example decks move differently because their grammars differ.
> Adding video? Issue your own Pexels or Pixabay API key first and keep it in `.env` (git-ignored, blocked by `npm run check`). See docs/media.md.
## Example decks
Six decks, one per concept. Decks marked *sample* use a fictional company and say so on screen. The others use real data with a source list in `deck.yaml`.
| Deck | Concept | Typical use | Signature moves |
|---|---|---|---|
| `rail-ai-decade` · Generative AI, 2017 to 2026 | `rail` · horizontal time rail | company history, roadmap, an industry's decade | `rail-advance` `era-shift` `counter-handoff` |
| `data-ev-shift` · How far the EV shift has come | `data` · data journalism | quarterly results, market analysis | `dot-multiply` `mark-morph` `annotation-pin` |
| `launch-orbit-note` · Minute product launch *(sample)* | `launch` · product launch | product or feature launch | `lit-from-dark` `sticky-scrub-link` `number-slam` |
| `zoom-root-cause` · Q3 revenue diagnosis *(sample)* | `zoom` · infinite zoom drill-down | root cause, TAM-SAM-SOM, org structure | `zoom-dive` `zoom-surface` `depth-ladder` |
| `canvas-pitch` · Seed pitch on a map *(sample)* | `canvas` · camera flythrough | pitch deck, strategy map, process | `arc-flight` `establish-crane` `atlas-pullback` |
| `kinetic-next-word` · How AI writes an answer | `kinetic` · kinetic type lecture | lecture, keynote, statement | `word-door` `slot-pick` `phrase-fold` |
The decks are in Korean. See docs/concepts.md for what each concept allows.
## Quick start
Requires Node.js 22 or newer. ffmpeg is needed only to cut frame sequences, and the HyperFrames CLI (fetched by `npx`) only to export MP4.
 [code] 
Open `http://localhost:5173/decks/rail-ai-decade/` and scroll, or press → .
Start your own deck from a concept:
 [code] 
The full walkthrough is in docs/getting-started.md, and every `deck.yaml` field is in docs/writing-a-deck.md.
## A beat in `deck.yaml`
 [code] 
Beats hold content and moves hold motion. A beat renderer draws only the finished state. The concept supplies default move