نظرة عامة على الميزات · 001 / 16

كل الأدوات التي تحتاجها لإطلاق سينمائي موقع ثلاثي الأبعاد.

ابدأ من قالب مذهل وقم بالتعديل مباشرة — أو ابنِ موقع تمرير ثلاثي الأبعاد غامر من موجه واحد. لا حاجة لمعرفة WebGL. لا حاجة لشهادة تصميم. لا توجيهات لا نهائية على لوحة فارغة.

001
031
061
091
121
151
181
211
قوالب المواقع

تجاوز اللوحة الفارغة.

اختر قالبًا مصقولًا، انقر لتعديل النص والوسائط، وانشر على نطاق فرعي مجاني من Draftly أو اربط DNS الخاص بك — نفس سير عمل النشر مثل منشئ 3D.

  • 01واجهة مستخدم جاهزة للإنتاجقوالب SaaS، وكالات، محافظ أعمال، وإطلاق مع حركة وتخطيط مضبوطين مسبقًا.
  • 02انقر للتعديلغيّر النصوص والصور مباشرة في المعاينة — لا حاجة لإعادة البناء من الصفر.
  • 03النشر والنطاق المخصصأطلق على *.draftly.space أو وجه نطاقك باستخدام سجلات DNS A.
  • 04تصدير ZIPحمّل المشروع الكامل في خطط Pro — استضفه في أي مكان تريده.
// presets gallery50+
preset · 01
preset · 02
preset · 03
preset · 04
click-to-edit · publish → yoursite.draftly.space
custom domain · ZIP on Pro
التوليد بالذكاء الاصطناعي

اكتبه. انشره.

صف الموقع الذي تريده — المزاج، الصناعة، الجو العام — ويقوم Draftly بتجميع تجربة تمرير سينمائية كاملة من كلماتك وحدها.

  • 01توليد صور سينمائيةتكوينات رئيسية مُعدلة للتأطير المناسب للويب — ليست قصاصات مربعة، وليست إضاءة صور مخزون.
  • 02ضوابط الجو العاموجه النمط: نوار، ساعة ذهبية، وحشي، حلم باستيلي، ديستوبيا نيون. باللغة الإنجليزية البسيطة.
  • 03مدرب على أكثر من 10,000 تصميمالطباعة، التسلسل الهرمي، والإيقاع المكاني مدمجة. لا جمالية "موقع الذكاء الاصطناعي".
  • 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
الاستوديو المرئي

عندما لا تكون المطالبات كافية.

بمجرد إطلاق موقعك الأول، يصبح استوديو العقد هو المكان الذي تبني فيه موقعك الثاني بطريقة مختلفة. اربط أي نموذج ذكاء اصطناعي، أي مسار عمل، أي مخرج.

  • 01مسارات عمل قائمة على العقدربط تحويل النص إلى صورة، الصورة إلى فيديو، الترقية، إزالة الخلفية، والمزيد.
  • 02سير عمل قابلة لإعادة الاستخداماحفظ مسار عمل مرة واحدة. شغله على مئات الملخصات. إخراج متسق عبر العلامة التجارية.
  • 03صريحون بشأن منحنى التعلمتستغرق العقد بضع ساعات لتعلمها. لقد وضعنا حزمة بدء في الوثائق.
// node pipelineRUNNING
Input
Prompt
Generate
Image v3
Process
Upscale 4x
Animate
Video Gen
Output
Frames
تشغيل بالتمرير

فيلم، يتم التحكم فيه بواسطة العجلة.

كل حدث تمرير يقدم إطارًا. كل إطار مُعد مسبقًا. النتيجة تبدو كفيلم، وتعمل كموقع ثابت، وتعمل على هاتف عمره خمس سنوات.

  • 01استيفاء الإطاراتتشغيل سلس بمعدل 60 إطارًا في الثانية حتى على الأجهزة متوسطة المدى.
  • 02طبقات عمق المنظرمقدمة، وسط، خلفية — كل منها يتمرر بسرعته الخاصة.
  • 03فيزياء محسّنة للجوالسلوك التمرير باللمس مُعدّل لكل جهاز. لا يوجد زخم متقطع.
  • 04وقت تحميل أقل من ثانيتينضغط إطارات مكثف. تسلسلات محملة ببطء.
// scroll playback
↓ scroll
cinematic
depth
↑ release
تصدير للإنتاج

موقعك. شفرتك.

