مساحة عمل محلية
منشئ مواقع بالذكاء الاصطناعي
حوّل فكرتك إلى قصة موقع متحركة قابلة للتصدير.
مزود التوليد
استخدم المزود التجريبي للمعاينة المحلية، أو اربط مفتاح OpenAI الخاص بك للتوليد من الخادم.
الخطوة 1 من 6
Concept
صف الجمهور والوعد الذي تريد أن تنقله الحركة.
The AI Website Animation Builder turns a written concept into an animated landing page you can preview in the browser and export as a single HTML file. You describe the audience and the promise, pick a template, optionally add a start and end image, choose an entrance motion — fade, slide, float, zoom or reveal — then edit the headline, colors and call-to-action before exporting.
Everything runs locally: story frames never leave your browser, the generated document uses pure CSS animations that respect reduced-motion preferences, and the preview is sandboxed. The demo provider works without any key, while connecting your own OpenAI account unlocks server-side generation — the key stays encrypted on the server and is never kept in the browser.
الأسئلة الشائعة
هل أحتاج إلى مزود ذكاء اصطناعي لتجربة المنشئ؟
لا. المزود التجريبي المدمج يولّد معاينة محلية مجاناً دون أي مفتاح. اربط مفتاح OpenAI الخاص بك فقط حين تريد توليداً من الخادم بحسابك — يُخزَّن المفتاح مشفراً على الخادم ولا يبقى في المتصفح أبداً.
هل تُرفع صور القصة المرفقة؟
لا. صور البداية والنهاية الاختيارية تبقى في جلسة متصفحك للمعاينة. حدّها 1 ميغابايت لكل صورة (PNG أو JPG أو WebP) ولا تُرسل إلى مزود التوليد.
ماذا يحتوي ملف التصدير؟
ملف HTML مستقل حركاته CSS خالصة — بلا مكتبة تشغيل ولا تبعيات — مع ملف JSON للمشروع إن أردت متابعة التحرير لاحقاً. الحركة تتوقف تلقائياً للزوار الذين يفضّلون تقليل الحركة.
هل يمكنني تحرير الموقع المولّد؟
نعم. خطوة التحرير تغيّر العنوان والعنوان الفرعي والوصف والألوان وزر الدعوة، والمعاينة تتحدث فوراً على شاشات الكمبيوتر واللوحي والجوال. كل ما تغيّره يدخل في التصدير التالي.
دليل استخدام الأداة
يحوّل منشئ مواقع الحركة فكرةً مكتوبةً إلى قصة موقع متحركة صغيرة يمكنك معاينتها في المتصفح وتصديرها كملف واحد. بدل كتابة مفاتيح CSS يدوياً، تصف الجمهور والشعور الذي تريده، وتختار بنية، فيجمّع المنشئ حركة مشهداً بمشهد يمكنك تحريرها بعد ذلك كصفحة عادية.
- يدلك المعالج على ست خطوات: الفكرة، وصور القصة الاختيارية، والقالب، والحركة، والتحرير، والتصدير. خطوة الفكرة تسأله ماذا يعد الموقع ولمن — وهذا النص يقود عنوان الصفحة ونصوصها المولّدة. صور البداية والنهاية اختيارية وتبقى في جلسة متصفحك ولا تصل إلى مزود التوليد أبداً.
- الحركة تُطبَّق كحركات دخول فقط — تلاشي أو انزلاق أو تماوج أو تكبير أو كشف — بمدة وتأخير ومنحنى تسارع تتحكم بها. النتيجة HTML وCSS خالصان: تُفتح من ملف مباشرة بلا مكتبة جافاسكربت، وتتوقف تلقائياً حين يفضّل الزائر تقليل الحركة.
لماذا تُحرّك صفحة هبوط أصلاً
الشاشة الأولى التي تتحرك بقصد توجّه العين: يهبط العنوان أولاً، ثم يليه الدليل، ثم تأتي الدعوة للإجراء أخيراً — وهذا هو الفرق بين ملصق ثابت وصفحة تحكي قصتها القصيرة في أول ثلاث ثوانٍ، وهي تقريباً المدة التي يقرّر فيها الزائر الجديد البقاء.
كتابة هذه الحركات يدوياً بطيئة وسهلة الكسر. يبقيها المنشئ خفيفة بالاكتفاء بتحريك transform وopacity، ومتسقة مع القالب الذي اخترته، وقابلة للتعديل — غيّر الألوان أو الزر وتنتقل الحركة معها دون تغيير.
نصيحة: صدّر ملف HTML وافتحه محلياً قبل مشاركته. الملف مستقل تماماً، فتضعه على أي استضافة، أو تحتفظ به كمسودة أولى وتُنقّح النصوص قبل التصدير النهائي.