رسوم متحركة لواجهة المستخدم (بأسلوب تسجيل شاشة منتج)، 16:9، ~7.3 ثانية. عرض توضيحي لـ منشئ مخططات واجهة تطبيق الجوال (wireframe builder): بطاقة عنوان سوداء واحدة، ثم مساحة عمل رمادية فاتحة عالية الإضاءة ومسطّحة تُضاف فيها الكتل إلى لوحة هاتف واحدة تلو الأخرى. لوحة الألوان: مساحة العمل/الإطار رمادي فاتح #F0F0F0، اللوحات/القوائم رمادي أغمق قليلاً #E8E8E8، النص الأساسي أسود شديد القتامة #1A1A1A، التسميات الثانوية رمادي خفيف #A4A4A1، اللوحة بيضاء #FFFFFF، ولون واحد مميز أصفر ليموني ساطع #E4E41B يُستخدم فقط على الزر الرئيسي والعنصر النشط/المحدد.
حرج — الكاميرا: بعد بطاقة العنوان تكون اللقطة تسجيل شاشة ثابت (LOCKED)، مسطّح، ومباشر تمامًا. تأطير المشهد وحجمه ثابتان طوال الوقت — لا توجد أي حركة كاميرا من أي نوع (لا تقريب، لا دفع للداخل، لا تحريك جانبي). كل الحركة على مستوى العناصر فقط: مؤشر مؤشر الفأرة، تبديلات فورية للوحات، وكتل تظهر على اللوحة. (تجاهل أي إيهام بـ"دفع للداخل" — لا يتغيّر حجم الإطار.)
المشهد 1 — بطاقة العنوان (0.0–~0.9 ثانية): لوحة سوداء صلبة #000000. نص أبيض عريض بدون نسب #FFFFFF في المنتصف يقرأ "Rapid wireframing". يبقى للحظة، ثم يكشف قطع صلب (بدون تلاشي) عن الواجهة. ثابت.
المشهد 2 — الحالة الأساسية للمحرر (~0.9–2.0 ثانية): مساحة العمل الرمادية الفاتحة. شريط جانبي أيسر، من الأعلى إلى الأسفل: "Now editing" / "First screen"؛ صف "Status" مع نقطة حمراء صغيرة + "to be done"؛ ثم قائمة عمودية بأنواع الكتل مرتّبة بالترتيب — Text، Button، Line، Spacer، Icon(s)، Gallery، Placeholder، Input، Controls، Navigation، Cards — كل منها مع رمز أحادي اللون صغير. المنتصف: لوحة بيضاء فارغة بنسب هاتف (طويلة). أسفل اليمين: رابط "Discard changes" + زر أصفر ليموني "Save and exit". الحركة: الواجهة بأكملها موجودة بالفعل عند القطع؛ يتحرك مؤشر الفأرة نحو قائمة الكتل. لا تقريب.
المشهد 3 — إضافة Spacer (~2.0–3.5 ثانية): ينقر المؤشر على "Spacer". تظهر كتلة spacer ذات حدود متقطعة على اللوحة (مع تلميح باهت "Press Enter/return to add a new block"). تُستبدل لوحة إعدادات على اليمين تقرأ "Spacer block settings" مع شرائح حجم XS S M L XL (حجم صغير محدد/مميز بالأصفر الليموني). الحركة: محتوى اللوحة اليمنى يتبدل تبديلًا صلبًا (بدون تخفيف حركة)؛ الكتلة تظهر فجأة على اللوحة. لا تقريب.
المشهد 4 — إضافة وسائط / عنصر نائب للصورة (~3.5–5.0 ثانية): يعود المؤشر إلى القائمة ويختار كتلة الصورة ("Placeholder" / "Media"). يظهر فجأة على اللوحة عنصر نائب كبير مربع رمادي فاتح للصورة (مع رمز صورة متموج) أسفل الـspacer. تتبدل اللوحة اليمنى إلى "Media block settings" وتُظهر مصغرات تخطيط مع تحديد "Image placeholder". الحركة: تبديل فوري + ظهور مفاجئ، يقوده المؤشر. لا تقريب (التأطير ثابت — لا تقم بتكبير الإطار هنا).
المشهد 5 — إضافة نص (~5.0–7.3 ثانية): يختار المؤشر "Text" (يتم تمييز عنصر القائمة بالأصفر الليموني). تُضاف كتلة نص إلى اللوحة: تُظهر العنصر النائب "Write something down…"، ثم يُكتب عنوان آليًا حرفًا بحرف (مثل "Welcome!"). تتبدل اللوحة اليمنى إلى "Text block settings" مع حقل إدخال نص، وأدوات تنسيق (B / I / U + محاذاة) وزر أصفر ليموني "Generate text". الحركة: النص يُكتب آليًا على اللوحة؛ اللوحات تتبدل تبديلًا صلبًا. ينتهي المقطع على هذه الحالة. لا تقريب.
ملخص الحركة: بطاقة عنوان سوداء → قطع صلب → تسجيل شاشة ثابت، مباشر، ومسطّح لمنشئ المخططات. مؤشر الفأرة يقود كل إجراء: اختيار نوع كتلة من القائمة اليسرى → تظهر الكتلة فجأة على لوحة الهاتف البيضاء المركزية → تتبدل لوحة الإعدادات اليمنى تبديلًا صلبًا لتطابقها (Spacer → Media → Text). النص يُكتب آليًا. كل انتقال هو قطع/تبديل صلب فوري بدون تخفيف حركة، والكاميرا لا تتحرك أبدًا ولا يتغير حجم الإطار أبدًا — مسطّح، ثابت، ومباشر طوال الوقت.