Features overview · 001 / 16

Every tool you need to ship a cinematic 3D site.

From a single prompt to production-ready code in under five minutes. No WebGL knowledge. No design degree. No template library to wade through.

Start Building Free →View Pricing
001
031
061
091
121
151
181
211
Three pillars

One workflow. Three layers of creative control.

AI Generation

Type it. Ship it.

Describe the website you want — the mood, the industry, the atmosphere — and Draftly assembles a complete cinematic scroll experience from your words alone.

  • 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 ↓
Motion Engine

Image. Video. Frames.

A four-stage pipeline turns a still concept into eight seconds of cinematic motion, then slices that motion into hundreds of frames the browser can play back instantly.

  • 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
Visual Studio

For when prompts aren't enough.

Once you've shipped your first site, the node studio is where you build your second one differently. Connect any AI model, any pipeline, any output.

  • 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
Scroll Playback

Film, controlled by the wheel.

Every scroll event advances a frame. Every frame is pre-rendered. The result feels like a film, performs like a static site, and works on a five-year-old phone.

  • 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
Production Export

Your site. Your code.

Download a ZIP. Deploy to Vercel, Netlify, or your own server. Draftly doesn't host you, lock you in, or charge per visitor. The code is yours.

  • 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
Responsive

One build. Every screen.

Tailwind breakpoints, fluid type scales, and adaptive frame resolutions mean your site looks intentional on a 4K monitor and a 360px phone.

  • 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

The pipeline

Five steps. Five minutes.

i

Step 01

Prompt

ii

Step 02

Image

iii

Step 03

Video

iv

Step 04

Frames

v

Step 05

Export

Starter prompts

Skip the blank page. Start with intent.

SaaS Landing

Hero · Features · Pricing

Studio Portfolio

Editorial · Case studies

Luxury E-com

Product · Story · Cart

Agency Site

Manifesto · Work · Contact

Compared

Where Draftly fits in the stack.

Draftly		FramerWebflowSpline
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
In the wild

Shipped by founders, studios, soloists.

“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.
Technical specs

The boring details, honestly stated.

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

Premium tier. REST endpoints for programmatic generation and pipeline triggers.

Performance

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

Questions

Asked, answered.

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.

How does the free trial work?

+
One full 3D site on a *.draftly.space subdomain. No credit card. Email verification on first export, not signup.

Stop paying $5,000 for a hero section.

Describe what you want. Draftly builds a scroll-driven 3D site in minutes. Free to start. Yours to ship.

Start Building Free →View Pricing