Scrollcraft: A Claude Code Skill That Builds Cinematic Scroll-Driven Websites

By Prahlad Menon 4 min read

Most AI-generated websites fail in predictable ways. They’re either “well behaved and forgettable” or flashy scroll-animation disasters with unreadable body text, headlines that wrap to six lines on mobile, and the same six sections every other AI page has.

Scrollcraft is a Claude Code skill built to fail neither way. It treats interaction design and craft as one job rather than two — and it’s opinionated enough to argue with you about your design choices.

What Makes It Different

Scrollcraft isn’t a template system. It’s a design methodology encoded as a Claude Code skill that enforces real constraints:

Eight mutually exclusive page grammars:

  • Filmic one-shot
  • Chaptered editorial
  • Live surface
  • Continuous world
  • Typographic poster
  • Gallery
  • Split stage
  • Rhythmic cutlist

Each grammar forbids what the others require, so two builds physically cannot converge into the same layout.

A fingerprint gate: Every new build must differ from your previous pages on at least 4 of 6 dimensions: grammar, navigation model, hero treatment, act shape, close, and signature move. Fail it and you change the plan — the skill won’t let you repeat yourself.

A required signature move: Every build must invent one bespoke interaction that exists on that site alone. A recolored spotlight doesn’t count.

The Design Floor

This is where Scrollcraft gets opinionated. It enforces a typography and spacing system that most AI tools ignore:

  • Two font families maximum
  • Tracking that tightens as size grows
  • 45 to 75 character measure
  • Line height inverse to measure
  • Light-on-dark text compensated on three axes
  • 4px spacing base with actual rhythm
  • More space above headings than below
  • Fluid section padding (phones don’t inherit desktop air)

The refuse list is telling — Scrollcraft actively blocks:

  • Identical feature-card grids
  • 01 / 06 counters
  • Scroll cues
  • Gradient text
  • Em dashes
  • Invented statistics
  • Fake dashboards
  • AI-purple gradients
  • The cream-and-brass “artisan” palette every craft brand defaults to

It Checks Its Own Work

A headless browser walks the finished page at every scroll position and reports:

  • Dead scroll: scroll that changes nothing on screen
  • Faded cues: copy that never reaches full opacity
  • Contrast failures: measured on the composited page, per line, at the brightest frame that passes under it
  • Stuck video: clips that silently never decoded (looks like a paused film but isn’t)

Then it generates a contact sheet — because a machine can prove a page works but can’t tell you it means anything.

Three Builds, Three Different Pages

The repo showcases what “no shared skeleton” actually means:

Orrery (travel practice): One unbroken world. The whole page is a single fixed stage — you fall into a handmade scale model of Earth, land in Kyoto, cross to Patagonia and the Sahara, and rise back to the workbench you started on. No section boundaries anywhere.

PERKFORM (protein coffee): A filmic one-shot that hard-cuts to two full-bleed inverted grounds mid-page. Loud, product-forward, the only one that raises its voice.

Fallowbank (landscape design studio): Quiet, documentary, restrained. Museum-label copy over real photography, a close that’s a line of running text rather than a button.

Same skill, same engine, completely different page grammars.

Installation

/plugin marketplace add nateherkai/scroll-craft
/plugin install nateherk-design

Then invoke it:

/nateherk-design:scrollcraft

Or describe what you want and let Claude figure it out.

Requirements:

  • Node 18+
  • A full ffmpeg build (not the stripped versions some toolchains include)
  • playwright-core + Chrome for verification
  • KIE_AI_API_KEY only if you want generated assets (building from your own photos/footage needs no key)

Honest Limitations

The author is refreshingly direct:

  • Only ever tested on Windows (macOS/Linux paths exist but untested)
  • Generated video isn’t free — a ten-leg continuous-world flight is real spend
  • It’s opinionated on purpose — it will refuse layouts and palettes that make AI pages recognizable, and it will argue with you about your peak

That last point is the whole thesis: if you want a page that looks like everything else, this is the wrong tool.

Why This Matters

The Claude Code skill ecosystem is maturing fast, and Scrollcraft represents a different approach than most AI design tools. Instead of maximizing flexibility, it maximizes taste — enforcing constraints that prevent the convergent evolution that makes AI output recognizable.

The fingerprint gate alone is worth studying. Most AI tools let you generate infinite variations that are all secretly the same layout with different colors. Scrollcraft tracks what you’ve built and structurally prevents repetition.

1,000+ stars in five days suggests developers are hungry for AI tools that have opinions.

Links:

  • GitHub
  • CHANGELOG — worth reading for the design archaeology
  • License: MIT