# AI use cases for Scroll Craft (nateherkai/scroll-craft) Repo: [nateherkai/scroll-craft](https://github.com/nateherkai/scroll-craft) | Use cases: 4 | Page: https://dedupedai.com/use-cases/nateherkai-scroll-craft/ scroll-craft is an agent skill that gives Codex, Claude Code, and other coding agents a design workflow, engine, and verification tools for building premium, scroll-driven websites. This file holds every use case of this repo. Each one starts with a "## " heading and ends with its URL. - Build a scroll-driven site from one Claude Code prompt: https://dedupedai.com/use-cases/nateherkai-scroll-craft/build-scroll-site-claude-code-plugin/ - Turn your own footage into a scrubbing scroll page in Codex: https://dedupedai.com/use-cases/nateherkai-scroll-craft/build-scroll-site-from-own-footage-codex/ - Generate scroll-page imagery and video with a KIE key: https://dedupedai.com/use-cases/nateherkai-scroll-craft/generate-scroll-assets-with-api-key/ - Check a scroll page for dead scroll and unreadable text: https://dedupedai.com/use-cases/nateherkai-scroll-craft/verify-scroll-page-for-dead-scroll-and-contrast/ ## How to build a scroll-driven site from one Claude Code prompt with Scroll Craft Repo: [nateherkai/scroll-craft](https://github.com/nateherkai/scroll-craft) | Difficulty: Intermediate | Time: 45 minutes | Basis: From the README Install the Scroll Craft plugin in Claude Code and have it build an immersive scroll site. **Who it is for:** A founder or marketer using Claude Code who needs a premium, scroll-driven landing page and does not want to write the scroll mechanics by hand. **The problem:** AI website output is often either plain and forgettable or a flashy scroll animation with weak body text and a layout that breaks on phones. **The outcome:** A built scroll-driven page in your workspace, following the skill's design standard, with the engine left unedited. ### Steps 1. In Claude Code, run `/plugin marketplace add nateherkai/scroll-craft` 2. Run `/plugin install nateherk-design` 3. If the install summary says Run /reload-plugins to activate., run `/reload-plugins` 4. Run `/nateherk-design:scroll-craft` and describe the site you want, including the brand, audience, and sections 5. Review the contact sheet the skill writes and ask for changes to any section that does not match your brief ### Prompt to paste into your agent ```text Using the scroll-craft skill from the nateherkai/scroll-craft repo, build a scroll-driven landing page for . Follow the skill's brief, page grammar, and verification steps. Expected output: a built page in the workspace plus a contact sheet image. Verify that the verification pass reports no dead scroll and no cues stuck below full opacity. ``` ### Caveat Scroll-craft says it has only been run on Windows, so expect to set SCROLLCRAFT_FFMPEG or SCROLLCRAFT_CHROME if your tools are installed elsewhere. 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/nateherkai-scroll-craft/build-scroll-site-claude-code-plugin/ ## How to turn your own footage into a scrubbing scroll page in Codex with Scroll Craft Repo: [nateherkai/scroll-craft](https://github.com/nateherkai/scroll-craft) | Difficulty: Intermediate | Time: 60 minutes | Basis: From the README Use your own photos and video in Codex to build a page where scroll drives the footage. **Who it is for:** A creator or small business owner using Codex who already has product or brand footage and wants it to scrub under the scroll wheel. **The problem:** Video on a web page usually plays instead of responding to scroll, and clips often need re-encoding before they will scrub smoothly. **The outcome:** A scroll-driven page built from your own media, with clips encoded for scrubbing, and no generation spend. ### Steps 1. Copy the complete `scroll-craft` folder from plugins/nateherk-design/skills/scroll-craft/ into your project's .agents/skills/ directory 2. Run `node plugins/nateherk-design/skills/scroll-craft/scripts/doctor.mjs` and fix any faults it reports before building 3. Run `node plugins/nateherk-design/skills/scroll-craft/scripts/workspace.mjs --ensure` 4. Put your photos and footage in the build folder, then run the encode script at scripts/encode.mjs so clips scrub instead of playing (inferred, check the README) 5. Ask Codex to use the Scrollcraft skill to build the page from your media ### Prompt to paste into your agent ```text Using the scroll-craft skill in the nateherkai/scroll-craft repo, build a scroll-driven page from my own footage in for . Do not use generated assets. Expected output: a page where the footage scrubs with scroll. Verify that the doctor script reports a full ffmpeg build and that no clip is stuck on a poster frame. ``` ### Caveat The README says building from your own footage needs no key and no spend, but a full ffmpeg build is required for the encoding step to work. 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/nateherkai-scroll-craft/build-scroll-site-from-own-footage-codex/ ## How to generate scroll-page imagery and video with a KIE key with Scroll Craft Repo: [nateherkai/scroll-craft](https://github.com/nateherkai/scroll-craft) | Difficulty: Advanced | Time: 60 minutes | Basis: From the README Add KIE_AI_API_KEY so the agent can generate scroll-page assets instead of using only your own media. **Who it is for:** A studio that needs imagery or video for a scroll page and has no existing footage to use. **The problem:** Some scroll pages need hero visuals and camera-move footage that do not exist yet. **The outcome:** Generated assets for the page, produced through the skill's kie script, with the key kept out of source files. ### Steps 1. Copy `.env.example` to a local env file and add your `KIE_AI_API_KEY` there 2. Run `node plugins/nateherk-design/skills/scroll-craft/scripts/doctor.mjs` to confirm the setup 3. Run the generation script at scripts/kie.mjs with the asset prompts from your brief (inferred, check the README) 4. Note that a ten-leg continuous-world flight is a real spend, and check the cost before running a long generation ### Prompt to paste into your agent ```text Using the scroll-craft skill in the nateherkai/scroll-craft repo, generate the hero assets for using KIE_AI_API_KEY from the local env file. Expected output: generated image and video files for the page. Verify that the key is read from the environment and never written into HTML or committed files. ``` ### Caveat The README says generated video is not free, so budget for spend before running a long continuous-world flight. Risk, credentials: The generation route needs a KIE_AI_API_KEY, so keep it in a local env file and never paste it into prompts or commit it. 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/nateherkai-scroll-craft/generate-scroll-assets-with-api-key/ ## How to check a scroll page for dead scroll and unreadable text with Scroll Craft Repo: [nateherkai/scroll-craft](https://github.com/nateherkai/scroll-craft) | Difficulty: Intermediate | Time: 30 minutes | Basis: From the README Run the headless verification pass to find dead scroll, faded cues, and low-contrast lines. **Who it is for:** A developer or designer who has a scroll page built and needs proof that it works in a real browser before launch. **The problem:** A page can look right in a screenshot but still have scroll that changes nothing, cues that never fully appear, or text that fails contrast over the moving background. **The outcome:** A report that lists dead scroll, cues that never reach full opacity, contrast results per line, and stuck video legs, plus a contact sheet. ### Steps 1. Run `node plugins/nateherk-design/skills/scroll-craft/scripts/doctor.mjs` to confirm playwright-core and Chrome are found 2. Run the verification script at scripts/shoot.mjs against the built page (inferred, check the README) 3. Read the report for dead scroll and for cues that never reach full opacity 4. Check the per-line contrast results, then open the contact sheet to judge whether the page means what it should ### Prompt to paste into your agent ```text Using the scroll-craft verification tools in the nateherkai/scroll-craft repo, check the built page at at every scroll position. Expected output: a report listing dead scroll, faded cues, contrast failures per line, and any video leg stuck on a poster frame, plus a contact sheet. Verify that every reported contrast failure is listed with its line of copy. ``` ### Caveat The README states that a machine can prove a page works but cannot tell you it means anything, so the contact sheet still needs a human look. 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/nateherkai-scroll-craft/verify-scroll-page-for-dead-scroll-and-contrast/