The video one. Run it first, exactly as written, to see the full effect before customizing anything.
You are building a one-page, award-grade "scroll cinematic" website to be judged against Awwwards-level work. Work autonomously end to end: generate the assets with the Higgsfield connector, then build and run the site with your coding agent. Do not stop at a plan. Do not use placeholder assets.
THE PRODUCT (fictional luxury brand): OBSCURA MK I, a mythic mechanical camera. Matte black brass body, engraved dials, glass lens elements. Tagline: "Light, remembered." The site has one hero moment: as the visitor scrolls, the camera EXPLODES into roughly forty floating components (lens elements as glass discs, fanned iris blades, prism, shutter curtain, gears, screws), a prism splits white light into a spectral rainbow flare across the void, then scrolling onward REASSEMBLES it back into a whole camera.
THE TECHNIQUE (this is the secret, follow it exactly): The viral "3D scroll" effect is NOT Three.js and NOT WebGL. It is a canvas image-sequence scrub: short cinematic video clips are split into frames, and scroll position drives which frame is painted onto a full-viewport canvas. Smooth, deterministic, works everywhere.
ASSETS (Higgsfield connector): 1. Generate ONE 16:9 anchor image: "Ultra premium product photograph of a mythic mechanical camera, matte black metal with brass engraved dials and glass lens, floating centered in a pure black void, single dramatic top light, subtle gold rim light, photorealistic, luxury watch advertisement lighting, no text, no watermark." Use the best current image model in the catalog. 2. Using this anchor as the image reference for EACH clip (this locks the product's identity), generate three 10-second, 1080p, 16:9 image-to-video clips with the best current image-to-video model: CLIP A "orbit": the camera floats in the black void and slowly rotates 360 degrees, gentle drift, nothing else moves. CLIP B "explode": the camera smoothly disassembles outward into its individual components which hang suspended in space, glass lens elements, fanned aperture blades, gears, dials, screws, a glass prism near the center splitting a beam of white light into a rainbow spectrum flare, slow, elegant, constant speed, ends fully exploded and holding. CLIP C "macro": slow macro glide across the engraved brass dial, over the glass lens with faint spectral refractions, ending on the OBSCURA engraving. The reassembly doesn't need an extra clip: scrolling CLIP B backward IS the reassembly. 3. Download the three MP4s to the project.
FRAMES: Use ffmpeg to extract each clip into a JPEG sequence: 150 frames per clip, 1600px wide, quality 3, named frames/orbit/frame_0001.jpg etc. Confirm the files exist before writing the site code.
THE SITE (pure HTML/CSS/JS, no frameworks): index.html, styles.css, app.js. Loader: black screen, thin gold progress bar and percentage that preloads EVERY frame before unlocking scroll. Smooth scrolling: Lenis via CDN. Each scrub chapter is a fixed 100vh section whose scroll progress maps to its frame sequence with lerp smoothing, drawImage with cover-fit math. Structure: 1. HERO: the orbit is scrubbed as "OBSCURA" in a large editorial serif fades in and letter-spaces out, overline "THE MK I. LIGHT, REMEMBERED." in spaced small caps. 2. MANIFESTO: short poetic text, one line revealed per scroll step. 3. THE EXPLOSION: clip B is scrubbed forward; four small labels fade in near the components with thin gold leader lines (ELEMENT I: 9 glass lenses. IRIS: 12 blades. PRISM: full spectrum. 214 parts total.) 4. REASSEMBLY: clip B is scrubbed backward, ending with the line "Every part, remembered." 5. MACRO: clip C is scrubbed through the details. 6. SPECS: minimal two-column grid with thin dividers, fictional specs. 7. CTA: "Request the MK I", email field, fine print. Art direction: background #050505, bone text #EDEAE4, brass accent #B08D57, spectral rainbow ONLY where the prism light appears; giant display serif (Cormorant Garamond) paired with a spaced grotesk; enormous negative space; no boxes, no cards, no drop shadows. Mobile and reduced motion: below 768px or prefers-reduced-motion, replace the canvas scrub with the MP4s as looping background videos. Performance: requestAnimationFrame, repaint only when the frame index changes, 60fps target.
CHECK: open the served site and confirm the loader reaches 100 percent and unlocks, all three drag chapters actually drag, the reverse rebuild works, labels appear, and there are no console errors. Fix anything that’s broken, then give me the live URL and a summary of the generated assets and credits spent.