Scroll Scrub Starter — Design skill for Claude Code

scroll-scrub

**One command. Any video. Scroll-scrubbed microsite, live in 60 seconds.**

Apple AirPods-style scroll animation: scroll down to play forward, scroll up to play backward. The subject sits in a framed canvas floating over a graph-paper background (customizable) so the page scrolls visibly around it.

Two ways to use it:

• As an agent skill: works with Claude Code, Codex, Cursor, Copilot, Gemini CLI, Aider, Zed, Windsurf, and any other tool that reads SKILL.md / AGENTS.md. Drop a video in chat, get a live URL back.
• As a CLI: ./build.sh video.mp4 (project name auto-derived), then deploy the folder anywhere static.

Quickstart prompts

Once the repo is cloned or installed as a skill, these prompts work:

Turn `~/Downloads/clip.mp4` into a scroll-scrub microsite.

Build a scroll-scrub site from `~/Downloads/clip.mp4` with a dark blue background.

Use https://github.com/timkosters/scroll-scrub-starter to turn `~/Downloads/clip.mp4` into a scroll-scrub microsite.

The agent will run `build.sh` with sensible defaults (graph-paper background, 24fps, 1280px). Re-run with `--bg`, `--template`, or `--transparent` to customize.

Live examples

• video-scroll-0920.vercel.app: landscape video, graph-paper default
• video-scroll-bluecity.vercel.app: square video, minimal white
• ee26-blueprint.vercel.app: blueprint template + transparent background
• ljr-scroll.vercel.app: scroll-driven React animation (no pre-rendered frames)

Install as an agent skill

Claude Code (global install)

git clone https://github.com/timkosters/scroll-scrub-starter ~/.claude/skills/scroll-scrub

Next time you're in Claude Code, in any directory:

Turn `~/Downloads/clip.mp4` into a scroll-scrub site and deploy it.

Codex, Cursor, Aider, Gemini CLI, Copilot, Zed, Windsurf, etc. (per-proj