A rolagem funciona como um medidor de profundidade: a página escurece literalmente conforme o relógio desce da água iluminada pelo sol até a zona da meia-noite, e um medidor ao vivo conta a descida.
You are building a one-page, award-grade "scroll cinematic" website. Work autonomously end to end: generate assets with the Higgsfield connector, then build and run the site with your coding agent. No plans, no placeholders.
THE PRODUCT (fictional brand): ABYSS Mark II, a titanium dive watch rated to three thousand meters. Tagline: "Rated for the dark." The concept is DESCENT: the watch sinks through the ocean as the visitor scrolls, water shading from sunlit turquoise through indigo to absolute black, light rays thinning, until only the glowing lume dial remains in darkness. The page background darkens in sync with the depth, and a live meter counts meters as you scroll.
THE TECHNIQUE (follow exactly): The 3D scroll effect is NOT Three.js. It is a canvas image-sequence scrub: video clips split into frames, scroll position drives which frame paints onto a full-viewport canvas.
ASSETS (Higgsfield connector): 1. ONE 16:9 anchor image: "A titanium dive watch with a deep blue dial and bright green luminous markers sinking through clear sunlit ocean water, light rays from the surface, small bubbles rising past it, photorealistic underwater advertising photography, no text, no watermark." Best image model in the catalog. 2. With the anchor as image reference on every clip, three 10-second 1080p 16:9 image-to-video clips: CLIP A "the drop": at golden hour the watch slips beneath the ocean surface seen from just below, bubbles bloom, light rays wheeling, and it begins to sink. CLIP B "the descent": one continuous sinking shot, the water darkening from turquoise through deep indigo to near black, light rays fading out, drifting particles rising past, the dial's green lume growing brighter as everything else goes dark, ending in pure black with only the glowing dial and bezel visible. CLIP C "the lume": macro in total darkness, the glowing markers and hands, the bezel clicking one notch, a faint cloud of silt drifting past the glow. 3. Download the MP4s.
FRAMES: ffmpeg, 150 frames per clip, 1600px wide, JPEG quality 3, frames/drop/frame_0001.jpg naming. Confirm files exist first.
THE SITE (plain HTML/CSS/JS, Lenis via CDN, preloader with percentage, pinned 100vh scrub chapters with lerp smoothing): 1. HERO: the drop scrubs while "ABYSS" sets in a huge serif, overline "MARK II. RATED FOR THE DARK." 2. THE DESCENT: clip B scrubs; a live depth meter in the corner counts from 0 M to 3,000 M mapped to scroll progress, and the page background color interpolates in sync from #0E3A5C through #071B30 to #000000; callouts fade at their depths with hairline lume leader lines: 200 M, sunlight ends. 1,000 M, twilight zone. 3,000 M, midnight zone. STILL TICKING. 3. THE LUME: clip C scrubs in the black. 4. SPECS: minimal grid on black, titanium, sapphire, helium valve, hairline dividers. 5. CTA: "Reserve the Mark II", email field, small print. Art direction: ocean gradient background synced to depth as described, bone text #E9EDEA, lume green accent #B8FF9E only for the meter, callouts and glow; serif display plus mono for the meter; vast dark space. Mobile and reduced motion: looping MP4 fallback with a static deep-blue background. Performance: requestAnimationFrame, repaint only on frame change, 60fps.
VERIFY: loader unlocks at 100 percent, the descent visibly darkens both film and page background while the meter counts to 3,000, the lume macro glows in true black, no console errors. Then give me the live URL.