scroll-craft
Claude Code skill for premium scroll-driven websites. Scroll becomes the timeline, on a real design floor, verified by screenshotting its own scroll.
What is it?
What it is
A Claude Code skill that builds premium, scroll-driven websites with rigorous design standards, featuring three distinct page grammars (Orrery, PERKFORM, Fallowbank) and a fingerprint gate system to ensure each build differs significantly from previous ones.
Why it exists
To solve the common failure modes of AI-generated websites—either forgettable and well-behaved OR flashy but generic—the skill treats interaction and craft as inseparable goals, providing high-quality, non-generic scroll experiences with strict design constraints.
Who should use it
Developers and designers using Claude Code who want premium, scroll-driven websites with a focus on craft and uniqueness. Ideal for building high-end landing pages, product showcases, portfolio sites, and creative portfolios. Best suited for teams with design standards who want to avoid generic AI-generated aesthetics and are willing to invest time in understanding the methodology.
Who should avoid it
Beginners with no development or design background, anyone seeking a quick drag-and-drop website builder, users who want simple static HTML pages, or those unwilling to set up Node.js, ffmpeg, and playwright dependencies. Not suitable if you want a hands-off approach or prefer to work without command-line tools.
Stars over time
No change stars in the last 1 day
How it works
A quick walkthrough in plain English
How scroll-craft works
Step 1 of 3
You interact with it
Open scroll-craft, send a request, or connect it to your stack.
Features
Advantages
- Delivers consistently high‑quality, scroll‑driven sites that stand out from typical AI output
- Enforces uniqueness across projects via the fingerprint gate and diverse grammars
- Built‑in verification catches functional bugs before deployment
- Flexible asset handling – use your own media for free or generate with AI when needed
- Strong design floor guarantees typographic, colour, spacing and depth consistency
- Opinionated refusal prevents low‑effort, generic layouts
- Seamless integration as a Claude Code plugin
- Provides three fully worked examples (Orrery, PERKFORM, Fallowbank) covering continuous world, filmic product, and documentary styles
Disadvantages
- Only officially supported on Windows; macOS/Linux may need environment overrides
- Heavy dependency stack: Node 18+, full ffmpeg, Chrome + playwright‑core, optional AI key
- Generated video (especially continuous‑world flights) can be costly
- Very opinionated design rules may reject desired layouts or branding
- Complex setup and preflight checks can be intimidating for quick prototypes
- Limited to scroll‑driven interactions; not a general‑purpose website builder
- Requires strict adherence to the fingerprint gate, which can constrain iteration
Installation
cloud
/plugin marketplace add nateherkai/scroll-craft /plugin install nateherk-design /nateherk-design:scrollcraft
native
claude --plugin-dir ./plugins/nateherk-design; node scripts/doctor.mjs; node scripts/workspace.mjs --ensure
FAQ
How do I install scrollcraft?
Install it as a Claude Code plugin by running `/plugin marketplace add nateherkai/scroll-craft` or `/plugin install nateherk-design`, then activate with `/reload-plugins` if prompted. You can also run it locally for development using `claude --plugin-dir ./plugins/nateherk-design`.
What are the system requirements?
You need Node.js 18+, a full ffmpeg build (not a stripped version), and `playwright-core` with Chrome installed in the build folder. If you want AI-generated assets, you'll also need a `KIE_AI_API_KEY`. Run `node scripts/doctor.mjs` first to check for missing dependencies.
Can I use my own photos and videos instead of generating assets?
Yes. Building from your own assets is a first-class route and costs nothing. The `KIE_AI_API_KEY` is only required if you want to generate new video or images. Point the skill at your existing media and it will encode and integrate them.
How does scrollcraft prevent me from making similar-looking sites?
It uses a fingerprint gate. Every new build must differ from all your previous builds on at least 4 of 6 dimensions: grammar, navigation, hero, act shape, close, and signature move. Your registry starts empty, so your first build has no constraints, but every build after must pass this uniqueness check.
What are the eight page grammars I can choose from?
The eight mutually exclusive page grammars are: filmic one-shot, chaptered editorial, live surface, continuous world, typographic poster, gallery, split stage, and rhythmic cutlist. Each grammar forbids what the others require, ensuring diverse output.
How does the verification process work?
A headless browser walks the finished page at every scroll position, waits for video playheads to settle, and checks for dead scroll, cues that never reach full opacity, contrast issues on composited pages, and videos that silently fail to decode. It then generates a contact sheet report.
Featured in Videos
YouTube tutorials and walkthroughs for scroll-craft
Alternatives
Similar projects ranked by category, topics, and text overlap.
