PRESET GALLERYBeta Version

Best Previews

Every preset here is inspired by a real Draftly customer — their brief, their industry, their visual taste — shared with their consent so you can start from something proven. Pick one, make it yours, ship it.

Mindloop — Newsletter

Black monochrome newsletter landing with liquid-glass UI, scroll word reveal, platform cards, and HLS CTA video.

Power AI — Dark Video Hero

Full-screen dark AI landing with CloudFront hero video, 220px General Sans headline, indigo→purple→amber AI gradient, liquid-glass navbar & logo marquee, and requestAnimationFrame fade loop.

Halo — USD Halo

Premium fintech stablecoin landing on #F5F5F5 with TT Norms Pro, hero video, savings cards, backers marquee, and Commerce use-case panel.

Targo — Swift and Simple Transport

Logistics hero with Rubik typography, brand red #EE3F2C on black, fullscreen CloudFront video (no overlay), clipped-corner CTAs, and glass consultation card.

Baby Track — Business Automation

Two-section scroll landing with Cloudinary video hero, Manrope/Italiana/Marck Script typography, red cloud parallax (#FF0000), S.P.D signature, and motion/react scroll transforms.

Auto Machines — Automation Hero

Full-viewport black hero with lazy Spline 3D, Orbitron gradient headline, technical specs card, and mono pill badges.

From our community

Builders who shipped with presets

Real people, real launches — shared with their consent.

"

Our e-commerce store needed a landing page fast. Draftly nailed the brand feel. Sales converted from day one.

Isabella Rossi
Isabella Rossi
Founder, Lumina Co.
🇮🇹 Italy
"

Draftly replaced a $4,000 agency quote with a 15-minute session. The result was honestly better.

Arjun Mehta
Arjun Mehta
Startup Founder
🇮🇳 India
"

I built my restaurant's full site in under 10 minutes. Customers keep asking who designed it — I just say Draftly.

Priya Sharma
Priya Sharma
Restaurant Owner
🇮🇳 India
drag
"

Launched my SaaS landing page before the weekend was over. No agency, no templates, no HTML — just a prompt.

Lukas Becker
Lukas Becker
Indie Developer
🇩🇪 Germany
"

My clients think I hired a design agency. I used a Draftly preset and swapped the copy. Done in an afternoon.

Amara Osei
Amara Osei
Freelance Consultant
🇬🇭 Ghana

Drag to explore · auto-advances

3D Scroll Templates

Immersive scroll-reactive websites

Seven cinematic 3D scroll starters — AI generates motion, extracts frames, and builds a scroll-synced site. Click Use This to open the builder with prompts pre-loaded.

Meridian — Cinematic scroll
Premium / Scroll

Meridian — Cinematic scroll

utility-scroll.draftly.space

Scroll theatreValues deckTexture

Click card to preview prompts

TripVault — Travel App
Mobile App

TripVault — Travel App

tripvault.draftly.space

TravelSaaSBlue Sky

Click card to preview prompts

Shopnest — Ecommerce
Ecommerce

Shopnest — Ecommerce

shopnest.draftly.space

EcommercePastel3D Objects

Click card to preview prompts

OrbitCRM — Agency CRM
SaaS / CRM

OrbitCRM — Agency CRM

orbitcrm.draftly.space

AgencyGlass UINature BG

Click card to preview prompts

SyncBase — Team Collaboration
Productivity

SyncBase — Team Collaboration

syncbase.draftly.space

ProductivityKanbanLight UI

Click card to preview prompts

StackForge — Dev Platform
Developer Tool

StackForge — Dev Platform

stackforge.draftly.space

Dev ToolsDarkGrid World

Click card to preview prompts

VisionForge — AI Video
AI Platform

VisionForge — AI Video

visionforge.draftly.space

AIVideoCinematic

Click card to preview prompts

Open 3D Website Builder

Use any template above — both prompts auto-load in the builder chat

The Pipeline

From prompt to production

Use a stunning preset and edit in place — or describe a 3D scroll site from scratch. AI generates motion, extracts frames, and ships production HTML without a long prompt.

01

Pick a preset

Start from production-ready UI — customize copy and media in minutes.

02

Describe

Tell us the visual atmosphere you want.

03

Generate

AI creates a cinematic keyframe.

04

Animate

The image becomes a smooth 8s video.

05

Build

AI extracts frames for a 3D scroll.

06

Deploy

Download a ZIP with HTML, CSS, JS.

Zero Code

Your video becomesa scroll experience

AI generates a cinematic video, then extracts hundreds of frames. As visitors scroll, the frames play forward — creating a 3D parallax effect that feels like a film.

No WebGL, no Three.js, no code — just native browser scroll with buttery-smooth frame interpolation. Works perfectly on every device and browser.

Scroll to animate
Extracting Frames400 / 400
Pro Tools

Built for serious websites

Presets give you polished UI instantly; the 3D builder adds cinematic scroll on top. Chain videos, swap media, layer elements over frames, and export production-ready code.

Multi-Video Continuation

Chain multiple videos end-to-end for longer scroll animations. First frame of each picks up perfectly from the last.

Full-Stack Export

Download a ZIP with frontend + backend starter. Includes Express API.

Iterative Chat Editing

Chat with AI to change copy, move sections, adjust colors — live.

Product Injection

Upload product photos and tell AI where to place them directly in 3D.

Adjustable FPS

Slide between 10–40 FPS to control frame density and scroll speed.

Build 3D websites
10x faster with AI

Describe what you want once. Draftly generates cinematic motion, extracts frames, and builds a scroll-driven 3D website in minutes — not days. Download the ZIP and ship.

400+
Frames per Site
~8s
Video Duration
10–40
Adjustable FPS
ZIP
Ready to Deploy