Aperçu des fonctionnalités · 001 / 16

Tous les outils dont vous avez besoin pour livrer un site 3D cinématique.

Partez d'un préréglage époustouflant et modifiez-le sur place — ou construisez un site 3D immersif à défilement à partir d'une seule invite. Aucune connaissance WebGL. Aucun diplôme en design. Aucune invite interminable sur une toile vierge.

001
031
061
091
121
151
181
211
Préréglages de sites web

Évitez la toile vierge.

Choisissez un préréglage soigné, cliquez pour modifier le texte et les médias, et publiez sur un sous-domaine Draftly gratuit ou connectez votre propre DNS — le même flux de publication que le constructeur 3D.

  • 01Interface utilisateur prête pour la productionModèles SaaS, d'agence, de portfolio et de lancement avec mouvement et mise en page déjà configurés.
  • 02Cliquer pour modifierModifiez le texte et les images directement dans l'aperçu — sans avoir à tout reconstruire.
  • 03Publication & domaine personnaliséLancez sur *.draftly.space ou pointez votre domaine avec des enregistrements DNS A.
  • 04Exportation ZIPTéléchargez le projet complet avec les plans Pro — hébergez-le où vous voulez.
// presets gallery50+
preset · 01
preset · 02
preset · 03
preset · 04
click-to-edit · publish → yoursite.draftly.space
custom domain · ZIP on Pro
Génération par IA

Écrivez-le. Publiez-le.

Décrivez le site web que vous souhaitez — l'ambiance, le secteur, l'atmosphère — et Draftly assemble une expérience de défilement cinématique complète à partir de vos seuls mots.

  • 01Génération d'images cinématiquesCompositions d'images principales optimisées pour un cadrage web — pas de recadrages carrés, pas d'éclairage de banque d'images.
  • 02Contrôles d'ambianceDirigez le style : noir, heure dorée, brutaliste, rêve pastel, dystopie néon. En langage clair.
  • 03Entraîné sur plus de 10 000 designsTypographie, hiérarchie et rythme spatial intégrés. Pas d'esthétique "site web IA".
  • 04Régénérez n'importe quelle coucheL'image principale ne vous plaît pas ? Échangez-la. La palette ne vous plaît pas ? Modifiez-la. Gardez le reste intact.
// prompt → outputLIVE
A luxury watchmaker landing page. Slow cinematic motion of brass gears in golden light. Editorial typography, muted palette, generous whitespace.
↓ generating ↓
Moteur de mouvement

Image. Vidéo. Images.

Un pipeline en quatre étapes transforme un concept statique en huit secondes de mouvement cinématique, puis découpe ce mouvement en des centaines d'images que le navigateur peut lire instantanément.

  • 01Image vers vidéoSynthèse vidéo de pointe. Mouvements de caméra subtils, dérive de particules, mouvement environnemental.
  • 02Extraction d'imagesDes centaines d'images optimisées à la résolution dont vos visiteurs ont réellement besoin.
  • 03Pas de WebGL. Pas de Three.js.Défilement natif du navigateur. Fonctionne sur n'importe quel appareil, n'importe quel navigateur, n'importe quelle année.
  • 04Qualité adaptativeLe nombre d'images et la résolution s'ajustent automatiquement pour les visiteurs à faible bande passante.
// frame sequence240 / 240
001
060
120
180
240
01generate cinematic still
02animate to 8-second video
03extract 240 frames
04encode scroll-locked playback
Studio Visuel

Pour quand les invites ne suffisent pas.

Une fois votre premier site publié, le studio de nœuds est l'endroit où vous construisez votre deuxième site différemment. Connectez n'importe quel modèle d'IA, n'importe quel pipeline, n'importe quelle sortie.

  • 01Pipelines basés sur des nœudsEnchaînez texte-vers-image, image-vers-vidéo, mise à l'échelle, suppression d'arrière-plan, et plus encore.
  • 02Flux de travail réutilisablesEnregistrez un pipeline une fois. Exécutez-le sur une centaine de briefs. Sortie cohérente pour toute une marque.
  • 03Honnête sur la courbe d'apprentissageLes nœuds prennent quelques heures à apprendre. Nous avons inclus un pack de démarrage dans la documentation.
// node pipelineRUNNING
Input
Prompt
Generate
Image v3
Process
Upscale 4x
Animate
Video Gen
Output
Frames
Lecture par défilement

Film, contrôlé par la molette.

Chaque événement de défilement fait avancer une image. Chaque image est pré-rendue. Le résultat ressemble à un film, fonctionne comme un site statique et est compatible avec un téléphone vieux de cinq ans.

  • 01Interpolation d'imagesLecture fluide à 60 ips même sur du matériel de milieu de gamme.
  • 02Couches de profondeur parallaxePremier plan, plan intermédiaire, arrière-plan — chacun défile à sa propre vitesse.
  • 03Physique mobile-firstComportement de défilement tactile ajusté par appareil. Pas d'inertie saccadée.
  • 04Temps de chargement inférieur à 2sCompression d'images agressive. Séquences à chargement différé.
