Claude Code: Scroll Video and 3D Sites with Higgsfield MCP

01Overview

Deliverables

The websites you see on YouTube where scrolling animates the entire screen, with video backgrounds and 3D, almost all use the same combination: Claude Code writes the frontend + AI-generated video assets + GSAP ScrollTrigger drives scroll animations. The reference video, "Claude Fable 5 Changed Web Design Forever," demonstrates this approach.

After completing this tutorial, you will have three things: a prompt list you can paste into Claude Code; Claude Code connected to Higgsfield, ready to generate video from natural-language instructions; and a webpage template that plays video as you scroll.

02Resources to copyPart A

Ready-to-use resources

Prepare these four types of resources first: principles, technology choices, prompts, and existing repos. Your later instructions to Claude Code will be more precise.

03Section

Inspiration and underlying principles

"Scroll video / 3D websites" covers several technologies with very different levels of complexity. Decide which one you need to avoid an overly complex implementation:

CSS 3D Transforms

Cards tilt on hover, and sections rotate as you scroll. Use perspective / transform without any framework. The cheapest option and the best value.

Scroll-Triggered Animation

Elements fade in, pin, and trigger in sequence as you scroll. The industry standard is GSAP ScrollTrigger. This is the key to adding motion to the page.

Scroll-Scrub Video

Video does not autoplay. It advances frame by frame with the scrollbar, as on Apple product pages. Part B of this tutorial implements it.

WebGL / Three.js

Actual 3D, including particles, geometry, and shaders. The strongest effects and the highest cost; pay particular attention to mobile performance.

04Section

Technology choices

GSAP + ScrollTrigger: required. The core of scroll animation. scrub:true binds animation to the scrollbar, and pin:true pins a section; these are the foundation of all scrollytelling. Free in most situations. https://gsap.com/docs/v3/Plugins/ScrollTrigger/
HTML5 <video> background. The fastest way to add depth: put a looping video in the hero. Key attributes: autoplay muted loop playsinline.
Lenis smooth scrolling: an enhancement. Adds inertia and smoothness to scrolling. Combined with ScrollTrigger, it immediately improves the visual quality. https://github.com/darkroomengineering/lenis
Three.js: optional. Actual 3D and particle fields. Claude Code can scaffold a basic scene from natural-language instructions. https://threejs.org/
Higgsfield MCP: video generation. Connects 30+ video models (Sora 2, Veo 3.1, Kling 3.0, Seedance 2.0…) to Claude Code, so you can generate background video with natural-language instructions. Used in Part B.

05Section

Prompt templates (ready to copy)

These are the most frequently used prompts in the workflow. English website-building prompts are the most reliable in Claude Code. Change the names and style to suit your project.

PROMPT 1 · Scaffold the entire page · Copy

Create a single-page landing page for a product called "Vela".
Hero: full-bleed looping video background (file: hero.mp4) with a centered headline + subheadline and a dark overlay for legibility.
Then a scroll-triggered section where three feature cards fade in and slide up 40px, staggered 0.15s.
Then a pinned "scrollytelling" section (300vh) where a hero video scrubs frame-by-frame as the user scrolls, driven by GSAP ScrollTrigger.
Then a horizontal-scroll product timeline.
Style: dark, cinematic, premium — near-black background, warm off-white text, one accent color.
Plain HTML/CSS/JS, load GSAP + ScrollTrigger via CDN.
Add a prefers-reduced-motion fallback and make it fully responsive.
Plan the architecture first, then build.

PROMPT 2 · Staggered card fade-ins · Copy

When the features section scrolls into view, animate each card: fade in and slide up from 40px below its final position, staggered 0.15s apart. Trigger when the top of the section hits 80% of the viewport height. Use GSAP ScrollTrigger.

PROMPT 3 · Pinned scrollytelling · Copy

