Nothing explodes and nothing moves except the light: a single beam sweeps across the darkness, and the visitor scrolls to bring a grand piano into existence, curve by curve.
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 maker): NOIR Concert Grand, a nine foot piano in hand-polished black lacquer. Tagline: "Heard before seen." The concept is LIGHT AS THE SCROLL: the page opens in true darkness, and a single warm beam sweeps across the instrument as the visitor scrolls, revealing it section by section, reflections rolling over the lacquer. Only what the light touches exists. At the end the lid rises and the hall lights ignite.
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 concert grand piano in hand-polished black lacquer standing in total darkness, a single warm spotlight beam grazing only the curved rim, the rest of the instrument dissolving into black, extreme contrast chiaroscuro, photorealistic, 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 sweep": everything is black; one warm light beam travels slowly across the piano, revealing the rim curve, then the keys, then the music desk, reflections sliding across the lacquer, most of the frame always in darkness. CLIP B "the opening": the light widens as the lid rises in slow motion, the golden frame and strings inside catching warm glints, hammers lifting in a slow wave like something breathing. CLIP C "the strike": extreme macro in low light, one felt hammer rising and striking a copper-wound string, the string blurring into vibration, dust motes drifting through the beam, one ivory key sinking. 3. Download the MP4s.
FRAMES: ffmpeg, 150 frames per clip, 1600px wide, JPEG quality 3, frames/sweep/frame_0001.jpg naming. Confirm files exist first.
THE SITE (plain HTML/CSS/JS, Lenis via CDN, preloader as a thin warm line with percentage in the dark, pinned 100vh scrub chapters with lerp smoothing): 1. HERO: the sweep scrubs while "NOIR" emerges letter by letter as if the beam is finding the type too, overline "CONCERT GRAND. HEARD BEFORE SEEN." 2. THE OPENING: clip B scrubs; callouts fade in with hairline tungsten leader lines: 9 FEET of lacquer. 12,000 PARTS. 243 STRINGS at 20 tons of tension. VOICED for 200 hours. 3. THE STRIKE: clip C scrubs through the hammer hitting the string. 4. THE CREED: three short lines on silence and the first note, one per scroll step. 5. SPECS: minimal two-column grid, hairline dividers. 6. CTA: "Request an audition", email field, small print. Art direction: true black #060606, warm tungsten accent #E8C28A, bone text #EDE7DA, no other color anywhere; giant serif display plus tracked-out caps; the page itself stays mostly dark, type appears only where content lives. Mobile and reduced motion: looping MP4 fallback. Performance: requestAnimationFrame, repaint only on frame change, 60fps.
VERIFY: loader unlocks at 100 percent, the sweep reveals the piano only where light passes, the lid opening reads clearly, the hammer strike lands in macro, no console errors. Then give me the live URL. THE RULES THAT MAKE THIS WORK
Change the subject, never the system.
+ The formula: one subject plus one impossible moment: explosion, a walk through space, molten birth, frozen time, blooming, sinking, or light. Swap the subject, choose the moment, and keep every other step identical.
+ Reversing is free magic. Every transformation clip works in both directions: explode and reassemble, bloom and close, sink and emerge. One clip, two moments, zero extra credits.
+ Keep Sites ON. The live hosted URL is the goal; the local files are the backup plan.
+ Budget about 100 Higgsfield credits per site, approximately five dollars. One anchor image locks in the product; three clips carry the whole film.
+ If it looks like a generic template, use the recovery lines at the start of this package. The scrub is the product.
THE UPGRADE
This package drives the assistant manually. Members do this with a single command. End-to-end websites from a single prompt: assets, frames, code, launch. It comes with 200+ skills, the AI employees (JARVIS, TARS, SPARK), all the installation guides, and every future release as soon as it arrives. The skills aren’t for sale anywhere. Members get everything.
Built with your coding assistant · Share your creation with the community; the best site will be featured.