Funktionsübersicht · 001 / 16

Alle Tools, die Sie benötigen, um eine filmreife 3D-Website zu veröffentlichen.

Beginnen Sie mit einem beeindruckenden Preset und bearbeiten Sie direkt vor Ort – oder erstellen Sie eine immersive 3D-Scroll-Website aus einer einzigen Eingabeaufforderung. Keine WebGL-Kenntnisse. Kein Design-Studium. Kein endloses Prompting auf einer leeren Leinwand.

001
031
061
091
121
151
181
211
Website-Presets

Überspringen Sie die leere Leinwand.

Wählen Sie ein ausgefeiltes Preset, klicken Sie, um Texte und Medien zu bearbeiten, und veröffentlichen Sie es auf einer kostenlosen Draftly-Subdomain oder verbinden Sie Ihre eigene DNS – derselbe Veröffentlichungsprozess wie beim 3D-Builder.

  • 01Produktionsreife UISaaS-, Agentur-, Portfolio- und Launch-Vorlagen mit bereits abgestimmter Bewegung und Layout.
  • 02Klicken zum BearbeitenÄndern Sie Text und Bilder direkt in der Vorschau — kein Neuaufbau von Grund auf.
  • 03Veröffentlichen & eigene DomainStarten Sie auf *.draftly.space oder verknüpfen Sie Ihre Domain mit DNS-A-Einträgen.
  • 04ZIP-ExportLaden Sie das gesamte Projekt mit Pro-Plänen herunter — hosten Sie es, wo immer Sie möchten.
// presets gallery50+
preset · 01
preset · 02
preset · 03
preset · 04
click-to-edit · publish → yoursite.draftly.space
custom domain · ZIP on Pro
KI-Generierung

Eingeben. Veröffentlichen.

Beschreiben Sie die gewünschte Website — die Stimmung, die Branche, die Atmosphäre — und Draftly erstellt allein aus Ihren Worten ein vollständiges, kinoreifes Scroll-Erlebnis.

  • 01Kinoreife BildgenerierungHero-Kompositionen, optimiert für Web-First-Framing — keine quadratischen Zuschnitte, keine Stockfoto-Beleuchtung.
  • 02Atmosphären-SteuerungStilrichtung vorgeben: Noir, Goldene Stunde, Brutalismus, Pastelltraum, Neon-Dystopie. Klartext.
  • 03Trainiert mit über 10.000 DesignsTypografie, Hierarchie und räumlicher Rhythmus integriert. Keine „KI-Website“-Ästhetik.
  • 04Jede Ebene neu generierenHero nicht passend? Tauschen Sie ihn aus. Palette nicht passend? Ändern Sie sie. Den Rest intakt lassen.
// prompt → outputLIVE
A luxury watchmaker landing page. Slow cinematic motion of brass gears in golden light. Editorial typography, muted palette, generous whitespace.
↓ generating ↓
Motion-Engine

Bild. Video. Frames.

Eine vierstufige Pipeline verwandelt ein statisches Konzept in acht Sekunden kinoreife Bewegung, die dann in Hunderte von Frames zerlegt wird, die der Browser sofort wiedergeben kann.

  • 01Bild-zu-VideoModernste Videosynthese. Subtile Kamerabewegungen, Partikeldrift, Umgebungsbewegung.
  • 02Frame-ExtraktionHunderte optimierter Frames in der Auflösung, die Ihre Besucher tatsächlich benötigen.
  • 03Kein WebGL. Kein Three.js.Natives Browser-Scrolling. Funktioniert auf jedem Gerät, jedem Browser, jederzeit.
  • 04Adaptive QualitätFrame-Anzahl und Auflösung passen sich automatisch für Besucher mit geringer Bandbreite an.
// frame sequence240 / 240
001
060
120
180
240
01generate cinematic still
02animate to 8-second video
03extract 240 frames
04encode scroll-locked playback
Visual Studio

Wenn Prompts nicht ausreichen.