// scroll playback
↓ scroll
cinematic
depth
↑ release
Exportation pour la production

Votre site. Votre code.

Téléchargez un ZIP. Déployez sur Vercel, Netlify ou votre propre serveur. Draftly ne vous héberge pas, ne vous enferme pas et ne facture pas par visiteur. Le code vous appartient.

  • 01HTML5 sémantiqueBalises accessibles. Compatible avec les lecteurs d'écran. Prêt pour le SEO dès l'installation.
  • 02Tailwind CSSLe framework que votre équipe utilise déjà. Personnalisez tout dans votre éditeur.
  • 03Kit de démarrage API ExpressBackend optionnel inclus. Poussez vers GitHub. Déployez en un clic.
  • 04Cibles de déploiement en un clicPréconfiguré pour 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
Adaptatif

Une seule compilation. Pour chaque écran.

Les points d'arrêt Tailwind, les échelles de typographie fluides et les résolutions d'images adaptatives garantissent que votre site a l'apparence souhaitée sur un moniteur 4K et un téléphone de 360px.

  • 01Typographie fluideLes titres s'adaptent à la taille de la fenêtre d'affichage, sans sauts de points d'arrêt brusques.
  • 02Qualité d'image adaptativeLe mobile reçoit des images 480p. Le bureau reçoit des images 1080p. Automatique.
  • 03Interactions tactiles prioritairesDéfilement, toucher, glisser — tout se comporte comme une application native.
// responsive

Desktop · 1440px

Tablet · 768px

Mobile · 375px

Le pipeline

Deux chemins. Une seule plateforme.

i

Étape 01

Préréglages

ii

Étape 02

Invite

iii

Étape 03

Image

iv

Étape 04

Vidéo

v

Étape 05

Images

vi

Étape 06

Livrer

Invites de démarrage

Évitez la page blanche. Commencez avec intention.

Page d'accueil SaaS

Héro · Fonctionnalités · Tarifs

Portfolio de studio

Éditorial · Études de cas

E-commerce de luxe

Produit · Histoire · Panier

Site d'agence

Manifeste · Travaux · Contact

Comparaison

Où Draftly s'intègre dans la pile technologique.

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
Sur le terrain

Livré par des fondateurs, des studios, des indépendants.

Nous avons présenté un site de marque de 40 000 $ en utilisant une exportation Draftly. Le client pensait que nous avions engagé une équipe Three.js. Ce n'était pas le cas.

Mara VelascoFondatrice · Northbound Studio

Notre section héro prenait auparavant deux semaines à un designer. Maintenant, il suffit d'une invite et d'un expresso.

Daniel ParkResponsable de la croissance · Lumen Labs

Le code exporté est plus propre que ce que la plupart des agences livrent. Nous l'hébergeons nous-mêmes. Pas de verrouillage de plateforme.

Priya IyerResponsable Ingénierie · Fold & Co.
Spécifications techniques

Les détails ennuyeux, honnêtement présentés.

Prise en charge des navigateurs

Chrome, Safari, Firefox, Edge — deux dernières versions. Testé sur iOS 14+ et Android 9+.

Format d'exportation

Archive ZIP contenant HTML, CSS (Tailwind), JS, séquences d'images (WebP ou AVIF).

Taille de fichier typique

2–6 Mo par site, selon le nombre d'images et la résolution. Compression agressive.

Exigences d'auto-hébergement

Optionnel. 8 Go de VRAM minimum pour l'inférence IA locale. Prend en charge les clés Gemini et Fal.ai.

Accès API

Plan Pro et supérieur. Points de terminaison REST pour la génération programmatique et les déclencheurs de pipeline.

Performances

LCP cible inférieur à 1,5s. Chargement paresseux des images. Qualité adaptative par connexion.

Questions

Posées, répondues.

Draftly héberge-t-il mon site ?

+
Non. Vous exportez un ZIP et le déployez n'importe où — Vercel, Netlify, Cloudflare Pages, votre propre serveur. Aucun verrouillage de plateforme.

Qui est propriétaire du code exporté ?

+
C'est vous. Le HTML, CSS, JS et les ressources de trame vous appartiennent pour les modifier, revendre, marquer en marque blanche ou les rendre open-source comme bon vous semble.

Dois-je connaître WebGL ou Three.js ?

+
Non. Le moteur de défilement fonctionne avec le défilement natif du navigateur et la lecture d'images. Aucune bibliothèque 3D n'est requise à l'exécution.

Puis-je utiliser mes propres clés d'IA ?

+
Oui. Connectez Gemini, Fal.ai ou des modèles open-source auto-hébergés. Vous contrôlez le budget d'inférence.

Ai-je besoin d'un forfait payant pour commencer ?

+
Oui. Choisissez le forfait Basic (25 $/mois) ou supérieur sur la page de tarification pour débloquer le 3D Builder, les crédits Studio et les limites de génération mensuelles.

Arrêtez de payer 5 000 $ pour une section héros.

Décrivez ce que vous voulez. Draftly construit un site 3D défilant en quelques minutes. Abonnez-vous pour publier.