Scroll Cinematic Claude banner
zubair-trabzada zubair-trabzada

Scroll Cinematic Claude

Development community

Description

Award-winning 3D scroll websites from ONE prompt — Claude Code + Higgsfield MCP. Generates cinematic hero shots & 3D clips (360° spins, fly-throughs, explosions), slices them into scroll-scrubbed frames, and builds a polished branded site. Works for any product, portfolio, contractor, restaurant or agency. One-command install.

Installation

This entry records only its repository, not the path inside it, so there is no exact command to give. Open the source below and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

README

🎬 Scroll-Cinematic — 3D Scroll Websites for Claude Code

![3D scroll websites built with one prompt — sneaker, hot sauce, and wellness sites generated by this skill](assets/banner.jpg) *Three real sites built by this skill with one prompt each — every visual AI-generated, every scene scroll-scrubbed in 3D.*

Build **award-winning "3D scroll" websites from ONE prompt** — for any product, portfolio, contractor, restaurant, agency, or brand.

Claude Code + the **Higgsfield MCP** generate a cinematic hero shot and 3D clips (360° spins, fly-throughs, explosions, reveals), slice them into scroll-scrubbed frames, build a polished branded multi-section site with buttery smooth scrolling, and launch it on localhost — all from a single prompt.

The viral "3D scroll" effect (Apple product pages, Awwwards sites) isn't Three.js — it's a **canvas image-sequence scrub**. This skill automates the entire pipeline.


⚡ Install (one command)

mkdir -p ~/.claude/skills && git clone https://github.com/zubair-trabzada/scroll-cinematic-claude.git ~/.claude/skills/scroll-cinematic

Then **restart Claude Code** so it picks up the skill. That's it.

Already installed? Update with:

cd ~/.claude/skills/scroll-cinematic && git pull

✅ Requirements

What Why How
Claude Code runs the skill claude.com/code
Higgsfield MCP + credits generates the images & 3D clips (~$1–2/site) in Claude Code: /mcp → Add server → paste your Higgsfield MCP link
ffmpeg slices clips into frames auto-installed by the skill — nothing to do

Check the MCP is connected: type `/mcp` in Claude Code → `higgsfield` should be green.


🚀 Use it (the one prompt)

Open a **new Claude Code session** and paste — swap the bracket for anything:

Use the scroll-cinematic skill to build a 3D scroll website for [WHATEVER IT IS].
Generate a high-end cinematic hero plus two 3D clips