Visão geral dos recursos · 001 / 16

Todas as ferramentas que você precisa para lançar um site cinematográfico 3D.

De um único prompt a código pronto para produção em menos de cinco minutos. Sem conhecimento de WebGL. Sem diploma de design. Sem bibliotecas de templates para vasculhar.

Comece a Construir Grátis →Ver PreçosVer Preços
001
031
061
091
121
151
181
211
Três pilares

Um fluxo de trabalho. Três camadas de controle criativo.

— 01

Website Presets

50+ production-ready sites — customize in place, publish to Draftly or your domain. No long prompt required.

Browse presets →
— 02

AI Generation

Trained on 10,000+ professional designs. Outputs images, videos, and layouts from natural-language prompts.

Learn more →
— 03

Scroll Engine

Frame-by-frame playback locked to viewport scroll. No WebGL, no Three.js, no performance tax.

Learn more →
— 04

Production Export

Clean semantic HTML, Tailwind CSS, and JavaScript. Deploy anywhere. Own your code.

Learn more →
Predefinições de Site

Pule a tela em branco.

Escolha uma predefinição elegante, clique para editar texto e mídia, e publique em um subdomínio Draftly gratuito ou conecte seu próprio DNS — o mesmo fluxo de publicação do construtor 3D.

  • 01Production-ready UISaaS, agency, portfolio, and launch templates with motion and layout already dialed in.
  • 02Click-to-editChange text and images directly in the preview — no rebuilding from scratch.
  • 03Publish & custom domainLaunch on *.draftly.space or point your domain with DNS A-records.
  • 04ZIP exportDownload the full project on Pro plans — host anywhere you like.
// presets gallery50+
preset · 01
preset · 02
preset · 03
preset · 04
click-to-edit · publish → yoursite.draftly.space
custom domain · ZIP on Pro
Geração por IA

Digite. Lance.

Descreva o site que você deseja — o clima, a indústria, a atmosfera — e o Draftly monta uma experiência de rolagem cinematográfica completa apenas com suas palavras.

  • 01Cinematic image generationHero compositions tuned for web-first framing — not square crops, not stock-photo lighting.
  • 02Atmosphere controlsDirect the style: noir, golden hour, brutalist, pastel dream, neon dystopia. Plain English.
  • 03Trained on 10,000+ designsTypography, hierarchy, and spatial rhythm baked in. No "AI website" aesthetic.
  • 04Regenerate any layerDon't like the hero? Swap it. Don't like the palette? Shift it. Keep the rest intact.
// prompt → outputLIVE
A luxury watchmaker landing page. Slow cinematic motion of brass gears in golden light. Editorial typography, muted palette, generous whitespace.
↓ generating ↓
Motor de Movimento

Imagem. Vídeo. Frames.

Um pipeline de quatro estágios transforma um conceito estático em oito segundos de movimento cinematográfico, e então divide esse movimento em centenas de frames que o navegador pode reproduzir instantaneamente.

  • 01Image-to-videoState-of-the-art video synthesis. Subtle camera moves, particle drift, environmental motion.
  • 02Frame extractionHundreds of optimized frames at the resolution your visitors actually need.
  • 03No WebGL. No Three.js.Native browser scroll. Works on any device, any browser, any year.
  • 04Adaptive qualityFrame count and resolution adjust automatically for low-bandwidth visitors.
// frame sequence240 / 240
001
060
120
180
240
01 ▸ generate cinematic still
02 ▸ animate to 8-second video
03 ▸ extract 240 frames
04 ▸ encode scroll-locked playback
Estúdio Visual

Para quando os prompts não são suficientes.

Depois de lançar seu primeiro site, o estúdio de nós é onde você constrói o segundo de forma diferente. Conecte qualquer modelo de IA, qualquer pipeline, qualquer saída.

  • 01Node-based pipelinesChain text-to-image, image-to-video, upscale, background removal, and more.
  • 02Reusable workflowsSave a pipeline once. Run it on a hundred briefs. Consistent output across a brand.
  • 03Honest about the curveNodes take a few hours to learn. We've put a starter pack in the docs.
// node pipelineRUNNING
Input
Prompt
Generate
Image v3
Process
Upscale 4x
Animate
Video Gen
Output
Frames
Reprodução por Rolagem

Filme, controlado pela roda.

