The Apple-style scroll hero

You land on a page, start scrolling, and the hero video plays forward frame-by-frame as you go, like the Apple product pages. It looks expensive. It really isn't.

Two pieces make it work: a video to scrub, and a component that maps scroll position to the video's playhead. Here's both.

Generate the clip inside Claude

You can make your hero video right in the chat using the Higgsfield connector, no tab-hopping. If you've never added a custom connector, here's the whole thing. Takes about two minutes.

Heads up, custom connectors need a paid Claude plan (Pro or Max). Free accounts can't add them yet.

1. Open Claude → Settings → Connectors (shows as Customize → Connectors on some plans).
2. Click Add custom connector (the + / Add button).
3. Paste this into the server URL field:

   https://mcp.higgsfield.ai/mcp

4. Click Add, then sign in / authorize your Higgsfield account when prompted.
5. In any chat, hit the + button (bottom-left) → Connectors → toggle Higgsfield ON for that conversation.

Done. Now just ask Claude to generate a video with Higgsfield and it happens right in the thread.

Build the scroll-scrub component

Drop your clip into the chat, paste this in, and let it cook.

I have a video file I want to use as the hero on my website. I want the video to scrub forward as the user scrolls, like the Apple product pages.

Here's what I need you to do:
1. Move my video file to /public/hero.mp4 (the file is attached to this chat).
2. Create a new component at app/components/ScrollHero.tsx (or src/components/ScrollHero.tsx if I'm using src/).
3. The component should:
   • Render a tall container that's 300vh in height (so there's scroll distance to drive the video)
   • Inside, sticky-position a video element that fills the viewport, plays no sound, is paused, and loads the hero.mp4
   • On mount, set up a scroll listener that calculates how far through the container the user has scrolled (0 – 1)
   • Map that progress to video.currentTime
   • Use a requestAnimationFrame loop with lerp smoothing (factor 0.22) so the playhead glides instead of snapping frame-to-frame
   • Clean up the listener and rAF on unmount
4. Add the ScrollHero component to my home page (app/page.tsx) as the first section.
5. Make sure the video element has playsInline, preload="auto", and muted attributes so it works on mobile.
6. Add a fade-in on the first 200ms after mount so it doesn't pop in cold.
Stack: Next.js 14+ with App Router, TypeScript, Tailwind.
When you're done, run npm run dev and tell me to scroll the hero to test it.

From experience

• Keep it short & high frame-rate. Scrubbing exposes every frame, so 3–6 seconds of smooth footage beats a long clip.
• Stutters on first scroll? It's still buffering, that's exactly what preload="auto" is for.
• Want it floatier or snappier? Nudge the 0.22 lerp factor. Lower = more glide, higher = tighter tracking.

Go build something that makes people go "wait, how'd they do that."