Build Distinctive Scroll-Driven Websites with Scrollcraft and Claude Code

What is Scrollcraft?

Scrollcraft is a Claude Code skill for building premium, scroll-driven websites while enforcing a consistent standard of design craft. It treats interaction, visual direction, typography, spacing, color, depth, and verification as parts of the same process.

Rather than repeatedly generating a familiar sequence of hero, feature cards, testimonials, and call-to-action sections, Scrollcraft begins by choosing a page grammar. That grammar determines how the experience moves, how it is navigated, and which familiar patterns it must avoid.

The skill can make video scrub frame by frame as the reader scrolls, pin scenes while an argument develops, move horizontal rails, assemble headlines line by line, shift the page ground, and respond to pointer movement. Every build must also introduce a bespoke signature interaction that belongs to that site.

How Scrollcraft keeps builds distinct

Scrollcraft offers eight mutually exclusive page grammars:

• Filmic one-shot: A continuous, cinematic presentation.
• Chaptered editorial: A structured sequence of editorial chapters.
• Live surface: A responsive surface driven by interaction.
• Continuous world: One fixed stage with no visible section seams.
• Typographic poster: A composition led primarily by type.
• Gallery: An experience organized around visual works.
• Split stage: A divided presentation with coordinated content areas.
• Rhythmic cutlist: A sequence shaped through deliberate visual cuts.

These are not interchangeable themes. Each grammar requires some structural choices and forbids others, reducing the chance that separate projects quietly converge on the same skeleton.

PERKFORM demonstrates the filmic, product-forward direction. It uses a one-shot presentation and hard cuts into full-bleed inverted grounds rather than relying on a conventional stack of sections.

Fallowbank shows how the same skill can produce a restrained documentary treatment, using museum-label copy over photography and ending with running text instead of a standard button.

The fingerprint gate

After the first project, every new build is compared with your previous work. It must differ on at least four of six dimensions: grammar, navigation, hero, act shape, close, and signature move. If it fails, the plan must change instead of weakening or rewriting the record.

The first build does not need to clear an existing fingerprint because the registry begins empty. This is intentional: the gate is designed to stop you from repeating your own work.

Design and interaction standards

Before defining individual acts, Scrollcraft creates a feeling curve. Each act receives an intended emotion and an on-screen cause. If two adjacent acts produce the same feeling, one may be unnecessary.

The page is then organized around one engineered peak. That moment receives the largest asset budget, enough silence before it, and sufficient scroll distance. This applies the peak-end rule directly rather than treating every section as equally dramatic.

Craft rules

• Typography: No more than two font families, controlled tracking, a measure between 45 and 75 characters, and line height adjusted in relation to measure.
• Spacing: A 4px base scale, more space above headings than below them, and fluid section padding that adapts to smaller screens.
• Color: Six roles and one accent, tinted secondary text, no pure black, and support for deliberate cuts between light and dark grounds.
• Depth: Offset shadows, edge light, scale and blur, overlap, and grain are treated as distinct tools.
• Brand compliance: Rules from an supplied brand kit override Scrollcraft defaults, including restrictions that prohibit techniques the skill might otherwise choose.

The skill also refuses common AI-generated design shortcuts, including identical feature-card grids, decorative counters, generic scroll cues, gradient text, invented statistics, fake dashboards, AI-purple gradients, and the default cream-and-brass craft-brand palette.

Install the Claude Code plugin

Add the plugin marketplace, then install the design plugin:

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

If Claude Code reports Run /reload-plugins to activate., run that command before continuing.

You can invoke Scrollcraft directly with:

/nateherk-design:scrollcraft

You may also use the skill by describing the scroll-driven site you want in Claude Code. The direct command is useful when you want to start its procedure explicitly.

Develop without installing

To inspect or modify the skill repository locally without installing it as a plugin, launch Claude Code with the plugin directory:

claude --plugin-dir ./plugins/nateherk-design

Check the requirements

Scrollcraft depends on several local tools. Confirm these before beginning a build:

• Node.js 18 or newer: Required by all included scripts.
• A full ffmpeg build: Used to encode clips so they scrub correctly instead of playing normally. Stripped builds may omit essential filters such as scale.
• playwright-core and Chrome: Used by the browser-based verification pass.
• KIE_AI_API_KEY: Optional and needed only when generating assets. Projects made with your own photographs or footage do not require the key.

Install playwright-core inside the build folder so module resolution occurs from the correct location:

npm i playwright-core

If Scrollcraft cannot locate the correct executables, SCROLLCRAFT_FFMPEG and SCROLLCRAFT_CHROME can override its searches.

Scrollcraft has only been used for completed builds on Windows. Its scripts search common Windows, macOS, and Linux locations, but the README does not claim that a build has been completed on macOS.

Run the preflight and create a workspace

Run the diagnostic script before anything else. It reports missing or incompatible dependencies that could otherwise produce misleading failures later.

node scripts/doctor.mjs

