Time frozen like a website: a wave of whisky suspended mid-collision, and scrolling makes you orbit around the moment. Time only moves when the page says so.
You are building a one-page website, award-winning quality, with "scroll cinematics." Work autonomously from start to finish: generate the assets with the Higgsfield connector, then build and run the site with the coding assistant. No plans, no placeholders.
THE PRODUCT (fictional distillery): STILL No. 8, an eighteen-year-old single malt. Slogan: "Time, held." The concept is FROZEN TIME: an amber whisky wave is captured mid-collision around the upright bottle, hundreds of droplets suspended in the air. Scrolling doesn’t move time; it moves the CAMERA, orbiting the frozen moment. In one chapter, time briefly releases, the wave collides for half a second in super slow motion, then freezes again.
THE TECHNIQUE (follow exactly): The 3D scroll effect is NOT Three.js. It’s an image-sequence scrub in a canvas: video clips split into frames, with the scroll position determining which frame is painted onto a full-viewport canvas.
ASSETS (Higgsfield connector): 1. ONE 16:9 anchor image: "A whisky bottle standing in a pure black void, a dramatic wave of amber whisky frozen mid-crash wrapping around it, hundreds of droplets suspended motionless in the air, one shaft of warm light from above, ultra sharp, photorealistic advertising photography, no text, no watermark." Best image model in the catalog. 2. With the anchor as image reference for each clip, three 10-second, 1080p, 16:9 image-to-video clips: CLIP A "the orbit": the liquid stays perfectly frozen while the camera orbits 360 degrees around the bottle and the suspended wave, light glinting through the amber, nothing moves except the viewpoint. CLIP B "the release": time unfreezes, the wave continues its crash in extreme slow motion for a breath, droplets colliding and blooming, then freezes again in a new sculptural shape. CLIP C "the macro": the camera drifts through the droplet field close up, each droplet acting as a tiny lens refracting the bottle, one droplet trembling on the edge of falling. 3. Download the MP4s.
FRAMES: ffmpeg, 150 frames per clip, 1600px wide, JPEG quality 3, named frames/orbit/frame_0001.jpg. Confirm the files exist first.
THE SITE (pure HTML/CSS/JS, Lenis via CDN, percentage preloader, fixed 100vh chapters with scrub and lerp smoothing): 1. HERO: the orbit is scrubbed as "STILL" settles in a giant serif, overline "No. 8. TIME, HELD." Small caption: "Scroll moves you. Not time." 2. THE RELEASE: clip B is scrubbed; as time releases, callouts appear with thin amber leader lines: CASK No. 8, first fill sherry. 18 YEARS asleep. 46 PERCENT, non-chill filtered. 3. THE MACRO: clip C is scrubbed through the field of droplets. 4. THE CREED: three short lines about patience, one per scroll step. 5. TASTING: minimal two-column grid, nose, palate, finish, thin dividers. 6. CTA: "Request an allocation", email field, fine print. Art direction: empty black #070605, bone text #EDE7DA, amber accent #C87A1E glowing only inside the liquid; giant serif plus spaced uppercase; vast negative space. Mobile and reduced motion: looping MP4 fallback. Performance: requestAnimationFrame, repaint only when the frame changes, 60fps.
CHECK: the loader unlocks at 100 percent, the hero orbit clearly moves the camera around a frozen splash, the launch chapter plays and freezes again, the macro drifts through the droplets, and there are no console errors. Then provide the live URL.