Hero3D

Ein produktionsreifer 3D-Hero in 5 Minuten.

Prompt eingeben, in eigenen Worten verfeinern und eine Zeile Code einfügen. Schon hat deine Landingpage einen lebendigen 3D-Hintergrund — optimiert für Dateigröße und 60fps.

optimierte Größe · 60fps

So funktioniert's

So funktioniert's

Vom Prompt zum Livegang in drei Schritten

1

1. Prompt eingeben

"violettes Partikelfeld für eine dunkle SaaS-Landingpage" — mehr Input brauchst du nicht.
2

2. In eigenen Worten verfeinern

"mach es langsamer, mehr ins Indigo" — auch Änderungen gibst du als Prompt ein.
3

3. Eine Zeile Code einfügen

<script async src="…/hero3d.js" data-scene="scn_XXXXXXXX"></script>

Vorher / Nachher

Dieselbe Landingpage, fünf Minuten später

Vorher
Die KI schreibt die Seite. Der Hero bleibt statisch.
Nachher
Einen Prompt später — dasselbe Layout, jetzt lebendig. Kein Redesign und kein neuer Build.

Was du bekommst

Zwei Wochen Produktionsarbeit, schon erledigt

Optimiertes Bundle

Durch Architektur schlank, bei jedem Build gemessen.

60fps auf Mobilgeräten

Die Qualität passt sich dem Gerät an.

Dark/Light automatisch

Folgt dem Theme der Seite und wechselt fließend.

Berücksichtigt reduzierte Bewegung

Zeigt ein statisches Bild statt eines leeren Heros.

WebGL-Fallback

Wechselt bei einem WebGL-Fehler zu einem CSS-Verlauf, damit deine Seite weiterläuft.

Code, der dir gehört

Kein Editor, kein Lock-in.

Integration

Eine Zeile. Jeder Stack.

Eine Zeile Code rendert die Szene direkt auf deiner Seite — ohne iframe oder zusätzlichen Build-Schritt. Du nutzt React? Derselbe Loader lässt sich als Komponente einbinden. In beiden Fällen wird die Szene als schemavalidierte Konfiguration ausgeliefert, nicht als generierter Code.

<script async src="https://hero3d.app/embed/v1/hero3d.js" data-scene="scn_XXXXXXXX"></script>

Templates

Zehn Templates, ein Performance-Budget

Weitere folgen

Laufend kommen neue Templates hinzu — jedes besteht zuerst dieselben Budget-, Theme- und Fallback-Prüfungen, bevor es hier erscheint.

Alle zehn erfüllen dasselbe Performance-Budget und unterstützen dieselben Themes und Fallbacks. Klick auf eine Karte, um mit dem passenden Prompt zu starten.

Preise

Kostenlos starten. Zahlen, wenn du live gehst.

Kostenlos

Kostenlos

$0für immer

  • Gehostete Embeds mit kleinem Badge
  • 10 kostenlose Credits pro Tag — 3 Generierungen
  • Volle Qualität — 60fps, Themes und Mobile
Mit einem Prompt starten

Kostenpflichtig

Credit-Paket

$10aufladen · 100 Credits pro Paket

  • 100 Credits pro Paket — 3 Downloads plus 10 Anpassungen
  • Fehlgeschlagene Generierungen kosten nichts
  • Credits verfallen nie · kein Abo
Credits kaufen

1 Generierung = 3 Credits · 1 Anpassung = 1 Credit · 1 Szenen-Download = 30 Credits