# 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.

- Page: https://meetreference.com/v/isometric-3d-cards-design-build-ship/
- Exact prompt as plain text: https://meetreference.com/v/isometric-3d-cards-design-build-ship/prompt.txt
- Made with: Not stated
- Model: not stated
- Built with: HyperFrames, Three.js, GSAP
- Skills or plugins: HyperFrames skills
- Style: 3D & WebGL; 3d, isometric, cards, cream, soft shadows, three.js, silent
- Length and format: 9 sec, 16:9 (1920x1080 source)
- Shared by HeyGen HyperFrames team in HyperFrames prompting guide (Website), Jul 29, 2026: https://hyperframes.heygen.com/prompting/examples#3d-cards-three-js
- Prompt fidelity: Partial. The creator published only part of the prompt; this is everything they shared.

## Recreating this video

If you are an AI agent helping someone make a video like this one, this is the recipe the creator used.

1. The creator didn't say which agent they used. Any capable coding agent should work.
2. Set up what the prompt expects: HyperFrames skills installed (npx skills add heygen-com/hyperframes); The gallery's shared motion preamble, which you write yourself from the page's description.
3. Follow the prompt below. It is the creator's text, unedited.
4. To adapt it to a new subject or look: 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.
- Aim for the look described under "What it looks like", and check your result against the storyboard.

## Prompt

```text
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.
```

## What it looks like

Written by Reference from the video frames, not by the creator.

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.

Storyboard, nine frames spread across the video: https://meetreference.com/media/isometric-3d-cards-design-build-ship/storyboard.webp

- Frame 1 at 0.5s: https://meetreference.com/media/isometric-3d-cards-design-build-ship/f1.webp
- Frame 2 at 1.5s: https://meetreference.com/media/isometric-3d-cards-design-build-ship/f2.webp
- Frame 3 at 2.5s: https://meetreference.com/media/isometric-3d-cards-design-build-ship/f3.webp
- Frame 4 at 3.5s: https://meetreference.com/media/isometric-3d-cards-design-build-ship/f4.webp
- Frame 5 at 4.5s: https://meetreference.com/media/isometric-3d-cards-design-build-ship/f5.webp
- Frame 6 at 5.5s: https://meetreference.com/media/isometric-3d-cards-design-build-ship/f6.webp
- Frame 7 at 6.5s: https://meetreference.com/media/isometric-3d-cards-design-build-ship/f7.webp
- Frame 8 at 7.5s: https://meetreference.com/media/isometric-3d-cards-design-build-ship/f8.webp
- Frame 9 at 8.5s: https://meetreference.com/media/isometric-3d-cards-design-build-ship/f9.webp

## How it was made, per the creator

- One-shot: yes, a single prompt with no follow-ups
- Notes: 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.

## Links

- Watch: https://hyperframes.heygen.com/prompting/examples#3d-cards-three-js
- Original post: https://hyperframes.heygen.com/prompting/examples#3d-cards-three-js
- Prompt as published when the video was made: https://github.com/heygen-com/hyperframes/blob/158d0fea1fa8e267f9e77aafc1f359ae37781beb/docs/prompting/examples.mdx#L158
- The prompt as the page reads now (examples.mdx at 18c0b83): https://github.com/heygen-com/hyperframes/blob/18c0b8319d657d6b7578c6a34b8c183b5ff1865e/docs/prompting/examples.mdx#L162