做出會 捲動播放影片 與 3D 動態的高質感網站

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.

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.

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.

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.

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

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

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

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.

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.

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

<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>

.hero { position: relative; overflow: hidden; }
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.hero::after {              /* 暗化遮罩，依影片亮度調整 */
  content: ''; position: absolute; inset: 0;
  background: rgba(0, 0, 20, 0.55); z-index: 1;
}
.hero-content { position: relative; z-index: 2; }

<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>

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

gsap.registerPlugin(ScrollTrigger);

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

// 等 metadata 載入才拿得到 video.duration
video.addEventListener("loadedmetadata", () => {
  const tl = gsap.timeline({
    scrollTrigger: {
      trigger: ".video-wrap",
      start: "top top",
      end: "bottom bottom",
      scrub: true,     // 動畫跟著捲動條走
      pin: true        // 捲動期間把影片釘在畫面
    }
  });
  tl.fromTo(video, { currentTime: 0 }, { currentTime: video.duration });
});

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

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.

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

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