Growth instead of destruction: a black orchid unfurls petal by petal as the visitor scrolls, and the serum is extracted from its heart. For beauty and botanical brands.
You are building a one-page website, award-winning quality, "cinematic scrolling." Work autonomously from start to finish: generate the assets with the Higgsfield connector, then build and run the site with your coding agent. No plans, no placeholders.
THE PRODUCT (fictional skincare house): NOX BOTANICA, a night serum extracted from a black orchid that blooms once. Slogan: "Grown in the dark." The hero moment is GROWTH: a closed black orchid bud, under moonlight in a dark greenhouse, unfolds petal by petal as the visitor scrolls, dew forming and rolling, until the flower is fully open; then a single glowing drop rises from its heart and falls into a dark glass bottle.
THE TECHNIQUE (follow exactly): The 3D scroll effect is NOT Three.js. It’s a canvas image-sequence scrub: video clips split into frames, with the scroll position driving which frame is painted onto a full-viewport canvas.
ASSETS (Higgsfield connector): 1. ONE 16:9 anchor image: "A single closed black orchid bud on a slender stem inside a dark Victorian greenhouse at night, cool moonlight through the glass, dew on the petals, deep green to black tones, macro botanical photography, photorealistic, 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 bloom": timelapse of the black orchid unfurling petal by petal, dew drops forming and rolling, moonlight shifting subtly, ending fully open and holding. CLIP B "the essence": from the center of the open flower, a single luminous drop rises, hangs, then falls in slow motion into a small dark glass serum bottle that rises into frame, a soft glow spreading through the glass as it falls. CLIP C "the macro": extreme macro over the petal surface, velvet texture, a dew drop acting as a lens, then the bottle's dropper releasing a glowing drop. 3. Download the MP4s.
FRAMES: ffmpeg, 150 frames per clip, 1600px wide, JPEG quality 3, named frames/bloom/frame_0001.jpg. Confirm the files exist first.
THE SITE (pure HTML/CSS/JS, Lenis via CDN, preloader as a slender stem line growing with a percentage, fixed 100vh scrub chapters with lerp smoothing): 1. HERO: the bloom is scrubbed as "NOX" takes shape in a high-fashion serif with wide letter spacing, overline "BOTANICA. GROWN IN THE DARK." The flower opens at exactly the speed the visitor scrolls. 2. THE ESSENCE: clip B is scrubbed; callouts fade in with thin silver leader lines: ONE BLOOM per season. Cold-pressed within the hour. 12 PETALS, one drop. 30 ML, numbered. 3. THE MACRO: clip C is scrubbed over velvet and glass. 4. THE RITUAL: minimal three-step grid, night, skin, morning. 5. CTA: "Join the first harvest", email field, fine print. Art direction: deep green #0A0F0C, moon-silver text #DDE4DC, orchid-violet accent #8E7BB8 used only in the flower’s heart; elegant serif plus spaced small caps; airy, quiet, no cards. Mobile and reduced motion: looping MP4 fallback. Performance: requestAnimationFrame, repaint only when the frame changes, 60fps.
CHECK: the loader unlocks at 100 percent, the orchid visibly opens as you scroll and stays in full bloom, the drop falls into the bottle, the macro reads as close-up velvet, and there are no console errors. Then provide the live URL.