MengTo turns a 30-second HeyGen Video 1 clip into a scroll-controlled website

• A generated house tour became a scroll-controlled hero: MengTo's demo runs backward from an aerial view to a floor plan.
• Production used one 30-second HeyGen Video 1 generation and one Claude Code page prompt, according to his workflow.
• The HTML template and prompts are available free through MengTo's download post.

MengTo asked for an ARRI Alexa 35 look and paper that never curls or lifts in the shot prompt. Visitors get a six-chapter rail and a countdown from 00:30 to 00:00 in the website brief. Rewinding a finished house into a drawing is a lovely fit for an architecture site.

Halden Arkitekter, the Oslo architecture studio in the demo, is fictional. MengTo, who says he is working with HeyGen, describes the original film as a single 2K, 16:9 generation without cuts or stitching.

He published four production steps:

1. Write the shot as timed beats, naming the camera and spelling out every turn.
2. Use Claude Code to submit one 30-second, 2K generation through HeyGen's text-to-video API.
3. Keep the returned take without editorial cuts.
4. Give Claude Code one prompt to build a landing page that scrubs the film backward as visitors scroll.

The generation prompt establishes the house's materials, furniture and room layout before assigning six time windows.

The requested sequence:

1. 0–4 seconds: Look straight down at a floor plan on a walnut desk, with the living room left, kitchen right and pool along the right side.
2. 4–10 seconds: Raise the drawn walls into a white architectural model while tilting the camera toward an eye-level view of the glass facade.
3. 10–13 seconds: Transform the model into a real house from left to right, turning the surrounding paper into lawn and trees.
4. 13–20 seconds: Glide through open glass doors, past the sofa, then turn right toward the kitchen island.
5. 20–25 seconds: Continue along the island and out onto the terrace beside the pool.
6. 25–30 seconds: Rise into an aerial view of the house and garden in golden evening light.

MengTo explicitly asks for a fixed layout and a camera that never passes through walls. The sound brief specifies room tone and birds, without music.

The Claude Code brief calls for one index.html, with no frameworks, libraries or build step. The media lives alongside it in an assets/ folder.

The hero's specified mechanics are unusually precise:

• Scroll distance: A 520vh section holds a sticky, full-screen video.
• Time mapping: Scroll progress from 0 to 1 maps to video time from end to beginning.
• Smoothing: Each animation frame eases the displayed time toward the target with a lerp factor of 0.14.
• Seek handling: Update currentTime only after the previous seek finishes, using seeked. Never call play() on the hero.

The supplied web-asset specification differs from the original 2K generation: the desktop hero is 1600 × 914, runs 30.7 seconds and has a keyframe every four frames for scrubbing.

The same brief specifies:

• Phones: A separate 960-pixel-wide hero, with the chapter rail replaced by one current-chapter label.
• Reduced motion: A one-screen hero showing the sky still, with the other films paused on their posters.
• Loading: Fetch the hero as a blob when served over HTTP, with a file-path fallback for local opening or a failed fetch.
• Project films: Three eight-second loops that play only while visible, controlled with IntersectionObserver.

Compression can bring films down to roughly a tenth of their original size, MengTo said in a reply. His linked compress-video skill runs FFmpeg locally and compares codec and CRF settings.

He shared this installation command:

The free download bundles:

• The HTML landing-page template.
• The HeyGen Video 1 films.
• Every prompt.
• A 12-page PDF guide.

HeyGen's browser demo offers two free five-second clips per day. The same page lists API generation at $0.02 per second, with output from 480p to 2K; longer clips and 2K generation are available through HeyGen.