
获奖3D卷轴网站,来自ONE PROMPT — Claude Code + Higgsfield MCP。生成电影级英雄镜头和3D片段(360°旋转、飞越、爆炸),切割成滚动刷洗......
概览
三个真实的网站由这个技能搭建,每个网站都有一个提示——每个视觉 AI 生成,每个场景都被 3D 滚动刷洗。 构建——适用于任何产品、作品集、承包商、餐厅、代理机构或品牌。 Claude Code + 生成电影级英雄镜头和3D片段(360°旋转、飞越、爆炸、揭示),将其切入滚动擦除的帧,构建一个精致的品牌多版块网站,滚动流畅如黄油般顺畅,并在本地主机上发布——所有这些都只需一个提示。 病毒式的“3D滚动”效果(苹果产品页面、Awwwards网站)不是Three.js——而是......这项技能自动化了整个流程。 然后它会学会技能。就这样。 检查MCP是否连接:在Claude代码中输入/mcp→Higgsfield应该是绿色的。 打开并粘贴——替换支架做任何东西: 想要控制?加上:“......用火药爆炸让它大胆多彩”或者“......暗色且奢华,缓慢飞越。”省略,克劳德挑选合适的。
概述(AI 翻译)
由这项技能建造的三个真实网站,每个网站都有一个提示——每个视觉都是AI生成的,每个场景都经过3D滚动清理。
用一个提示构建获奖的“3D滚动”网站——适用于任何产品、作品集, 承包商、餐厅、代理机构或品牌。
Claude Code + Higgsfield MCP 生成电影英雄镜头和 3D 片段 (360°旋转、飞越、爆炸、揭示),切入卷轴擦洗过的画面, 打造一个精致的品牌多版块网站,滚动流畅,然后上线 在localhost上——所有这些都来自一个提示词。
病毒式的“3D滚动”效应(苹果产品页面、Awwwards网站)并不Three.js—— 是画布图像序列清理。这个技能自动化了整个流程。
⚡ 安装(一个命令)
然后重启Claude代码,让它学技能。就这么简单。
已经安装好了吗?更新内容:
✅ 要求
| 什么 | 为什么 | 怎么做 |
|---|---|---|
| 克洛德代码 | 执行技能 | claude.com/code |
| Higgsfield MCP + 制作人员 | 生成图片和3D片段(~每站$1–2) | 用Claude代码:/mcp → 添加服务器 →粘贴你的Higgsfield MCP链接 |
本页由 AI 翻译,技术细节请以原文为准。
README
以下为原文 README 节选,完整内容请查看原文。
🎬 Scroll-Cinematic — 3D Scroll Websites for Claude Code
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 |
| 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 with the Higgsfield MCP at 1080p,
slice them into scroll frames, and build a polished, branded multi-section site that
matches its vibe — then launch it on localhost.
[WHATEVER IT IS] can be anything:
| Type | Examples | The 3D it gets |
|---|---|---|
| Products | hot sauce, smartwatch, sneaker, perfume | 360° spin + explode/reveal |
| Local business | contractor, HVAC, med spa, law firm | building fly-through + detail reveal |
| People | photographer portfolio, artist, coach | cinematic portrait / abstract motion |
| Hospitality | restaurant, hotel, gym, listing | dish 360° / interior fly-through |
| Companies | agency, SaaS, startup, course, event | logo morph + light-streak fly-through |
Want control? Add it: “…make it bold and colorful with a powder explosion” or “…dark and luxe with a slow fly-through.” Leave it out and Claude picks what fits.
⏱ A build takes ~10–15 min (AI video renders) and costs ~$1–2 in Higgsfield credits.
📦 What’s inside
推荐工具
换一个关键词,或者移除筛选条件。
安装
npx skillfish add zubair-trabzada/scroll-cinematic-claude