Sobald Sie Ihre erste Website veröffentlicht haben, ist das Node-Studio der Ort, an dem Sie Ihre zweite anders erstellen. Verbinden Sie jedes KI-Modell, jede Pipeline, jede Ausgabe.

  • 01Knotenbasierte PipelinesVerketten Sie Text-zu-Bild, Bild-zu-Video, Upscaling, Hintergrundentfernung und mehr.
  • 02Wiederverwendbare WorkflowsSpeichern Sie eine Pipeline einmal. Wenden Sie sie auf hundert Briefings an. Konsistente Ausgabe über eine Marke hinweg.
  • 03Ehrlich zur LernkurveDas Erlernen von Nodes dauert ein paar Stunden. Wir haben ein Starterpaket in die Dokumentation aufgenommen.
// node pipelineRUNNING
Input
Prompt
Generate
Image v3
Process
Upscale 4x
Animate
Video Gen
Output
Frames
Scroll-Wiedergabe

Film, gesteuert durch das Rad.

Jedes Scroll-Ereignis bewegt einen Frame vorwärts. Jeder Frame ist vorgerendert. Das Ergebnis fühlt sich an wie ein Film, funktioniert wie eine statische Website und läuft auf einem fünf Jahre alten Telefon.

  • 01Frame-InterpolationFlüssige 60fps-Wiedergabe selbst auf Mittelklasse-Hardware.
  • 02Parallaxen-TiefenebenenVordergrund, Mittelgrund, Hintergrund – jeder scrollt mit eigener Geschwindigkeit.
  • 03Mobile-First-PhysikTouch-Scroll-Verhalten gerätespezifisch angepasst. Keine ruckartige Trägheit.
  • 04Ladezeit unter 2 SekundenAggressive Frame-Kompression. Lazy-geladene Sequenzen.
// scroll playback
↓ scroll
cinematic
depth
↑ release
Produktionsexport

Ihre Website. Ihr Code.

Laden Sie ein ZIP herunter. Bereitstellung auf Vercel, Netlify oder Ihrem eigenen Server. Draftly hostet Sie nicht, sperrt Sie nicht ein und berechnet keine Kosten pro Besucher. Der Code gehört Ihnen.

  • 01Semantisches HTML5Barrierefreies Markup. Screenreader-freundlich. Sofort SEO-bereit.
  • 02Tailwind CSSDas Framework, das Ihr Team bereits verwendet. Passen Sie alles in Ihrem Editor an.
  • 03Express API StarterOptionales Backend enthalten. Auf GitHub pushen. Mit einem Klick bereitstellen.
  • 04Ein-Klick-BereitstellungszieleVorkonfiguriert für Vercel, Netlify, Cloudflare Pages.
// export
index.html · 4.2KB
<!-- Draftly export · scroll-locked sequence -->
<section class="hero" data-frames="240">
  <div class="scroll-stage">
    <canvas id="frame-canvas" />
    <div class="overlay">
      <h1>Built with Draftly</h1>
    </div>
  </div>
</section>

// 240 frames · 1.8MB total · LCP 1.2s
Responsiv

Ein Build. Jeder Bildschirm.

Tailwind-Breakpoints, fließende Schriftskalen und adaptive Frame-Auflösungen sorgen dafür, dass Ihre Website auf einem 4K-Monitor und einem 360px-Telefon durchdacht aussieht.

  • 01Fließende TypografieÜberschriften skalieren mit dem Viewport, nicht mit abrupten Breakpoint-Sprüngen.
  • 02Adaptive Frame-QualitätMobilgeräte erhalten 480p-Frames. Desktops erhalten 1080p. Automatisch.
  • 03Touch-First-InteraktionenScrollen, tippen, wischen – alles verhält sich wie eine native App.
// responsive

Desktop · 1440px

Tablet · 768px

Mobile · 375px

Die Pipeline

Zwei Wege. Eine Plattform.

i

Schritt 01

Voreinstellungen

ii

Schritt 02

Prompt

iii

Schritt 03

Bild

iv

Schritt 04

Video

v

Schritt 05

Frames

vi

Schritt 06

