🎬

Download the Skill (ZIP)

Playbook, scripts & front-end engine — free, no signup. Bring your own key.

⬇ DOWNLOAD SKILL

What This Is

This is the actual Claude skill behind those cinematic, scroll-driven product pages — the kind where a product film plays out frame-by-frame as you scroll (the technique Apple uses for the AirPods pages), then flows straight into a full brand homepage below it.

You drop the folder into your Claude skills directory, give Claude a product brief — real or invented — and it does the whole thing: storyboards the scroll, generates the stills and video clips with AI, slices them into scrubbable frames, and assembles a complete, hostable website in one continuous scroll story. It's not a polished SaaS — it's the real working skill, shared as-is.

What It Does

🎞️

Scroll Film

An AI product film sliced into ~400 frames, scrubbed on a canvas by scroll position.

🖼️

Higgsfield Stills

Cinematic hero stills via the Soul model, anchored so every clip stays consistent.

🎥

Kling Clips

Chapter clips via Kling v2.1 image-to-video, chained frame-to-frame for continuity.

🏗️

Full Brand Page

Manifesto, story, craft, specs, gallery, CTA, sticky nav & footer — one scroll.

⚡

Two Architectures

Zero-build vanilla scroll-film, or a GSAP / Next.js hybrid with pinned sections.

🚀

Serve & Deploy

Runs locally out of the box, with an optional one-command GitHub Pages deploy.

What's Inside the ZIP

Skill & Docs
  • SKILL.md playbook
  • vanilla-film reference
  • gsap-nextjs reference
  • brand-page + prompts + deploy
Scripts
  • hf.py — Higgsfield + Kling
  • build_master.py — frame slicer
  • extract.py — sequence tool
  • .env template (no keys)
Front-end Engine
  • scrubber-index.html
  • scrubber-main.js
  • brand-sections.html
  • useFrameSequence.ts + SmoothScroll.tsx

What You'll Need

Claude does the creative work, but it all runs on your own machine and accounts — so you control usage and cost.

  • Claude Code (or an agent that runs SKILL.md skills).
  • Python 3, ffmpeg, and Pillow installed.
  • A Higgsfield API key (HF_KEY) — powers the AI stills and Kling video clips (paid credits).
  • Some comfort with the terminal — Claude walks you through the rest.
🔑 No keys included

This download was scrubbed before publishing — the only .env inside is a placeholder (HF_KEY=your_higgsfield_api_key_here). No real keys, tokens or secrets. Add your own Higgsfield key.

How to Use It

Two minutes of one-time setup, then you drive the whole thing in plain English. Here's the entire flow.

⚙️ First-time setup (once)
  1. Unzip and drop the scroll-site-generator folder into your Claude skills directory — ~/.claude/skills/. Restart Claude Code so it loads the new skill.
  2. Open scroll-site-generator/.env and paste your Higgsfield key in key:secret form — for example HF_KEY=abc123:def456. (Grab the key & secret from your Higgsfield account.)
  3. Install the tools it uses: pip install pillow higgsfield_client, and make sure ffmpeg is installed (brew install ffmpeg on Mac).
🎬 Every time you want a site
  1. Describe your product to Claude. Give it the product, a few scroll beats, a vibe and a brand name — anything you leave out, it invents tastefully. (Copy-paste an example below.)
  2. Pick the hero. Claude generates a few hero stills first — this is the cheap step. Choose your favourite; every video clip is anchored to it so the product stays consistent, no morphing.
  3. Let it build. It animates each chapter with Kling, slices the film into ~400 scrubbable frames, wires them to scroll, then continues the scroll into a full brand homepage.
  4. Review & ship. Claude serves the site locally and opens it in your browser. Ask for tweaks, regenerate any single clip you don't like, or have it deploy to GitHub Pages.

How It Works Behind the Scenes

You don't need to touch any of this — but here's the pipeline Claude runs for every build:

🗺️

1 · Storyboard

