scroll-attached-websiteScroll attached website for Claude

What you get

• A scroll driven hero: a full screen canvas that plays AI generated video frames in step with the scroll.

• Three AI generated assets: the product image, its transformed state (exploded, cross section or ingredients) and the 10 second video between them.

• A complete Next.js site: Features, Specs and closing sections with real copy, one brand accent colour, responsive down to phones.

• One config file for all content: so changing the copy never touches the scroll engine.

How it works

1. 1

   Tell Claude the product, plus a brand colour and real specs if you have them.

2. 2

   Claude generates the product image, the transformed version and the video with Higgsfield. The video takes 10 to 15 minutes.

3. 3

   It extracts the video frames and sets up the site from the template.

4. 4

   It writes the copy and specs into the config file.

5. 5

   It runs the site locally and checks the scroll animation frame by frame.

Privacy and safety

• Images and video are generated through your own Higgsfield account, and its credits are used there.
• Everything else runs on your machine. Nothing is published until you deploy the site yourself.

Requirements

• Claude Code, since the skill builds and runs a website.
• The Higgsfield MCP connected, ffmpeg installed, and Node.js.