Resumen de características · 001 / 16

Todas las herramientas que necesita para lanzar un cinemático sitio 3D.

Empiece con un preset impresionante y edite directamente, o construya un sitio 3D inmersivo con scroll a partir de una sola indicación. No se requieren conocimientos de WebGL. No se requiere título de diseño. No más indicaciones interminables en un lienzo en blanco.

001
031
061
091
121
151
181
211
Presets de sitios web

Omita el lienzo en blanco.

Elija un preset pulido, haga clic para editar texto y medios, y publique en un subdominio gratuito de Draftly o conecte su propio DNS — el mismo flujo de publicación que el constructor 3D.

  • 01UI lista para producciónPlantillas para SaaS, agencias, portfolios y lanzamientos con movimiento y diseño ya configurados.
  • 02Hacer clic para editarCambia el texto y las imágenes directamente en la vista previa — sin reconstruir desde cero.
  • 03Publicar y dominio personalizadoLanza en *.draftly.space o apunta tu dominio con registros DNS A.
  • 04Exportación ZIPDescarga el proyecto completo en planes Pro — alójalo donde quieras.
// presets gallery50+
preset · 01
preset · 02
preset · 03
preset · 04
click-to-edit · publish → yoursite.draftly.space
custom domain · ZIP on Pro
Generación por IA

Escríbelo. Lánzalo.

Describe el sitio web que deseas — el ambiente, la industria, la atmósfera — y Draftly ensambla una experiencia de desplazamiento cinematográfica completa solo con tus palabras.

  • 01Generación de imágenes cinematográficasComposiciones de héroe optimizadas para un encuadre web-first — sin recortes cuadrados, sin iluminación de fotos de stock.
  • 02Controles de atmósferaDirige el estilo: noir, hora dorada, brutalista, sueño pastel, distopía neón. En lenguaje sencillo.
  • 03Entrenado con más de 10.000 diseñosTipografía, jerarquía y ritmo espacial integrados. Sin la estética de "sitio web de IA".
  • 04Regenerar cualquier capa¿No te gusta el héroe? Cámbialo. ¿No te gusta la paleta? Modifícala. Mantén el 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 Movimiento

Imagen. Video. Fotogramas.

Una secuencia de cuatro etapas convierte un concepto estático en ocho segundos de movimiento cinematográfico, luego divide ese movimiento en cientos de fotogramas que el navegador puede reproducir al instante.

  • 01Imagen a videoSíntesis de video de última generación. Movimientos sutiles de cámara, deriva de partículas, movimiento ambiental.
  • 02Extracción de fotogramasCientos de fotogramas optimizados con la resolución que tus visitantes realmente necesitan.
  • 03Sin WebGL. Sin Three.js.Desplazamiento nativo del navegador. Funciona en cualquier dispositivo, cualquier navegador, cualquier año.
  • 04Calidad adaptativaEl número de fotogramas y la resolución se ajustan automáticamente para visitantes con ancho de banda bajo.
// frame sequence240 / 240
001
060
120
180
240
01generate cinematic still
02animate to 8-second video
03extract 240 frames
04encode scroll-locked playback
Estudio Visual

Para cuando los prompts no son suficientes.

Una vez que hayas lanzado tu primer sitio, el estudio de nodos es donde construyes el segundo de manera diferente. Conecta cualquier modelo de IA, cualquier secuencia, cualquier salida.

  • 01Secuencias basadas en nodosEncadena texto a imagen, imagen a video, escalado, eliminación de fondo y más.
  • 02Flujos de trabajo reutilizablesGuarda una secuencia una vez. Ejecútala en cien proyectos. Salida consistente en toda una marca.
  • 03Honestos sobre la curva de aprendizajeAprender a usar los nodos lleva unas pocas horas. Hemos incluido un paquete de inicio en la documentación.
// node pipelineRUNNING
Input
Prompt
Generate
Image v3
Process
Upscale 4x
Animate
Video Gen
Output
Frames
Reproducción por Desplazamiento

Película, controlada por la rueda.

Cada evento de desplazamiento avanza un fotograma. Cada fotograma está prerrenderizado. El resultado se siente como una película, funciona como un sitio estático y es compatible con un teléfono de hace cinco años.

  • 01Interpolación de fotogramasReproducción fluida a 60 fps incluso en hardware de gama media.
  • 02Capas de profundidad con paralajePrimer plano, plano medio, fondo: cada uno se desplaza a su propia velocidad.
  • 03Física optimizada para móvilComportamiento de desplazamiento táctil ajustado por dispositivo. Sin impulsos bruscos.
  • 04Tiempo de carga inferior a 2 segundosCompresión agresiva de fotogramas. Secuencias de carga diferida.
// scroll playback
↓ scroll
cinematic
depth
↑ release
Exportación para Producción

Tu sitio. Tu código.