Maps your brief onto 5–8 scroll chapters, one visual idea each.

🖼️

2 · Hero Still

Generates the anchor image with Higgsfield's Soul model — you approve it.

🎥

3 · Chapter Clips

Kling animates each beat, each clip chained to the last so state carries over.

🎞️

4 · Frame Slicing

Concats the clips and slices ~400 lightweight WebP frames.

📜

5 · Scroll Engine

Wires the frames to scroll position on a canvas, with captions per chapter.

🏛️

6 · Brand Page

Continues below the film into manifesto, specs, gallery, nav & footer.

Example Briefs You Can Paste

Copy one, swap in your own product, and send it to Claude. These show the level of detail that works well — a product, a few beats, and a vibe.

☕ Coffee machine · vanilla scroll-film

"Make an Apple-style scroll site for AURUM One, a premium espresso machine. Beans fall into the hopper, the machine assembles itself piece by piece, then espresso pours into a glass. Vibe: matte black + brass, near-black background, huge tight type."

📷 Camera · cinematic

"Build a scroll-driven product page for OBSCURA M, a full-frame camera. Lens elements float apart, the sensor is revealed, then everything reassembles. Dark, cinematic, generous negative space."

👟 Sneaker · GSAP / Next.js hybrid

"Create a GSAP scroll site for a running sneaker. Exploded view of the layers, an energy pulse runs through the sole, then it comes together. Neon accent on black, pinned sections with spec labels."

💡 Tips for the best result

• Get the hero still right before any video — it's cheap, and every clip inherits it.
• Keep every still the same aspect ratio so the clips match seamlessly.
• Each clip costs Higgsfield credits — a typical site is a few stills + 5–8 clips, so keep an eye on your balance.
• Any single clip can be regenerated on its own — you never have to rebuild the whole site.

🤖 Claude Skill 🎨 Higgsfield 🎥 Kling v2.1 ⚙ GSAP / Next.js 🔓 Bring Your Own Key 💸 Free
📥

Grab the Whole Skill

Playbook, scripts & front-end engine — 32 KB ZIP, free.

⬇ DOWNLOAD SKILL

Frequently Asked Questions

What exactly is the Scroll-Site Generator?
It's a Claude skill — a SKILL.md playbook plus scripts and front-end assets — that turns a short product brief into a cinematic, Apple-style scroll website: an AI-generated product film that scrubs frame-by-frame as you scroll, flowing into a full brand homepage with manifesto, story, specs, gallery, nav and footer. You drop it into your Claude skills folder and ask Claude to build a scroll site.
Do I need to know how to code?
You need Claude Code (or an agent that runs SKILL.md skills) and some comfort with the terminal. Claude does the heavy lifting — storyboarding, generating stills and clips, slicing frames and assembling the site — but you'll install Python, ffmpeg and Pillow, add your API key, and run a local server. If you can follow setup steps, you can use it.
Which API keys do I need?
Just one: a Higgsfield API key (HF_KEY), used for the AI stills (Soul model) and the Kling image-to-video clips. Those are paid credits — a typical site uses a handful of stills and 5–8 clips. Everything else (frame slicing, the website itself, hosting) is free and runs locally.
Are any of your API keys included in the download?
No. The package was scrubbed before publishing — the only .env inside is a placeholder (HF_KEY=your_higgsfield_api_key_here). There are no real keys, tokens or secrets. You add your own Higgsfield key.
What does it actually produce?
A complete, ready-to-host website: either a zero-build vanilla scroll-film (canvas frames scrubbed by scroll) or a GSAP/Next.js hybrid with pinned sections. Below the film it builds a full brand homepage in the same design system. You can serve it locally or deploy to GitHub Pages.
Can I use it for my own products or clients?
Yes. It's meant to be customized — swap the product, brand colors, copy and scroll beats. Use it for your own launches or client work freely.
claude-skill scroll-animation apple-style gsap higgsfield free-download