# Scroll-Driven Landing Pages

Builds scroll-driven landing pages for brands with planned motion and responsive layouts.

- Repository: https://github.com/nateherkai/scroll-craft (4361 stars)
- Category: Design
- License: MIT
- Last updated: 2026-09-30
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add nateherkai/scroll-craft --skill scroll-craft -g -a claude-code -y`
Codex: `npx skills add nateherkai/scroll-craft --skill scroll-craft -g -a codex -y`
Cursor: `npx skills add nateherkai/scroll-craft --skill scroll-craft -g -a cursor -y`
Gemini CLI: `npx skills add nateherkai/scroll-craft --skill scroll-craft -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add nateherkai/scroll-craft`

## Description

Build premium scroll-driven landing pages for service, product, food, and drink brands. Plan the visitor journey, page grammar, emotional peak, and bespoke signature move. Create dimensional heroes with independent visual planes, restrained motion, and separate mobile composition. Use supplied photos and footage or generate photoreal assets through kie.ai, write semantic HTML, and verify desktop, mobile, and reduced-motion scroll states visually. Use for "scrollcraft", "scroll craft", "layered hero", "premium hero", "cinematic hero", "scrollytelling", "scroll animation site", "a site where scrolling plays a video", "Apple-style landing page", "3D scroll world", "interactive landing page", "make my brand a scroll experience", "this looks like a template", or requests for a distinctive website that feels like an experience rather than a document.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# scroll-craft

Scroll is the only input every visitor already knows how to use. This skill
treats it as a timeline: the wheel is a scrubber, the page is a film with real
text on top, and each section behaves differently enough that the visitor keeps
going to find out what the next one does.

**What you produce:** an interview brief, a page grammar, a customer-journey map,
a feeling curve with one engineered peak, a scroll score, one signature move,
generated assets, one real HTML page on a token-driven design floor, and a strip
of screenshots proving it holds up at every scroll position.

## What this is not

It is not "generate a flythrough and drop text on it." That approach produces
one device applied to a whole page, and every site built that way is
recognisable at a glance: same claymation diorama, same centred copy, same
`01 / 06` counter, same "scroll to explore" nudge. Five sections that behave
identically are one section shown five times.

Four rules follow from that, and they are the spine of this skill:

The rest: https://github.com/nateherkai/scroll-craft/blob/HEAD/plugins/nateherk-design/skills/scroll-craft/SKILL.md