# AI use cases for Awesome HTML Scrolline Deck (gongnyang/awesome-html-scrolline-deck)
Repo: [gongnyang/awesome-html-scrolline-deck](https://github.com/gongnyang/awesome-html-scrolline-deck) | Use cases: 5 | Page: https://dedupedai.com/use-cases/gongnyang-awesome-html-scrolline-deck/
Scrolline is a JavaScript toolkit for building scroll-driven presentation decks, where you describe beats in a deck.yaml file and the same timeline plays in the browser or exports to MP4.
This file holds every use case of this repo. Each one starts with a "## " heading and ends with its URL.
- Build a scroll-driven deck from a concept in one afternoon: https://dedupedai.com/use-cases/gongnyang-awesome-html-scrolline-deck/build-concept-deck-from-yaml/
- Export a finished deck to an MP4 video: https://dedupedai.com/use-cases/gongnyang-awesome-html-scrolline-deck/export-deck-to-mp4/
- Save one PNG per deck stop for a visual review: https://dedupedai.com/use-cases/gongnyang-awesome-html-scrolline-deck/capture-stop-pngs-for-review/
- Let Claude Code build a deck from a brief: https://dedupedai.com/use-cases/gongnyang-awesome-html-scrolline-deck/drive-deck-builds-with-claude-code-skill/
- Add stock video to a deck beat with your own API key: https://dedupedai.com/use-cases/gongnyang-awesome-html-scrolline-deck/add-stock-video-to-a-beat/
## How to build a scroll-driven deck from a concept in one afternoon with Awesome HTML Scrolline Deck
Repo: [gongnyang/awesome-html-scrolline-deck](https://github.com/gongnyang/awesome-html-scrolline-deck) | Difficulty: Intermediate | Time: 1 hour | Basis: From the README
Start a deck from a concept pack, write beats in deck.yaml, and preview it in the browser.
**Who it is for:** An analyst or presenter who has a quarterly review, market update or pitch to show and wants a scroll-driven deck instead of slides.
**The problem:** Slide tools cut from one slide to the next, so the audience loses track of the numbers and objects that carry the story.
**The outcome:** A working local deck at a dev URL, built from a concept pack, with stops and timings computed in node.
### Steps
1. `git clone https://github.com/gongnyang/awesome-html-scrolline-deck.git`
2. `cd awesome-html-scrolline-deck`
3. `git checkout v2`
4. `npm install`
5. `npm run deck -- new my-review --concept data`
6. Write your beats in decks/my-review/deck.yaml using the beat format in the README.
7. `npm run deck -- plan my-review`
8. `npm run dev`, then open http://localhost:5173/decks/my-review/ (inferred from the sample URL pattern)
### Prompt to paste into your agent
```text
In the awesome-html-scrolline-deck repo, check out branch v2, run npm install, then create a deck named with `npm run deck -- new --concept data` and write its beats in decks//deck.yaml from . Run `npm run deck -- plan ` and report the stops and timings it prints. Verify that the plan command finishes without errors before you stop.
```
### Caveat
The example decks are in Korean, and the README documents only the data concept as a starting point for real-data reviews.
Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/
URL: https://dedupedai.com/use-cases/gongnyang-awesome-html-scrolline-deck/build-concept-deck-from-yaml/
## How to export a finished deck to an MP4 video with Awesome HTML Scrolline Deck
Repo: [gongnyang/awesome-html-scrolline-deck](https://github.com/gongnyang/awesome-html-scrolline-deck) | Difficulty: Intermediate | Time: 30 minutes | Basis: From the README
Render a deck's paused timeline to a 1920x1080 MP4 for sharing without a browser.
**Who it is for:** A presenter who must send a deck as a video file for a webinar, an event screen or an inbox that cannot run the web version.
**The problem:** A scroll-driven deck does not work in a plain video player, and a screen recording would drop the scrubbing and timing.
**The outcome:** An MP4 file at out/export/.mp4 that shows the same frames as the browser version.
### Steps
1. `git clone https://github.com/gongnyang/awesome-html-scrolline-deck.git`
2. `cd awesome-html-scrolline-deck`
3. `git checkout v2`
4. `npm install`
5. `npm run export -- rail-ai-decade --dry-run`
6. `npm run export -- rail-ai-decade`
### Prompt to paste into your agent
```text
In the awesome-html-scrolline-deck repo on branch v2, run `npm run export -- --dry-run` to print the timeline map, then run `npm run export -- ` to render the MP4. Report the path of the output file, which should be out/export/.mp4. Verify that the file exists and that its resolution is 1920x1080 as the README describes.
```
### Caveat
The export uses the HyperFrames CLI fetched by npx, so the first run needs network access, and the README does not state how long a render takes.
Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/
URL: https://dedupedai.com/use-cases/gongnyang-awesome-html-scrolline-deck/export-deck-to-mp4/
## How to save one PNG per deck stop for a visual review with Awesome HTML Scrolline Deck
Repo: [gongnyang/awesome-html-scrolline-deck](https://github.com/gongnyang/awesome-html-scrolline-deck) | Difficulty: Beginner | Time: 30 minutes | Basis: From the README
Capture each stop of a deck as a PNG so a team can review every frame without scrolling.
**Who it is for:** A design or content reviewer who needs to check every stop of a deck before it is signed off or printed as a handout.
**The problem:** Reviewing a scroll-driven deck means scrolling through it by hand, and a missed stop can hide a layout error.
**The outcome:** One PNG per stop in out/capture// that the reviewer can check in any image viewer.
### Steps
1. `git clone https://github.com/gongnyang/awesome-html-scrolline-deck.git`
2. `cd awesome-html-scrolline-deck`
3. `git checkout v2`
4. `npm install`
5. `npm run capture -- rail-ai-decade --stops`
### Prompt to paste into your agent
```text
In the awesome-html-scrolline-deck repo on branch v2, run `npm run capture -- --stops` and list the PNG files written to out/capture//. Verify that the number of PNG files equals the number of stops that `npm run deck -- plan ` reports.
```
### Caveat
The capture command is documented only with the --stops flag, so this flow covers stop images and not other capture modes.
Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/
URL: https://dedupedai.com/use-cases/gongnyang-awesome-html-scrolline-deck/capture-stop-pngs-for-review/
## How to let Claude Code build a deck from a brief with Awesome HTML Scrolline Deck
Repo: [gongnyang/awesome-html-scrolline-deck](https://github.com/gongnyang/awesome-html-scrolline-deck) | Difficulty: Advanced | Time: 1 hour | Basis: From the README
Install the repo as a Claude Code skill so an agent can go from a brief to a deck and an MP4.
**Who it is for:** A developer or analyst who already uses Claude Code and wants the agent to draft the deck, run a smoke test and produce the video from a written brief.
**The problem:** Turning a brief into a concept choice, a deck.yaml file, a test run and an export takes many manual steps that are easy to lose track of.
**The outcome:** A deck built from a brief, with an MP4 export, where the agent has followed the skill's steps from concept to smoke run.
### Steps
1. `git clone https://github.com/gongnyang/awesome-html-scrolline-deck.git`
2. `cd awesome-html-scrolline-deck`
3. `git checkout v2`
4. `npm install`
5. `ln -s "$PWD" ~/.claude/skills/scrolline-deck`
6. Ask Claude Code to use the scrolline-deck skill with your brief and the target deck name.
### Prompt to paste into your agent
```text
Use the scrolline-deck skill in the awesome-html-scrolline-deck repo to turn into a deck named . Choose a concept, write decks//deck.yaml, run `npm run deck -- plan `, then `npm run export -- `. Report the concept you chose and the path of the MP4, and verify that out/export/.mp4 exists.
```
### Caveat
The README names the skill and its steps but does not say how the agent chooses between concepts, so review the chosen concept before you accept the deck.
Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/
URL: https://dedupedai.com/use-cases/gongnyang-awesome-html-scrolline-deck/drive-deck-builds-with-claude-code-skill/
## How to add stock video to a deck beat with your own API key with Awesome HTML Scrolline Deck
Repo: [gongnyang/awesome-html-scrolline-deck](https://github.com/gongnyang/awesome-html-scrolline-deck) | Difficulty: Advanced | Time: 1 hour | Basis: From the README
Put Pexels or Pixabay footage into a beat that scrubs with scroll or plays in place.
**Who it is for:** A presenter whose deck needs real footage for a launch or an industry story and who has a Pexels or Pixabay account.
**The problem:** Stock video needs its own key and file handling, and a key committed to git would leak.
**The outcome:** A deck beat of type video that scrubs with scroll or plays while active, with the key kept out of git.
### Steps
1. Create your own Pexels or Pixabay API key.
2. Save the key in a `.env` file in the repo root. The README says .env is git-ignored.
3. `npm run frames` to cut a frame sequence for a scrubbed beat (ffmpeg required).
4. Set `type: video` and `mode: scrub`, or `mode: play` or `loop`, in the beat's deck.yaml entry.
5. `npm run check` to confirm the key is not in tracked files.
### Prompt to paste into your agent
```text
In the awesome-html-scrolline-deck repo, add a video beat to decks//deck.yaml using and mode scrub. Confirm that the API key is stored only in .env. Run `npm run check` and report whether it passes.
```
### Caveat
Stock footage is credited per deck in decks//assets/CREDITS.md under the Pexels License, so keep that file with the deck.
Risk, credentials: Store your Pexels or Pixabay API key only in the git-ignored .env file and never paste it into deck.yaml, a commit or an agent prompt.
Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/
URL: https://dedupedai.com/use-cases/gongnyang-awesome-html-scrolline-deck/add-stock-video-to-a-beat/