This check is particularly important because a stripped ffmpeg binary may report a missing filter as a syntax error, a missing WebP muxer may look like a filename problem, and playwright-core may resolve from the wrong directory.

After the preflight passes, create the workspace and its empty fingerprint registry:

node scripts/workspace.mjs --ensure

How the workspace is selected

Scrollcraft resolves the workspace in the following order, stopping at the first match:

1. The path stored in SCROLLCRAFT_HOME.
2. The workspace named by the nearest .scrollcraft.json found while walking upward from the current directory.
3. The scrollcraft directory under the project root.

A workspace configuration file has this form:

{ "workspace": "path/to/builds" }

Builds are written under <workspace>/builds/<name>/, while the fingerprint registry is stored at <workspace>/FINGERPRINTS.md.

Create your first project

Once the plugin is active and the workspace exists, invoke Scrollcraft:

/nateherk-design:scrollcraft

Describe the site, its subject, the assets available to you, and any applicable brand rules. You can take the generated-asset route when a KIE_AI_API_KEY is configured, or use your own photographs and footage without generation costs. Using existing assets is a first-class workflow rather than a fallback.

The skill follows a procedure that covers interviewing, selecting a grammar, scoring the concept, building the page, and verifying the result. Its references also define feeling curves, scroll devices, continuous-world construction, art direction, asset preparation, and design standards.

Respect the selected grammar

Do not treat the chosen grammar as a visual preset. A continuous-world project, for example, should behave like one fixed stage without section seams. A chaptered editorial project follows a different structure and navigation model. Mixing their required patterns would undermine the mechanism used to keep projects distinct.

Plan one signature move

Every site must include a bespoke interaction that exists on that project alone. A simple recoloring of a spotlight does not qualify. The move should follow from the subject and experience instead of being added as generic decoration.

Use the engine correctly

The most important implementation rule is that the engine is never edited per project. It provides the mechanism shared across builds, not a configurable page generator.

For each project:

1. Theme the engine with six color tokens and no more than two fonts.
2. Write semantic HTML specifically for the site.
3. Use the engine-published --sc-p custom property to drive bespoke behavior.
4. Keep project-specific layout and interactions outside the shared engine.

Avoid building the whole page at runtime from a configuration object. According to Scrollcraft's design philosophy, that abstraction is precisely what causes sites made with one system to look alike.

Understand the verification pass

Scrollcraft uses a headless browser to inspect the completed page at every scroll position. For video-driven experiences, it waits for the playhead to settle before evaluating the frame.

The verification process reports:

• Dead scroll: Scroll distance that changes nothing visible on screen.
• Incomplete cues: Text or other cues that never reach full opacity.
• Composited contrast failures: Contrast is checked per line against the brightest frame that passes beneath it, with the direction selected for light-on-dark or dark-on-light text.
• Undecoded clips: Video that remains stuck on a poster frame and can otherwise look like an intentionally paused film.

The process also creates a contact sheet for human review. Automated checks can establish that the page functions, but they cannot determine whether the experience is meaningful or emotionally effective.

Advanced workflow tips

Keep the fingerprint registry honest

Do not prefill the registry from the included examples. The repository's EXAMPLES.md illustrates what a populated registry looks like and which shapes tend to collide, but it is not a set of constraints. Record your own projects and redesign any new concept that fails the four-of-six uniqueness requirement.

Allocate resources to one peak

Resist the urge to make every scene equally intense. Reserve the strongest asset, longest scroll interval, and clearest lead-in for one peak. Multiple competing peaks weaken the overall curve.

Design responsive rhythm deliberately

Use the 4px spacing foundation without transferring desktop-sized gaps directly to a phone. Keep heading relationships clear, maintain readable line lengths, and compensate light text on dark backgrounds through more than a single color adjustment.

Prefer diagnostic overrides to guesswork

If the wrong ffmpeg or Chrome installation is detected, set SCROLLCRAFT_FFMPEG or SCROLLCRAFT_CHROME explicitly. Then rerun doctor.mjs rather than debugging later encoding or browser errors in isolation.

Read the project history

The repository's CHANGELOG.md records what failed during builds and the design or engineering rule created in response. It is useful as a source of operational lessons rather than merely a feature history.

Limitations to consider

• Completed builds have only been run on Windows, despite scripts searching common locations on other platforms.
• Generated video can incur meaningful costs, especially for a continuous-world flight with many legs.
• The skill is intentionally opinionated and may reject familiar layouts, palettes, or a weakly defined peak.
• Automated verification cannot judge whether the finished page has meaning, so the contact sheet still needs human review.

Conclusion

Scrollcraft combines a scroll interaction engine with a disciplined design procedure. Start by installing the Claude Code plugin, running the preflight, and creating a workspace. Then choose a grammar, define a feeling curve and one peak, create a unique signature move, and let the verification pass expose mechanical problems. Keep the shared engine untouched so each project's semantic structure and art direction remain genuinely distinct.