قم بتنزيل ملف ZIP. انشر على Vercel، Netlify، أو خادمك الخاص. Draftly لا يستضيفك، لا يقيدك، ولا يفرض رسومًا لكل زائر. الشفرة ملكك.

  • 01HTML5 دلاليترميز سهل الوصول. متوافق مع قارئات الشاشة. جاهز لتحسين محركات البحث فورًا.
  • 02Tailwind CSSالإطار الذي يستخدمه فريقك بالفعل. خصص أي شيء في محرر النصوص الخاص بك.
  • 03حزمة بدء Express 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
متجاوب

بناء واحد. لكل شاشة.

نقاط توقف Tailwind، مقاييس الخطوط السائلة، ودقة الإطارات المتكيفة تعني أن موقعك يبدو مقصودًا على شاشة 4K وهاتف 360 بكسل.

  • 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 مع المكدس.

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
من الواقع

تم إطلاقه بواسطة مؤسسين، استوديوهات، ومستقلين.

عرضنا موقع علامة تجارية بقيمة 40 ألف دولار باستخدام تصدير Draftly. اعتقد العميل أننا استأجرنا فريق Three.js. لم نفعل ذلك.

Mara Velascoمؤسسة · استوديو نورثباوند

كان قسمنا الرئيسي يستغرق من المصمم أسبوعين. الآن يستغرق موجهًا وقهوة إسبريسو.

Daniel Parkرئيس قسم النمو · Lumen Labs

الكود المصدّر أنظف مما تسلمه معظم الوكالات. نستضيفه بأنفسنا. لا يوجد قفل للمنصة.

Priya Iyerرئيس مهندسين · Fold & Co.
المواصفات الفنية

التفاصيل المملة، مذكورة بصراحة.

دعم المتصفحات

كروم، سفاري، فايرفوكس، إيدج — آخر إصدارين. تم الاختبار على iOS 14+ وأندرويد 9+.

صيغة التصدير

أرشيف ZIP يحتوي على HTML، CSS (Tailويند)، JS، تسلسلات الإطارات (WebP أو AVIF).

حجم الملف النموذجي

2–6 ميجابايت لكل موقع، حسب عدد الإطارات والدقة. ضغط مكثف.

متطلبات الاستضافة الذاتية

اختياري. 8 جيجابايت VRAM كحد أدنى للاستدلال المحلي للذكاء الاصطناعي. يدعم مفاتيح Gemini و Fal.ai.

الوصول إلى API

خطة Pro وما فوق. نقاط نهاية REST للتوليد البرمجي ومحفزات خطوط الأنابيب.

الأداء

استهداف LCP أقل من 1.5 ثانية. تحميل الإطارات الكسول. جودة متكيفة لكل اتصال.

أسئلة

سُئلت، أُجيبت.

هل تستضيف Draftly موقعي؟

+
لا. يمكنك تصدير ملف ZIP ونشره في أي مكان — Vercel، Netlify، Cloudflare Pages، أو خادمك الخاص. لا يوجد تقييد بمنصة معينة.

من يملك الكود المصدّر؟

+
أنت تملكها. ملفات HTML و CSS و JS وأصول الإطارات ملكك لتعديلها أو إعادة بيعها أو وضع علامتك التجارية عليها أو جعلها مفتوحة المصدر كما تراه مناسبًا.

هل أحتاج إلى معرفة WebGL أو Three.js؟

+
لا. يعمل محرك التمرير على التمرير الأصلي للمتصفح بالإضافة إلى تشغيل الإطارات. لا تتطلب أي مكتبة ثلاثية الأبعاد وقت التشغيل.

هل يمكنني استخدام مفاتيح الذكاء الاصطناعي الخاصة بي؟

+
نعم. يمكنك ربط Gemini، Fal.ai، أو نماذج مفتوحة المصدر مستضافة ذاتيًا. أنت تتحكم في ميزانية الاستدلال.

هل أحتاج إلى خطة مدفوعة للبدء؟

+
نعم. اختر خطة Basic (25 دولارًا/شهر) أو أعلى من صفحة الأسعار لفتح قفل 3D Builder، ورصيد Studio، وحدود التوليد الشهرية.

توقف عن دفع 5,000 دولار مقابل قسم البطل.

صف ما تريده. Draftly يبني موقعًا ثلاثي الأبعاد يعتمد على التمرير في دقائق. اشترك للنشر.