Cada evento de rolagem avança um frame. Cada frame é pré-renderizado. O resultado parece um filme, funciona como um site estático e roda em um celular de cinco anos.

  • 01Frame interpolationButtery 60fps playback even on mid-range hardware.
  • 02Parallax depth layersForeground, midground, background — each scrolls at its own speed.
  • 03Mobile-first physicsTouch-scroll behavior tuned per device. No janky momentum.
  • 04Sub-2s load timeAggressive frame compression. Lazy-loaded sequences.
// scroll playback
↓ scroll
cinematic
depth
↑ release
Exportação para Produção

Seu site. Seu código.

Baixe um ZIP. Implante no Vercel, Netlify ou seu próprio servidor. O Draftly não te hospeda, não te prende, nem cobra por visitante. O código é seu.

  • 01Semantic HTML5Accessible markup. Screen-reader friendly. SEO-ready out of the box.
  • 02Tailwind CSSThe framework your team already uses. Customize anything in your editor.
  • 03Express API starterOptional backend included. Push to GitHub. Deploy in one click.
  • 04One-click deploy targetsPre-configured for 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
Responsivo

Uma compilação. Toda tela.

Breakpoints do Tailwind, escalas de tipografia fluida e resoluções de frame adaptativas significam que seu site parece intencional em um monitor 4K e em um celular de 360px.

  • 01Fluid typographyHeadlines scale with viewport, not abrupt breakpoint jumps.
  • 02Adaptive frame qualityMobile gets 480p frames. Desktop gets 1080p. Automatic.
  • 03Touch-first interactionsScroll, tap, swipe — all behave like a native app.
// responsive

Desktop · 1440px

Tablet · 768px

Mobile · 375px

O pipeline

Cinco passos. Cinco minutos.

i

Passo 01

Presets

ii

Passo 02

Prompt

iii

Passo 03

Image

iv

Passo 04

Video

v

Passo 05

Frames

vi

Passo 06

Ship

Prompts iniciais

Pule a página em branco. Comece com intenção.

SaaS Landing

Hero · Features · Pricing

Studio Portfolio

Editorial · Case studies

Luxury E-com

Product · Story · Cart

Agency Site

Manifesto · Work · Contact

Comparado

Onde o Draftly se encaixa na stack.

Draftly		FramerWebflowSpline
Website presets gallery● 50+ templates———
AI prompt-to-site● Full pipelinePartial——
3D motion (no WebGL)● Native scroll——WebGL 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
Na prática

Lançado por fundadores, estúdios, solistas.

“We pitched a $40k brand site using a Draftly export. The client thought we'd hired a Three.js team. We hadn't.

Mara VelascoFounder · Northbound Studio

“Our hero section used to take a designer two weeks. Now it takes a prompt and an espresso.

Daniel ParkHead of Growth · Lumen Labs

“The exported code is cleaner than what most agencies hand off. We host it ourselves. No platform lock.

Priya IyerEngineering Lead · Fold & Co.
Especificações técnicas

Os detalhes chatos, declarados honestamente.

Browser Support

Chrome, Safari, Firefox, Edge — last two versions. Tested on iOS 14+ and Android 9+.

Export Format

ZIP archive containing HTML, CSS (Tailwind), JS, frame sequences (WebP or AVIF).

Typical File Size

2–6 MB per site, depending on frame count and resolution. Aggressive compression.

Self-Host Requirements

Optional. 8GB VRAM minimum for local AI inference. Supports Gemini and Fal.ai keys.

API Access

Pro plan and above. REST endpoints for programmatic generation and pipeline triggers.

Performance

Target LCP under 1.5s. Lazy frame loading. Adaptive quality per connection.

Perguntas

Feitas, respondidas.

Does Draftly host my site?

+
No. You export a ZIP and deploy anywhere — Vercel, Netlify, Cloudflare Pages, your own server. No platform lock-in.

Who owns the exported code?

+
You do. The HTML, CSS, JS, and frame assets are yours to modify, resell, white-label, or open-source as you see fit.

Do I need to know WebGL or Three.js?

+
No. The scroll engine runs on native browser scroll plus frame playback. No 3D library is required at runtime.

Can I bring my own AI keys?

+
Yes. Connect Gemini, Fal.ai, or self-hosted open-source models. You control the inference budget.

Do I need a paid plan to start?

+
Yes. Choose Basic ($25/mo) or higher on the pricing page to unlock 3D Builder, Studio credits, and monthly generation limits.

Pare de pagar US$ 5.000 por uma seção hero.

Descreva o que você quer. O Draftly cria um site 3D com rolagem em minutos. Grátis para começar. Seu para lançar.

Comece a Construir Grátis →Ver Preços