विशेषताओं का अवलोकन · 001 / 16

आपको आवश्यक हर उपकरण लॉन्च करने के लिए सिनेमैटिक 3D साइट।

एक शानदार प्रीसेट से शुरू करें और वहीं एडिट करें — या एक प्रॉम्प्ट से एक इमर्सिव 3D स्क्रॉल साइट बनाएँ। कोई WebGL ज्ञान नहीं। कोई डिज़ाइन डिग्री नहीं। कोई अंतहीन खाली-कैनवास प्रॉम्प्टिंग नहीं।

001
031
061
091
121
151
181
211
चार स्तंभ

एक वर्कफ़्लो। तीन स्तरों का रचनात्मक नियंत्रण।

वेबसाइट प्रीसेट

खाली को छोड़ें कैनवास।

एक पॉलिश किया हुआ प्रीसेट चुनें, कॉपी और मीडिया एडिट करने के लिए क्लिक करें, और एक मुफ्त ड्राफ्टली सबडोमेन पर प्रकाशित करें या अपना DNS कनेक्ट करें — 3D बिल्डर के समान शिप फ़्लो।

  • 01प्रोडक्शन-रेडी UISaaS, एजेंसी, पोर्टफोलियो, और लॉन्च टेम्पलेट जिनमें मोशन और लेआउट पहले से ही सेट हैं।
  • 02एडिट करने के लिए क्लिक करेंप्रीव्यू में सीधे टेक्स्ट और इमेज बदलें — स्क्रैच से फिर से बनाने की आवश्यकता नहीं।
  • 03प्रकाशित करें और कस्टम डोमेन*.draftly.space पर लॉन्च करें या DNS A-रिकॉर्ड के साथ अपना डोमेन पॉइंट करें।
  • 04ज़िप एक्सपोर्टप्रो प्लान पर पूरा प्रोजेक्ट डाउनलोड करें — जहाँ चाहें होस्ट करें।
// presets gallery50+
preset · 01
preset · 02
preset · 03
preset · 04
click-to-edit · publish → yoursite.draftly.space
custom domain · ZIP on Pro
AI जनरेशन

इसे टाइप करें। इसे लॉन्च करें।

अपनी इच्छित वेबसाइट का वर्णन करें — मूड, उद्योग, वातावरण — और ड्राफ्टली केवल आपके शब्दों से एक पूर्ण सिनेमैटिक स्क्रॉल अनुभव तैयार करता है।

  • 01सिनेमैटिक इमेज जनरेशनवेब-फर्स्ट फ़्रेमिंग के लिए ट्यून की गई हीरो कंपोज़िशन — न तो स्क्वायर क्रॉप्स, न ही स्टॉक-फोटो लाइटिंग।
  • 02वातावरण नियंत्रणशैली निर्देशित करें: नोयर, गोल्डन आवर, ब्रूटलिस्ट, पेस्टल ड्रीम, नियॉन डिस्टोपिया। साधारण अंग्रेजी।
  • 0310,000+ डिज़ाइनों पर प्रशिक्षितटाइपोग्राफी, पदानुक्रम, और स्थानिक लय अंतर्निहित। कोई "AI वेबसाइट" सौंदर्यशास्त्र नहीं।
  • 04किसी भी लेयर को फिर से जनरेट करेंहीरो पसंद नहीं? बदल दें। पैलेट पसंद नहीं? बदल दें। बाकी को वैसे ही रहने दें।
// prompt → outputLIVE
A luxury watchmaker landing page. Slow cinematic motion of brass gears in golden light. Editorial typography, muted palette, generous whitespace.
↓ generating ↓
मोशन इंजन

इमेज। वीडियो। फ़्रेम।

एक चार-चरणीय पाइपलाइन एक स्थिर अवधारणा को आठ सेकंड की सिनेमाई गति में बदल देती है, फिर उस गति को सैकड़ों फ़्रेमों में काट देती है जिन्हें ब्राउज़र तुरंत चला सकता है।

  • 01छवि से वीडियोअत्याधुनिक वीडियो संश्लेषण। सूक्ष्म कैमरा चालें, कणों का बहाव, पर्यावरणीय गति।
  • 02फ़्रेम निष्कर्षणआपके आगंतुकों को वास्तव में आवश्यक रिज़ॉल्यूशन पर सैकड़ों अनुकूलित फ़्रेम।
  • 03कोई WebGL नहीं। कोई Three.js नहीं।नेटिव ब्राउज़र स्क्रॉल। किसी भी डिवाइस, किसी भी ब्राउज़र, किसी भी वर्ष पर काम करता है।
  • 04अनुकूली गुणवत्ताकम बैंडविड्थ वाले आगंतुकों के लिए फ़्रेम गणना और रिज़ॉल्यूशन स्वचालित रूप से समायोजित होते हैं।
// frame sequence240 / 240
001
060
120
180
240
01generate cinematic still
02animate to 8-second video
03extract 240 frames
04encode scroll-locked playback
विज़ुअल स्टूडियो

