MengTo turns a Figma Weave canvas into a three.js landing page

• MengTo turned Weave-generated assets into an interactive seasonal three.js landing page, as he shows in his demo.
• One canvas supplied matching seasonal images, depth maps and Kling motion studies, according to his workflow breakdown.
• Claude Code was asked for a single HTML file and screenshot-based self-checks in the published prompt.

The motion references are the keeper: MengTo’s prompt names separate MP4s for parallax and season transitions. Another three.js experiment he shared begins as a floor plan sliced from the actual 3D house.

MengTo used one Weave canvas to generate three directions from a single brief:

• Ink wash
• Neon night
• Four seasons

He selected four seasons. That branch used:

• Text Iterator: changed the season while keeping the same framing.
• Depth Anything: generated the depth maps.
• Kling: generated two motion studies.

The Text Iterator sends separate prompts to the same model for batch generation, according to Weave’s documentation.

MengTo says the next page starts with a new brief and photo in a follow-up that also promotes Weave subscriptions.

The asset folder went to Claude Code with a prompt specifying six requirements:

1. Target: recreate design-C-four-seasons.png as a three.js landing page in one HTML file.
2. Composition: use the four seasonal images with identical framing.
3. Mouse movement: use depth maps for parallax matching motion-parallax-loop.mp4.
4. Season clicks: wash the new season in from foreground to background using its depth map, matching motion-season-wash.mp4.
5. Particles: add petals, fireflies, falling leaves and snow for the respective seasons.
6. Review: “Self-verify with screenshots until it matches the design.”

MengTo reported “fairly minimal nudging” in a reply, crediting the strength of the reference.

MengTo also shared a scroll-driven house walkthrough.

Casa Serra took about 70 prompts over two weeks and four full versions in Claude Code, using Opus 5.5, according to the project’s README. The floor-plan idea emerged four days into development.

The house is cut at about 1.2 metres and viewed straight down through a long lens. Scrolling raises the cut to reveal the walls; each room stays a line drawing until the camera reaches it.

The supplied starter prompt asks the agent to propose two or three layouts and a camera path before coding, then stop after the first-room checkpoint for review. In one fresh-session test, the creator says that checkpoint arrived about an hour after choosing a layout.

MengTo also shared Stageshow, an agent skill for making faux product UI as ordinary React components. It installs with npx skills add benjitaylor/skills --skill stageshow.

The skill organizes production into seven steps:

1. Medium: still or animation, loop or one-off, placement and size.
2. Look: theme, accents, product chrome and icons.
3. Story: three to five beats showing an interaction or system behavior.
4. Examples: choose the closest reference and adopt its framing, crops and spacing.
5. Screen: real strings where the story needs them, placeholders elsewhere.
6. Choreograph: overlapping beats, staggered groups and a loop that returns to its starting state.
7. Rehearse: film the demo, inspect every frame, check phone width and the loop seam, then compare it with the reference.

Its film.mjs script produces a contact sheet and measurement report. Additional checks catch one-frame snaps and text or controls that do not fit their boxes.