Visão geral dos recursos · 001 / 16

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

Comece com um preset impressionante e edite no local — ou construa um site 3D imersivo com rolagem a partir de um único prompt. Sem conhecimento de WebGL. Sem diploma de design. Sem prompts infinitos de tela em branco.

Comece a Criar Grátis →Explorar PresetsVer Preços
001
031
061
091
121
151
181
211
Quatro pilares

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

— 01

Presets de Sites

Mais de 50 sites prontos para produção — personalize no local, publique no Draftly ou no seu domínio. Nenhum prompt longo é necessário.

Explorar presets →
— 02

Geração por IA

Treinado com mais de 10.000 designs profissionais. Gera imagens, vídeos e layouts a partir de prompts em linguagem natural.

Saiba mais →
— 03

Motor de Rolagem

Reprodução quadro a quadro sincronizada com a rolagem da viewport. Sem WebGL, sem Three.js, sem perda de desempenho.

Saiba mais →
— 04

Exportação para Produção

HTML semântico limpo, Tailwind CSS e JavaScript. Implante em qualquer lugar. Tenha controle do seu código.

Saiba mais →
Presets de Sites

Pule a tela em branco.

Escolha um preset polido, 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.

  • 01UI pronta para produçãoModelos para SaaS, agências, portfólios e lançamentos com movimento e layout já configurados.
  • 02Clique para editarAltere texto e imagens diretamente na prévia — sem reconstruir do zero.
  • 03Publicar e domínio personalizadoLance em *.draftly.space ou aponte seu domínio com registros DNS A.
  • 04Exportar ZIPBaixe o projeto completo nos planos Pro — hospede onde quiser.
// 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.

  • 01Geração de imagem cinematográficaComposições de herói otimizadas para enquadramento web-first — sem cortes quadrados, sem iluminação de banco de imagens.
  • 02Controles de atmosferaDirecione o estilo: noir, golden hour, brutalista, sonho pastel, distopia neon. Em inglês simples.
  • 03Treinado em mais de 10.000 designsTipografia, hierarquia e ritmo espacial incorporados. Sem estética de "site de IA".
  • 04Regerar qualquer camadaNão gostou do herói? Troque. Não gostou da paleta? Mude. Mantenha o resto intacto.
// 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. Quadros.

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

  • 01Imagem para vídeoSíntese de vídeo de última geração. Movimentos sutis de câmera, deriva de partículas, movimento ambiental.
  • 02Extração de quadrosCentenas de quadros otimizados na resolução que seus visitantes realmente precisam.
  • 03Sem WebGL. Sem Three.js.Rolagem nativa do navegador. Funciona em qualquer dispositivo, qualquer navegador, qualquer ano.
  • 04Qualidade adaptativaContagem de quadros e resolução se ajustam automaticamente para visitantes com baixa largura de banda.
// 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.

  • 01Pipelines baseados em nósEncadeie texto para imagem, imagem para vídeo, upscale, remoção de fundo e muito mais.
  • 02Fluxos de trabalho reutilizáveisSalve um pipeline uma vez. Execute-o em cem briefs. Saída consistente em toda a marca.
  • 03Honestos sobre a curvaNós levam algumas horas para aprender. Colocamos um pacote inicial na documentação.
// node pipelineRUNNING
Input
Prompt
Generate
Image v3
Process
Upscale 4x
Animate
Video Gen
Output
Frames
Reprodução de Rolagem

Filme, controlado pela roda.

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

  • 01Interpolação de quadrosReprodução suave de 60fps mesmo em hardware de médio porte.
  • 02Camadas de profundidade parallaxPrimeiro plano, plano médio, plano de fundo — cada um rola em sua própria velocidade.
  • 03Física mobile-firstComportamento de rolagem por toque ajustado por dispositivo. Sem impulso instável.
  • 04Tempo de carregamento abaixo de 2sCompressão agressiva de quadros. Sequências com carregamento lento.
