9-second 1920x1080 video, light warm cream background. Build the scene in Three.js via the adapter: three rounded card meshes labeled "Design", "Build", "Ship" lie flat on the ground plane, camera at a fixed 3/4 isometric angle, soft directional light + ambient so the cards cast soft shadows. One at a time each card lifts and straightens upright to face the viewer center-frame while the other two slide apart and dim; then it returns. Finish with all three standing upright in a row by 8.5s, hold. All easing power3.inOut. No audio. **Spectacle beat:** As the cards rise into their stack, a single specular sweep rakes across all three faces in sequence, catching each edge.
Make it yours. Relabel the cards ("Design", "Build", "Ship") with your own three steps and change "light warm cream background" to your color. Keep "camera at a fixed 3/4 isometric angle" and the soft-shadow lighting line for the same look.
Isometric 3D cards: Design, Build, Ship
A 9-second Three.js scene on warm cream: three rounded cards labeled Design, Build and Ship lie flat at a fixed isometric angle, each lifts upright in turn with soft shadows, and all three end standing in a row.
You'll need
- HyperFrames skills installed (npx skills add heygen-com/hyperframes)
- The gallery's shared motion preamble, which you write yourself from the page's description
How it was made
This is the prompt as it was published when the video was rendered (commit 158d0fea; the video file dates from 2026-07-29). The live page has since changed the ending from "hold." to "hold with a subtle ambient idle." The page says the video was "Rendered from the prompt above, unedited", but also that every gallery video was made by its prompt plus a shared preamble pasted above it. The preamble carries the motion rules (three depth layers, a camera that keeps moving, staggered entrances, an ambient idle at the end). The page describes it but doesn't publish it word for word, so the prompt here is only part of what was run. It sits in the gallery's freeform section: no registry blocks, hand-built HTML, CSS, SVG and GSAP, with Three.js through HyperFrames' adapter. The render has no audio. The agent and model aren't named.
Posted Jul 29, 2026 · HyperFrames prompting guide on Website
Prompt from: Docs page, "3D cards (Three.js)" example in the gallery, as published at commit 158d0fea
Look notesby Reference
Three rounded cream cards labeled Design, Build and Ship, each with a line icon, lying on a pale ground at an isometric angle, then stood up one at a time facing the viewer, and finally side by side.
- Color
- Warm cream and beige with a faint grid, soft gray-brown shadows, and one muted icon color per card: brick red for Design, mustard for Build, olive green for Ship. Dark brown type.
- Type
- A clean bold sans for the card labels, with a short colored underline beneath each, and small spaced numerals ("01", "02", "03") on the cards and in a step indicator at bottom left.
- Framing
- A high, angled view of the three cards in a diagonal row. When a card stands, it fills the center of the frame at full height while the other two sit faded at the edges. The step indicator stays in the bottom-left corner.
- Structure
- All three flat, Design standing, back to flat, Build standing, flat again, Ship standing, flat, the three rising together and tilted, then all three upright in a row.