Descarga un ZIP. Despliega en Vercel, Netlify o tu propio servidor. Draftly no te aloja, no te encierra ni te cobra por visitante. El código es tuyo.

  • 01HTML5 SemánticoMarcado accesible. Compatible con lectores de pantalla. Listo para SEO de fábrica.
  • 02Tailwind CSSEl framework que tu equipo ya utiliza. Personaliza cualquier cosa en tu editor.
  • 03Plantilla de API ExpressBackend opcional incluido. Sube a GitHub. Despliega en un clic.
  • 04Destinos de despliegue en un clicPreconfigurado 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
Adaptable

Una compilación. Cada pantalla.

Los puntos de interrupción de Tailwind, las escalas de tipografía fluida y las resoluciones de fotogramas adaptables hacen que tu sitio se vea intencional en un monitor 4K y en un teléfono de 360px.

  • 01Tipografía fluidaLos titulares se escalan con el viewport, sin saltos bruscos de puntos de interrupción.
  • 02Calidad de fotograma adaptableEl móvil obtiene fotogramas de 480p. El escritorio obtiene 1080p. Automático.
  • 03Interacciones optimizadas para el tactoDesplazar, tocar, deslizar: todo se comporta como una aplicación nativa.
// responsive

Desktop · 1440px

Tablet · 768px

Mobile · 375px

El flujo de trabajo

Dos caminos. Una plataforma.

i

Paso 01

Preajustes

ii

Paso 02

Prompt

iii

Paso 03

Imagen

iv

Paso 04

Video

v

Paso 05

Fotogramas

vi

Paso 06

Lanzar

Prompts de inicio

Olvídese de la página en blanco. Empiece con intención.

Landing de SaaS

Principal · Características · Precios

Portafolio de Estudio

Editorial · Casos de estudio

E-commerce de Lujo

Producto · Historia · Carrito

Sitio de Agencia

Manifiesto · Trabajo · Contacto

Comparativa

Dónde encaja Draftly en el 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
En acción

Lanzado por fundadores, estudios, solistas.

Presentamos un sitio de marca de $40k usando una exportación de Draftly. El cliente pensó que habíamos contratado un equipo de Three.js. No fue así.

Mara VelascoFundadora · Northbound Studio

Nuestra sección principal solía tomarle dos semanas a un diseñador. Ahora solo requiere un prompt y un espresso.

Daniel ParkJefe de Crecimiento · Lumen Labs

El código exportado es más limpio que el que entregan la mayoría de las agencias. Lo alojamos nosotros mismos. Sin dependencia de plataforma.

Priya IyerLíder de Ingeniería · Fold & Co.
Especificaciones técnicas

Los detalles aburridos, expuestos con honestidad.

Compatibilidad con navegadores

Chrome, Safari, Firefox, Edge — últimas dos versiones. Probado en iOS 14+ y Android 9+.

Formato de exportación

Archivo ZIP que contiene HTML, CSS (Tailwind), JS, secuencias de fotogramas (WebP o AVIF).

Tamaño de archivo típico

2–6 MB por sitio, dependiendo del número de fotogramas y la resolución. Compresión agresiva.

Requisitos de autoalojamiento

Opcional. 8GB de VRAM mínimo para inferencia de IA local. Compatible con claves de Gemini y Fal.ai.

Acceso a la API

Plan Pro y superiores. Puntos finales REST para generación programática y disparadores de pipeline.

Rendimiento

LCP objetivo inferior a 1.5s. Carga diferida de fotogramas. Calidad adaptativa por conexión.

Preguntas

Preguntadas, respondidas.

¿Draftly aloja mi sitio?

+
No. Usted exporta un ZIP y lo despliega en cualquier lugar — Vercel, Netlify, Cloudflare Pages, su propio servidor. Sin dependencia de plataforma.

¿Quién es el propietario del código exportado?

+
Usted lo es. El HTML, CSS, JS y los activos de fotogramas son suyos para modificar, revender, usar con marca blanca o de código abierto como considere oportuno.

¿Necesito saber WebGL o Three.js?

+
No. El motor de desplazamiento funciona con el desplazamiento nativo del navegador más la reproducción de fotogramas. No se requiere ninguna biblioteca 3D en tiempo de ejecución.

¿Puedo usar mis propias claves de IA?

+
Sí. Conecte Gemini, Fal.ai o modelos de código abierto autoalojados. Usted controla el presupuesto de inferencia.

¿Necesito un plan de pago para empezar?

+
Sí. Elija el plan Básico ($25/mes) o superior en la página de precios para desbloquear 3D Builder, créditos de Studio y límites de generación mensuales.

Deje de pagar $5,000 por una sección principal.

Describa lo que desea. Draftly construye un sitio 3D impulsado por desplazamiento en minutos. Suscríbase para lanzar.