Pin the demo section for a scroll distance of 300vh. As the user scrolls through it, sequence three beats evenly: (1) the dashboard mockup fades in, (2) a highlight ring appears on the key metric, (3) a results card slides in from the right. Use ScrollTrigger pin + scrub.

PROMPT 4 · Mouse-tracking 3D tilt · Copy

Add a mouse-tracking 3D tilt to the feature cards: tilt toward the cursor up to 15° on both axes, with a subtle specular highlight that follows the cursor. Use CSS perspective + a small JS handler. Disable it on touch devices.

06Section

GitHub repos & skills

anthropics/skills · frontend-design. Anthropic's official design-quality skill, specifically intended to avoid layouts that look obviously AI-generated. This tutorial's HTML follows its specifications. github.com/anthropics/skills · frontend-design/SKILL.md
Shubham-ly/video-scrub-scroll. A minimal working example that uses GSAP ScrollTrigger to seek through a video as you scroll. Cloning and modifying it is the fastest approach. github.com/Shubham-ly/video-scrub-scroll
GSAP video-scrub Gist (ksachikonye). A single-file gist showing how to bind video.currentTime to scrolling. gist.github.com/ksachikonye/8c01488f0841f440d809a14a7c59335f
CodePen · Control / Scrub Video (wisearts). An interactive online demo showing full-screen video using position:fixed + object-fit:cover. codepen.io/wisearts/pen/ExZGrbZ
greensock/GSAP. GSAP source code and type definitions; the authoritative source for ScrollTrigger parameters. github.com/greensock/GSAP
darkroomengineering/lenis. A smooth-scrolling library, essential for improving visual quality. github.com/darkroomengineering/lenis

07Section

Community discussions and further reading

Reference video: Claude Fable 5 Changed Web Design Forever ($10k website build). The reference video you supplied demonstrates the full workflow for building a high-quality website with Claude. youtube.com/watch?v=1UmjkWlqKe0
MindStudio: Build Animated 3D Websites with Claude Code. The most complete illustrated workflow, covering video backgrounds, staggered cards, pinned scrolling, and Three.js particles. Several parts of this tutorial draw on it. mindstudio.ai/blog/animated-3d-websites-claude-code-ai-video-generation
YouTube: I Built an Animated 3D Website in 10 Minutes with Claude Code. Another implementation-focused video, useful for observing pacing. youtube.com/watch?v=luh4Ov2LHZg
GSAP official forum: Video scroll animation. Discussions of scroll-scrub video stutter and mobile compatibility issues. gsap.com/community/forums/topic/32782-video-scroll-animation
claudefa.st: Higgsfield MCP from Claude Code. The clearest explanation of MCP connection, model selection, and asynchronous polling. claudefa.st/blog/tools/mcp-extensions/higgsfield-mcp
Higgsfield Discord. Ask about model updates, prompt techniques, and rerolling when IP filters block a generation. discord.gg/higgsfield

08Hands-onPart B

Video generation in Claude Code with Higgsfield MCP

This part completes three tasks: connect Higgsfield MCP to Claude Code, generate a background video with one instruction, and make the video play as you scroll. A ready-to-use prompt is included at the end.

09Section

Prerequisites

Claude Code installed. npm install -g @anthropic-ai/claude-code (on macOS, you can also use brew install anthropic-claude-code).
A Higgsfield account. Register at higgsfield.ai. The free quota is enough to get started, and registration does not require a credit card.
A local dev server and browser. npx serve or VS Code Live Server will work; debug with DevTools.

101

Higgsfield MCP connection

One command registers Higgsfield's MCP server in Claude Code over HTTP. Afterward, no API key or glue code is needed.

bash · Install (if not already installed) · Copy

npm install -g @anthropic-ai/claude-code

bash · Register the MCP server · Copy

claude mcp add --transport http higgsfield https://mcp.higgsfield.ai/mcp

