A production-ready 3D hero in 5 minutes.
Type a prompt, refine it in plain language, then paste one line of code. Your landing page gets a living 3D background, optimized for size and 60fps.
optimized size · 60fps
How it worksHow it works
From prompt to production in three steps
1. Type a prompt
2. Refine it in plain language
3. Paste one line of code
<script async src="…/hero3d.js"
data-scene="scn_XXXXXXXX"></script>Before / After
The same landing page, five minutes later
What you get
Two weeks of production work, already done
Optimized bundle
Kept lean by design, measured on every build.
60fps on mobile
Quality adapts to each device.
Dark/light aware
Follows the host page, live crossfade.
Respects reduced motion
Shows a static frame instead of a blank hero.
WebGL fallback
Falls back to a CSS gradient if WebGL fails, so your page keeps working.
Code you can own
No editor, no lock-in.
Integration
One line. Any stack.
The embed is one line of code that renders directly on your page — no iframe or build step. Using React? The same loader works as a component. Either way, the scene ships as schema-validated config, not generated code.
<script async src="https://hero3d.app/embed/v1/hero3d.js" data-scene="scn_XXXXXXXX"></script>
Templates
Ten templates, one budget
More on the way
New templates ship continuously — each one passes the same budget, theme, and fallback gates before it lands here.
All ten share the same performance budget, theme support, and fallbacks. Click a card to start with its prompt.
Pricing
Start free. Pay when you're ready to ship.
Free
Free
$0forever
- Hosted embeds with a small badge
- 10 free credits a day — 3 generations
- Full quality — 60fps, themes, and mobile support
Paid
Credit pack
$10top-up · 100 credits per pack
- 100 credits per pack — 3 downloads plus 10 tweaks
- Failed generations aren't charged
- Credits never expire · no subscription
1 generation = 3 credits · 1 revision = 1 credit · 1 scene download = 30 credits