जब प्रॉम्प्ट पर्याप्त न हों।

एक बार जब आप अपनी पहली साइट भेज देते हैं, तो नोड स्टूडियो वह जगह है जहाँ आप अपनी दूसरी साइट को अलग तरीके से बनाते हैं। किसी भी AI मॉडल, किसी भी पाइपलाइन, किसी भी आउटपुट को कनेक्ट करें।

  • 01नोड-आधारित पाइपलाइनेंटेक्स्ट-टू-इमेज, इमेज-टू-वीडियो, अपस्केल, बैकग्राउंड रिमूवल और बहुत कुछ को एक साथ जोड़ें।
  • 02पुनः प्रयोज्य वर्कफ़्लोएक पाइपलाइन को एक बार सहेजें। इसे सौ ब्रीफ पर चलाएं। एक ब्रांड में सुसंगत आउटपुट।
  • 03सीखने की वक्र के बारे में ईमानदारनोड्स को सीखने में कुछ घंटे लगते हैं। हमने दस्तावेज़ों में एक स्टार्टर पैक रखा है।
// node pipelineRUNNING
Input
Prompt
Generate
Image v3
Process
Upscale 4x
Animate
Video Gen
Output
Frames
स्क्रॉल प्लेबैक

फ़िल्म, नियंत्रित पहिए से।

प्रत्येक स्क्रॉल इवेंट एक फ़्रेम को आगे बढ़ाता है। प्रत्येक फ़्रेम पूर्व-रेंडर किया गया है। परिणाम एक फ़िल्म जैसा लगता है, एक स्थिर साइट की तरह प्रदर्शन करता है, और पाँच साल पुराने फ़ोन पर भी काम करता है।

  • 01फ़्रेम इंटरपोलेशनमध्य-श्रेणी के हार्डवेयर पर भी सहज 60fps प्लेबैक।
  • 02पैरालेक्स गहराई परतेंअग्रभूमि, मध्यभूमि, पृष्ठभूमि — प्रत्येक अपनी गति से स्क्रॉल करता है।
  • 03मोबाइल-प्रथम भौतिकीप्रत्येक डिवाइस के अनुसार ट्यून किया गया टच-स्क्रॉल व्यवहार। कोई झटकेदार गति नहीं।
  • 042 सेकंड से कम लोड समयआक्रामक फ़्रेम संपीड़न। लेज़ी-लोडेड सीक्वेंस।
// scroll playback
↓ scroll
cinematic
depth
↑ release
उत्पादन निर्यात

आपकी साइट। आपका कोड।

एक ZIP डाउनलोड करें। Vercel, Netlify, या अपने स्वयं के सर्वर पर डिप्लॉय करें। Draftly आपको होस्ट नहीं करता, आपको लॉक नहीं करता, या प्रति आगंतुक शुल्क नहीं लेता। कोड आपका है।

  • 01सिमेंटिक HTML5सुलभ मार्कअप। स्क्रीन-रीडर अनुकूल। बॉक्स से बाहर SEO-तैयार।
  • 02टेलविंड CSSवह फ़्रेमवर्क जिसका आपकी टीम पहले से उपयोग करती है। अपने संपादक में कुछ भी अनुकूलित करें।
  • 03एक्सप्रेस API स्टार्टरवैकल्पिक बैकएंड शामिल। GitHub पर पुश करें। एक क्लिक में डिप्लॉय करें।
  • 04वन-क्लिक डिप्लॉय लक्ष्य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
उत्तरदायी

एक बिल्ड। हर स्क्रीन।

टेलविंड ब्रेकपॉइंट्स, फ़्लूइड टाइप स्केल, और अनुकूली फ़्रेम रिज़ॉल्यूशन का मतलब है कि आपकी साइट 4K मॉनिटर और 360px फ़ोन पर भी सुविचारित दिखती है।

  • 01फ़्लूइड टाइपोग्राफीहेडलाइनें व्यूपोर्ट के साथ स्केल होती हैं, न कि अचानक ब्रेकपॉइंट जंप के साथ।
  • 02अनुकूली फ़्रेम गुणवत्तामोबाइल को 480p फ़्रेम मिलते हैं। डेस्कटॉप को 1080p। स्वचालित।
  • 03टच-प्रथम इंटरैक्शनस्क्रॉल, टैप, स्वाइप — सभी एक नेटिव ऐप की तरह व्यवहार करते हैं।
// responsive

Desktop · 1440px

Tablet · 768px

Mobile · 375px

पाइपलाइन

दो रास्ते। एक प्लेटफ़ॉर्म।

i

चरण 01

प्रीसेट

ii

चरण 02

प्रॉम्प्ट

iii

चरण 03

छवि

iv

चरण 04

वीडियो

v

चरण 05

फ्रेम

vi

चरण 06

डिलीवर करें

शुरुआती प्रॉम्प्ट