The first time you call a Higgsfield tool, Claude prints an OAuth authorization URL. Open it in your browser, sign in with your Higgsfield account and authorize, then paste the authorization code back into the terminal. Tokens persist across sessions, so this is a one-time setup.

bash · Verify the connection · Copy

claude mcp list
# higgsfield: https://mcp.higgsfield.ai/mcp - ✓ Connected

112

Background video generation (Prompt sample)

Generate the video before writing code, because its colors will determine the page's palette and layout. Give Claude Code natural-language instructions.

PROMPT · Looping background video · Copy

Generate a 6-second seamless looping background video: slow-moving dark teal and violet fluid geometry, cinematic depth of field, high-contrast near-black background, no text, no faces, photorealistic lighting, 16:9. Use Seedance 2.0 fast. Then give me the download URL.

PROMPT · Hero video for scroll-scrub · Copy

Generate an 8-second cinematic clip for a scroll-scrubbed hero: a single sports car slowly rotating 360° on a dark reflective floor, volumetric light, locked camera, 16:9, no text. Use Kling 3.0. Keep the motion smooth and continuous from start to end so it scrubs cleanly with GSAP ScrollTrigger.

Webpage video compression

Large videos severely reduce performance. Use HandBrake or FFmpeg to convert to MP4 and compress below 5MB; a 1080p loop usually does not need to be larger. Also export a .webm version.

bash · FFmpeg compression example · Copy

ffmpeg -i hero_raw.mp4 -vf "scale=1920:-2" -c:v libx264 -crf 26 -preset slow -an hero.mp4

123

Two ways to implement scroll video

These effects have two implementation routes. Method A is an autoplay background video; Method B is scroll-scrub, where video advances frame by frame with the scrollbar. Most websites use both.

Method A · Autoplay full-screen background video

The simplest method with the best compatibility. Key attributes: autoplay, muted (required for autoplay in modern browsers), loop, and playsinline (required on iOS).

html · Background video structure · Copy

<section class="hero">
  <video class="hero-video" autoplay muted loop playsinline
         preload="auto" poster="hero-poster.jpg">
    <source src="hero.mp4" type="video/mp4">
    <source src="hero.webm" type="video/webm">
  </video>
  <div class="hero-content">
    <h1>Your Headline</h1>
  </div>
</section>

css · Full-bleed video + dark overlay (for readable text) · Copy

.hero { position: relative; overflow: hidden; }
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.hero::after {              /* Dark overlay; adjust to the video's brightness */
  content: ''; position: absolute; inset: 0;
  background: rgba(0, 0, 20, 0.55); z-index: 1;
}
.hero-content { position: relative; z-index: 2; }

Method B · Scroll-scrub video

This is the effect used on Apple product pages: video does not autoplay. Instead, video.currentTime is bound to scroll progress. Load GSAP and ScrollTrigger first:

html · Load GSAP (CDN) · Copy

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>

html · Structure (a taller wrapper provides scroll distance) · Copy

<div class="video-wrap" style="height: 300vh;">
  <video class="scrub-video" muted playsinline preload="auto" src="hero.mp4"></video>
</div>

js · Bind currentTime to scrolling · Copy

gsap.registerPlugin(ScrollTrigger);

const video = document.querySelector(".scrub-video");

// Wait for metadata before reading video.duration
video.addEventListener("loadedmetadata", () => {
  const tl = gsap.timeline({
    scrollTrigger: {
      trigger: ".video-wrap",
      start: "top top",
      end: "bottom bottom",
      scrub: true,     // Sync animation with scrolling
      pin: true        // Keep the video pinned while scrolling
    }
  });
  tl.fromTo(video, { currentTime: 0 }, { currentTime: video.duration });
});

css · Video fills the pinned section · Copy

.scrub-video {
  position: sticky; top: 0;
  width: 100%; height: 100vh;
  object-fit: cover;
}

134

Page assembly (Claude Code Prompt)

Give Claude Code the components described above to assemble in one pass. Put the generated hero.mp4 in the project folder, then use this prompt.

