3D product video · 20s · 16:9
3D product video template
Screens in 3D space with a camera orbit
This finished sample was made from captured screens and page copy of hairfit.ai, one of our own products. It is not a live generator result. Silent cut — captions carry it.
This finished sample turns captured product screens into glossy panels that rise, fan out and orbit in a 3D-style stage. The planned generator uses page text and animated graphic elements; it does not capture or turn your real UI into panels.
This prompt records how the existing video above was made. It is not a capability list or a prompt that the current workbench runs.
Look: dark studio stage (#0b0b0d) with a soft floor reflection and one warm key light. Build a 3D product film with CSS 3D transforms only (perspective on a stage element, preserve-3d, rotateX/rotateY/translateZ driven by the timeline) — no WebGL. Treat the real screenshots as glossy panels with rounded corners, a thin bezel, a soft drop shadow and a moving specular highlight. (1) 0–4s a single panel (the hero screenshot) rises from the floor and turns from 35° to face the camera, the real headline types in beside it. (2) 4–10s the panel splits into a layered stack: the other screenshots fan out in depth (translateZ steps) and the camera orbits 25° around the stack, slow and continuous. (3) 10–16s the camera flies through the stack, stopping square-on to each section panel for ~1.8s while a projected callout (a thin leader line pinned to a real element on the panel, label quoted from the page) draws on. (4) 16–20s panels collapse back into one, settles flat, end card with the real CTA label and the domain. Motion must ease in and land softly (no bounce); keep the camera still while text is being read.
// planned text workflow
- 01The finished sample above uses panels based on captured screens; its prompt records that earlier production.
- 02The planned reader extracts page text, not screenshots. Review the facts and pricing you want to use.
- 03The current plan uses animated type, cards and simple graphics; it does not create 3D panels of your live UI.
- 04Rendering is closed; join the waitlist for updates.
// approach credit
echris6/motion-video-kit (MIT). We borrowed its 3D product-film approach (layered screens, a slow camera orbit, callouts pinned to real elements) and wrote our own prompt; no code or footage from the kit is used here, and the MIT notice stays with the original repository.
Try the sample walkthrough with mock facts and a pre-rendered clip, or join the waitlist for text-based rendering when it opens.
FAQ
Is this real 3D rendering?
The existing sample uses a 3D-style browser animation. That screen-based treatment is not part of the current planned generator, which uses animated typography, cards and simple graphics.
Can I use it for a physical product?
This template is built around screens. For a physical product you would describe the object instead; the output is then a drawn or code-built model, not a photograph.
Will it invent UI that my product does not have?
No live UI panels are generated. The planned workflow reads page text, lets you review facts and builds motion scenes from an editable script.
Where does a 3D product video work best?
As a hero loop on a landing page, a Product Hunt gallery slot, or the opening of a pitch deck.