Veröffentlichen

Starter-Prompts

Nie wieder eine leere Seite. Starten Sie zielgerichtet.

SaaS Landingpage

Hero · Funktionen · Preise

Studio-Portfolio

Redaktionell · Fallstudien

Luxus E-Commerce

Produkt · Story · Warenkorb

Agentur-Website

Manifest · Arbeiten · Kontakt

Vergleich

Wo Draftly sich einfügt im Stack.

Draftly
FramerWebflowSpline
Website presets gallery● 50+ templates
AI prompt-to-site● Full pipelinePartial
3D motion (no WebGL)● Native scrollWebGL required
Code export● HTML/CSS/JSCode componentsYes (paid)React only
Hosting required● OptionalBundledBundledBundled
Bring your own AI model● Yes
Entry price● $0 / $25$15$18$0 / $9
In der Praxis

Veröffentlicht von Gründern, Studios, Solisten.

Wir haben eine 40.000-Dollar-Markenwebsite mit einem Draftly-Export vorgestellt. Der Kunde dachte, wir hätten ein Three.js-Team engagiert. Hatten wir aber nicht.

Mara VelascoGründerin · Northbound Studio

Unsere Hero-Sektion brauchte früher zwei Wochen für einen Designer. Jetzt genügen ein Prompt und ein Espresso.

Daniel ParkHead of Growth · Lumen Labs

Der exportierte Code ist sauberer als das, was die meisten Agenturen liefern. Wir hosten ihn selbst. Keine Plattformbindung.

Priya IyerLeiter Technik · Fold & Co.
Technische Daten

Die langweiligen Details, ehrlich gesagt.

Browser-Unterstützung

Chrome, Safari, Firefox, Edge — die letzten beiden Versionen. Getestet auf iOS 14+ und Android 9+.

Exportformat

ZIP-Archiv mit HTML, CSS (Tailwind), JS, Frame-Sequenzen (WebP oder AVIF).

Typische Dateigröße

2–6 MB pro Website, abhängig von Frame-Anzahl und Auflösung. Aggressive Komprimierung.

Anforderungen für Self-Hosting

Optional. Mindestens 8 GB VRAM für lokale KI-Inferenz. Unterstützt Gemini- und Fal.ai-Schlüssel.

API-Zugriff

Pro-Plan und höher. REST-Endpunkte für programmatische Generierung und Pipeline-Trigger.

Leistung

Ziel-LCP unter 1,5s. Lazy Frame-Loading. Adaptive Qualität pro Verbindung.

Fragen

Gestellt, beantwortet.

Hostet Draftly meine Website?

+
Nein. Sie exportieren eine ZIP-Datei und stellen sie überall bereit – Vercel, Netlify, Cloudflare Pages, Ihren eigenen Server. Keine Plattformbindung.

Wem gehört der exportierte Code?

+
Ihnen. Die HTML-, CSS-, JS- und Frame-Assets können Sie nach Belieben ändern, weiterverkaufen, als White-Label anbieten oder als Open Source veröffentlichen.

Muss ich WebGL oder Three.js kennen?

+
Nein. Die Scroll-Engine basiert auf nativem Browser-Scrolling und Frame-Wiedergabe. Zur Laufzeit ist keine 3D-Bibliothek erforderlich.

Kann ich meine eigenen KI-Schlüssel verwenden?

+
Ja. Verbinden Sie Gemini, Fal.ai oder selbst gehostete Open-Source-Modelle. Sie steuern das Inferenzbudget.

Benötige ich einen kostenpflichtigen Plan, um zu starten?

+
Ja. Wählen Sie auf der Preisseite den Basic-Plan (25 $/Monat) oder höher, um den 3D Builder, Studio-Guthaben und monatliche Generierungslimits freizuschalten.

Hören Sie auf, 5.000 $ für eine Hero-Sektion zu bezahlen.

Beschreiben Sie, was Sie möchten. Draftly erstellt in wenigen Minuten eine scroll-gesteuerte 3D-Website. Abonnieren Sie, um zu veröffentlichen.