PROMPT · Assemble the full page · Copy

I've added hero.mp4 to the project. Build index.html + styles.css + main.js:
1) A hero with a full-bleed autoplay/muted/loop/playsinline video background + dark overlay + centered headline.
2) Right after the hero, a pinned 300vh section that scroll-scrubs hero.mp4 frame-by-frame using GSAP ScrollTrigger (bind video.currentTime to scroll, scrub: 0.5).
3) A features section with three cards that fade in + slide up, staggered 0.15s.
Load GSAP + ScrollTrigger via CDN. Add a prefers-reduced-motion fallback that hides the video and shows hero-poster.jpg. Make it fully responsive and test on mobile widths. Plan first, then build.

css · reduced-motion fallback · Copy

@media (prefers-reduced-motion: reduce) {
  .hero-video, .scrub-video { display: none; }
  .hero {
    background-image: url("hero-poster.jpg");
    background-size: cover;
  }
}

14Section

Animation verification

Start a local server and check each item:

bash · Copy

npx serve .
# Open http://localhost:3000

✓ What you should see

1. The Hero video autoplays, loops, and stays muted; overlay text is readable
2. Scrolling advances the pinned video frame by frame instead of autoplaying
3. The three cards fade in and move upward in order as they enter the viewport
4. Enable the system's reduced-motion setting and reload: the video becomes a static poster

15Section

Common errors and solutions

16Section

Next steps

For additional effects, you can train a fixed character or product with Soul Character to keep multiple videos visually consistent; replace the hero video with a canvas frame sequence (split the video into PNG frames and draw them individually) for smoother scrubbing and mobile compatibility; or overlay a Three.js particle field on the video. Test each added effect's performance on a phone before deciding to keep it.

Created on 2026-06-12 · Produced through the tutorial-builder workflow · Design follows Anthropic's frontend-design specifications.

Main sources: MindStudio, claudefa.st, closingmorecases, the official Higgsfield blog, and official GSAP documentation.

Site search

High-quality websites with scroll-scrubbed video and 3D animation

Deliverables

Ready-to-use resources

Inspiration and underlying principles

CSS 3D Transforms

Scroll-Triggered Animation

Scroll-Scrub Video

WebGL / Three.js

Technology choices

Prompt templates (ready to copy)

PROMPT 1 · Scaffold the entire page · Copy

PROMPT 2 · Staggered card fade-ins · Copy

PROMPT 3 · Pinned scrollytelling · Copy

PROMPT 4 · Mouse-tracking 3D tilt · Copy

GitHub repos & skills

Community discussions and further reading

Video generation in Claude Code with Higgsfield MCP

Prerequisites

Higgsfield MCP connection

Background video generation (Prompt sample)

PROMPT · Looping background video · Copy

PROMPT · Hero video for scroll-scrub · Copy

Webpage video compression

Two ways to implement scroll video

Method A · Autoplay full-screen background video

Method B · Scroll-scrub video

Page assembly (Claude Code Prompt)

PROMPT · Assemble the full page · Copy

Animation verification

Common errors and solutions

Next steps

References

CSS 3D Transforms

Scroll-Triggered Animation

Scroll-Scrub Video

WebGL / Three.js

PROMPT 1 · Scaffold the entire page · Copy

PROMPT 2 · Staggered card fade-ins · Copy

PROMPT 3 · Pinned scrollytelling · Copy

PROMPT 4 · Mouse-tracking 3D tilt · Copy

PROMPT · Looping background video · Copy

PROMPT · Hero video for scroll-scrub · Copy

Webpage video compression

Method A · Autoplay full-screen background video

Method B · Scroll-scrub video

PROMPT · Assemble the full page · Copy

References

Related documents

Hypit: AI Agent Video Creation and Compilation Guide

claude-real-video: Setup, Flags and Claude Code Integration

claude-video /watch: Installation and Video Analysis