खाली पेज छोड़ें। इरादे से शुरू करें।

SaaS लैंडिंग

हीरो · सुविधाएँ · मूल्य निर्धारण

स्टूडियो पोर्टफोलियो

संपादकीय · केस स्टडीज़

लक्ज़री ई-कॉम

उत्पाद · कहानी · कार्ट

एजेंसी साइट

घोषणापत्र · कार्य · संपर्क

तुलना

ड्राफ्टली कहाँ फिट बैठता है स्टैक में।

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
वास्तविक उपयोग में

संस्थापकों द्वारा डिलीवर किया गया, स्टूडियो, एकल कलाकारों द्वारा।

हमने ड्राफ्टली एक्सपोर्ट का उपयोग करके $40k की ब्रांड साइट का प्रस्ताव दिया। क्लाइंट को लगा कि हमने एक Three.js टीम को काम पर रखा है। हमने नहीं किया था।

मारा वेलास्कोसंस्थापक · नॉर्थबाउंड स्टूडियो

हमारे हीरो सेक्शन को डिज़ाइन करने में पहले एक डिज़ाइनर को दो सप्ताह लगते थे। अब इसमें एक प्रॉम्प्ट और एक एस्प्रेसो लगता है।

डैनियल पार्कग्रोथ हेड · ल्यूमेन लैब्स

निर्यात किया गया कोड अधिकांश एजेंसियों द्वारा दिए गए कोड से अधिक स्वच्छ है। हम इसे स्वयं होस्ट करते हैं। कोई प्लेटफ़ॉर्म लॉक नहीं।

प्रिया अय्यरइंजीनियरिंग लीड · फोल्ड एंड कंपनी
तकनीकी विवरण

उबाऊ विवरण, ईमानदारी से बताए गए।

ब्राउज़र समर्थन

Chrome, Safari, Firefox, Edge — पिछले दो संस्करण। iOS 14+ और Android 9+ पर परीक्षण किया गया।

निर्यात प्रारूप

HTML, CSS (Tailwind), JS, फ्रेम सीक्वेंस (WebP या AVIF) वाला ZIP संग्रह।

विशिष्ट फ़ाइल आकार

प्रति साइट 2–6 MB, फ्रेम संख्या और रिज़ॉल्यूशन के आधार पर। सघन संपीड़न।

स्व-होस्टिंग आवश्यकताएँ

वैकल्पिक। स्थानीय AI अनुमान के लिए न्यूनतम 8GB VRAM। जेमिनी और Fal.ai कुंजियों का समर्थन करता है।

API पहुँच

प्रो प्लान और उससे ऊपर। प्रोग्रामेटिक जनरेशन और पाइपलाइन ट्रिगर के लिए REST एंडपॉइंट।

प्रदर्शन

1.5 सेकंड से कम LCP लक्ष्य। लेज़ी फ्रेम लोडिंग। प्रति कनेक्शन अनुकूली गुणवत्ता।

प्रश्न

पूछे गए, उत्तर दिए गए।

क्या Draftly मेरी साइट होस्ट करता है?

+
नहीं। आप एक ZIP निर्यात करते हैं और कहीं भी डिप्लॉय कर सकते हैं — Vercel, Netlify, Cloudflare Pages, या अपने स्वयं के सर्वर पर। कोई प्लेटफ़ॉर्म लॉक-इन नहीं।

निर्यात किए गए कोड का मालिक कौन है?

+
आप। HTML, CSS, JS, और फ्रेम एसेट आपके हैं, जिन्हें आप अपनी इच्छानुसार संशोधित, पुनर्विक्रय, व्हाइट-लेबल या ओपन-सोर्स कर सकते हैं।

क्या मुझे WebGL या Three.js जानने की आवश्यकता है?

+
नहीं। स्क्रॉल इंजन नेटिव ब्राउज़र स्क्रॉल और फ्रेम प्लेबैक पर चलता है। रनटाइम पर किसी 3D लाइब्रेरी की आवश्यकता नहीं है।

क्या मैं अपनी AI कुंजियाँ ला सकता हूँ?

+
हाँ। जेमिनी, Fal.ai, या स्व-होस्टेड ओपन-सोर्स मॉडल कनेक्ट करें। आप अनुमान बजट को नियंत्रित करते हैं।

क्या मुझे शुरू करने के लिए सशुल्क प्लान की आवश्यकता है?

+
हाँ। 3D बिल्डर, स्टूडियो क्रेडिट और मासिक जनरेशन सीमाएँ अनलॉक करने के लिए मूल्य निर्धारण पृष्ठ पर बेसिक ($25/माह) या उच्चतर चुनें।

$5,000 का भुगतान करना बंद करें हीरो सेक्शन के लिए।

आप जो चाहते हैं उसका वर्णन करें। Draftly मिनटों में एक स्क्रॉल-ड्रिवन 3D साइट बनाता है। शिप करने के लिए सदस्यता लें।