// 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. Draftly não hospeda você, não te prende ou cobra por visitante. O código é seu.

  • 01HTML5 SemânticoMarcação acessível. Compatível com leitores de tela. Pronto para SEO de fábrica.
  • 02Tailwind CSSO framework que sua equipe já usa. Personalize qualquer coisa no seu editor.
  • 03Starter de API ExpressBackend opcional incluído. Envie para o GitHub. Implante em um clique.
  • 04Alvos de implantação com um cliquePré-configurado para 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 quadro adaptativas significam que seu site parece intencional em um monitor 4K e em um celular de 360px.

  • 01Tipografia fluidaTítulos escalam com a viewport, não com saltos abruptos de breakpoint.
  • 02Qualidade de quadro adaptativaCelulares recebem quadros 480p. Desktops recebem 1080p. Automático.
  • 03Interações priorizando o toqueRolar, tocar, deslizar — todos se comportam como um aplicativo nativo.
// responsive

Desktop · 1440px

Tablet · 768px

Mobile · 375px

O pipeline

Dois caminhos. Uma plataforma.

i

Etapa 01

Predefinições

ii

Etapa 02

Prompt

iii

Etapa 03

Imagem

iv

Etapa 04

Vídeo

v

Etapa 05

Frames

vi

Etapa 06

Publicar

Prompts iniciais

Pule a página em branco. Comece com propósito.

Landing Page SaaS

Hero · Recursos · Preços

Portfólio de Estúdio

Editorial · Estudos de caso

E-commerce de Luxo

Produto · História · Carrinho

Site de Agência

Manifesto · Trabalhos · Contato

Comparativo

Onde o Draftly se encaixa na sua 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

Publicado por fundadores, estúdios, freelancers.

“Apresentamos um site de marca de $40 mil usando uma exportação do Draftly. O cliente pensou que tínhamos contratado uma equipe Three.js. Não tínhamos.

Mara VelascoFundadora · Northbound Studio

“Nossa seção hero costumava levar duas semanas para um designer. Agora, leva um prompt e um espresso.

Daniel ParkHead de Crescimento · Lumen Labs

“O código exportado é mais limpo do que a maioria das agências entrega. Nós o hospedamos por conta própria. Sem bloqueio de plataforma.

Priya IyerLíder de Engenharia · Fold & Co.
Especificações técnicas

Os detalhes técnicos, honestamente apresentados.

Compatibilidade com Navegadores

Chrome, Safari, Firefox, Edge — duas últimas versões. Testado em iOS 14+ e Android 9+.

Formato de Exportação

Arquivo ZIP contendo HTML, CSS (Tailwind), JS, sequências de quadros (WebP ou AVIF).

Tamanho Típico do Arquivo

2–6 MB por site, dependendo da contagem de quadros e resolução. Compressão agressiva.

Requisitos para Auto-Hospedagem

Opcional. 8GB de VRAM mínimo para inferência de IA local. Suporta chaves Gemini e Fal.ai.

Acesso à API

Plano Pro e superiores. Endpoints REST para geração programática e gatilhos de pipeline.

Desempenho

LCP alvo abaixo de 1.5s. Carregamento preguiçoso de quadros. Qualidade adaptativa por conexão.

Perguntas

Perguntadas, respondidas.

O Draftly hospeda meu site?

+
Não. Você exporta um ZIP e o implanta em qualquer lugar — Vercel, Netlify, Cloudflare Pages, seu próprio servidor. Sem dependência de plataforma.

Quem é o proprietário do código exportado?

+
Você é. Os ativos HTML, CSS, JS e de quadros são seus para modificar, revender, usar como marca própria ou tornar de código aberto como desejar.

Preciso saber WebGL ou Three.js?

+
Não. O motor de rolagem funciona com a rolagem nativa do navegador mais a reprodução de quadros. Nenhuma biblioteca 3D é necessária em tempo de execução.

Posso usar minhas próprias chaves de IA?

+
Sim. Conecte Gemini, Fal.ai ou modelos de código aberto auto-hospedados. Você controla o orçamento de inferência.

Preciso de um plano pago para começar?

+
Sim. Escolha o plano Básico (US$25/mês) ou superior na página de preços para desbloquear o 3D Builder, créditos de Estúdio e limites de geração mensais.

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

Descreva o que você quer. O Draftly constrói um site 3D com rolagem em minutos. Assine para lançar.

Ver Preços →Ver Preços