No explosion here: scrolling takes visitors through a dark museum built for your work. Each project is an exhibit on a lit pedestal. Fill in the brackets before pasting.
You are building MY personal portfolio as a one-page website, award-winning quality, with a "cinematic scroll" effect. 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. My details: NAME: [YOUR NAME]. TITLE: [e.g. PRODUCT DESIGNER]. PROJECTS, three to five, each with a one-line result: [PROJECT 1: RESULT] [PROJECT 2: RESULT] [PROJECT 3: RESULT]. CONTACT: [EMAIL].
THE CONCEPT: my portfolio is a private museum at night. A vast, dark exhibition hall, polished stone floor, glowing glass artifacts on spotlit pedestals, receding into the darkness. Scrolling doesn’t move the page; it moves the VISITOR: the camera glides forward through the hall, arriving at one exhibit after another, and ends at a monumental wall engraved with my name. Scrolling is a walk.
THE TECHNIQUE (follow exactly): The 3D scroll effect is NOT Three.js. It’s a canvas image sequence: 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: "Vast dark museum exhibition hall at night, polished black stone floor with soft reflections, a row of white marble plinths receding into darkness, each holding a glowing translucent glass sculpture under a single warm spotlight, cinematic, photorealistic, architectural photography, no people, 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 approach": tall bronze doors open slightly and the camera slowly glides forward into the dark hall, the first illuminated pedestal emerging from the darkness. CLIP B "the walk": one continuous, smooth dolly through the hall, passing close to four glowing artifacts on pedestals, each catching the light differently, steady pace, no cuts. CLIP C "the name wall": the camera rises and tilts up to a monumental dark stone wall with a warm backlit glow along large engraved letters, dust particles in the beam of light. 3. Download the MP4s.
FRAMES: ffmpeg, 150 frames per clip, 1600px wide, JPEG quality 3, named frames/approach/frame_0001.jpg. Confirm the files exist first.
THE SITE (pure HTML/CSS/JS, Lenis via CDN, percentage preloader, fixed 100vh chapters with lerp smoothing): 1. HERO: the approach is scrubbed as [YOUR NAME] fades in over the doors in a massive editorial serif, overline [TITLE] in spaced uppercase, scroll indicator "Enter". 2. THE WALK: clip B is scrubbed; as the camera passes each pedestal, a project caption appears and disappears alongside it with a thin brass leader line: project name, one-line result, year, using my project list. Sync the captions with the camera passing pedestals one, two, three, four. 3. THE NAME WALL: clip C is scrubbed as the engraved wall resolves; overlay my name in the same serif, aligned with the engraving, then a line: "Every piece, placed on purpose." 4. SELECTED WORK: a clean index list below the cinema, one line per project, name plus result plus year, thin dividers (leave spaces for images I’ll add later). 5. CONTACT: "Visit the studio." in large type, with [EMAIL] as a warm gold link. Art direction: museum black #0B0B0C, warm exhibit glow #F1E4C8, brass accent #A98963; massive display serif plus tiny mono captions; quiet and spacious, no cards, no shadows. Mobile and reduced motion: replace the scrub with the MP4s as looping background videos. Performance: requestAnimationFrame, repaint only when the frame index changes, 60fps.
CHECK: the loader unlocks at 100 percent, the walk actually glides past the display cases with captions synced to the pedestals, the wall of names resolves, and there are no console errors. Then provide the live URL.