🎬 حزمة صفحات الهبوط السينمائية · cinematic-landing-kit

حزمة ذاكرة وسياق جاهزة تجعل Claude Code يُنتج صفحة هبوط فاخرة، سينمائية، مبنية على السكرول (بروح Apple × Cartier / Hermès) لأي منتج أو موضوع — بلا محاولات فاشلة وبلا أخطاء برمجية. وتُولَّد كل الأصول البصرية عبر Higgsfield.

البرومبت القويّ وحده لا يكفي لضبط سياق مشروع معقّد؛ فالذكاء الاصطناعي قد ينسى أو يهلوس إذا كثُرت الأوامر. لذلك هذه الهدية ليست نصوصًا تنسخها، بل ملفات الذاكرة التي تحمل الحمض النووي للتجربة كاملة. ضعها في مجلد مشروعك، فيقرأها Claude Code تلقائيًا ويفهم المعمارية والقوانين وطريقة ربط Higgsfield مسبقًا — توفيرٌ لآلاف التوكنز، ونتائج سينمائية فورية.

🧬 لماذا "ذاكرة" وليست برومبت؟

كل القرارات الصعبة والدروس المؤلمة من بناءٍ إنتاجيٍّ حقيقي مكتوبةٌ هنا كقواعد دائمة: كيف تُبنى المعمارية، ما الذي يُرفَض فورًا، وكيف يُربَط Higgsfield بدقّة. حين يقرأها Claude Code، لا يبدأ من الصفر ولا يكرّر أخطاءً اكتشفناها سلفًا — بل ينطلق مباشرةً نحو النتيجة الصحيحة.

📂 ما الذي بالداخل

cinematic-landing-kit/
├── CLAUDE.md                         ← يقرأه Claude Code تلقائيًا (الخلاصة + قائمة التحقق)
├── memory/                           ← الحمض النووي مفصّلًا (٩ ملفات مرجعية)
│   ├── 01-build-playbook.md              الهيكل + محرّك الحركة (Lenis+GSAP) + الهيدر + الـAmbient + الـCTA
│   ├── 02-scroll-film-canvas.md          الحيلة الأساسية: فيلم كتسلسل إطارات على Canvas (لا video.currentTime)
│   ├── 03-seamless-transitions.md        مقاطع متطابقة الحدود بلا قطع، ولا تذويب صورتين ثابتتين
│   ├── 04-cinematic-hero.md              البطل حيّ (دخول + هالة + ذرّات + إمالة 3D + لمعان)، لا صورة + Fade
│   ├── 05-theming.md                     فاتح/داكن، multiply/screen، وفخّ الـBlend تحت تحويلات GSAP
│   ├── 06-higgsfield-pipeline.md         أوامر CLI، النماذج، قراءة result_url بلا jq، إعادة المحاولة، استخراج الإطارات
│   ├── 07-modesty-and-identity.md        الاحتشام إلزامي + ثبات هوية المنتج + مكان العلامة الصحيح
│   ├── 08-preview-and-env-gotchas.md     توقّف rAF في التبويب المخفي، التحقق عبر eval، لا jq/ffmpeg، فخّ ‎<picture>‎
│   └── 09-quality-bar.md                 معيار الذوق + قائمة الرفض التلقائي
└── templates/
    ├── index.skeleton.html           ← المحرّك كاملًا وشغّالًا، تملأ ‎{{PLACEHOLDERS}}‎ فقط
    ├── HIGGSFIELD-PROMPTS.template.md ← قالب برومبتات مرقّم بحدود متطابقة وبنود الهوية والاحتشام
    └── launch.json                   ← إعداد خادم المعاينة الثابت

🚀 كيفية الاستخدام

١. انسخ محتويات هذه الحزمة إلى جذر مشروعك: ضع CLAUDE.md وmemory/ وtemplates/ بجانب كود مشروعك. سيقرأ Claude Code ملف CLAUDE.md تلقائيًا في بداية الجلسة، ويُحيلك منه إلى memory/ لكل التفاصيل.

٢. افتح Claude Code في المجلد، وأعطِه منتجك:

«ابنِ صفحة هبوط سينمائية فاخرة للمنتج التالي: ‹اسمك ووصفه›. هذه صورته المرجعية ‹أرفِق الصورة أو ضعها في assets/›. حلّل المنتج، قرّر الهوية والقصّة، ثم نفّذ حسب CLAUDE.md.»

٣. سيتبع Claude المسار تلقائيًا:

• يحلّل المنتج وصورته، ويقرّر الثيم (فاتح/داكن) والقصّة والألوان والنصوص.
• يبني الصفحة من templates/index.skeleton.html (المحرّك جاهزٌ وصحيح).
• يكتب قائمة Higgsfield من القالب، ويولّد الأصول: مراجع ← إطارات مفتاحية ← مقاطع متطابقة الحدود ← تسلسل إطارات + قصاصة شفّافة للبطل، ويتحقّق من كل أصلٍ بصريًا.
• يتحقّق عبر المعاينة، ثم يحسّن الأصول للويب.

٤. عاينها في متصفّحٍ مرئيّ (Chrome/Edge)، لا في تبويبٍ مخفيّ — التبويب المخفي يوقف الأنيميشن (التفاصيل في memory/08).

✅ المتطلبات

• Claude Code (يقرأ CLAUDE.md تلقائيًا).
• Higgsfield متّصلًا (عبر الـ MCP أو الـ CLI / مهارة higgsfield-generate) ومُسجَّل الدخول.
• Node.js لمعاينة الملف الثابت (npx serve).
• Python + OpenCV (cv2) لاستخراج إطارات الفيلم (بديلًا عن ffmpeg).

⭐ القوانين الذهبية (لا تتنازل عنها)

1. الفيلم = تسلسل إطارات يُرسَم على Canvas؛ لا تُمرّر video.currentTime أبدًا (يسبّب تقطّعًا).
2. البطل سينمائيٌّ حيّ (دخول + هالة + ذرّات + إمالة ثلاثية الأبعاد + لمعان)، لا صورة ثابتة + Fade.
3. استخدم قصاصة شفّافة للعناصر المتحرّكة — فخاصية mix-blend-mode تنكسر تحت أيّ transform من GSAP.
4. تحوّلات بلا قطع: مقاطع متطابقة الحدود (نهاية مقطع = بداية التالي)، ولا تذوّب صورتين ثابتتين.
5. خلفية محيطة تتغيّر تدريجيًا لكل قسم، وهيدر يختفي عند النزول ويعود عند الصعود.
6. الاحتشام إلزامي لأي شخص يظهر، وهوية المنتج ثابتة عبر كل الأصول.
7. تايبوغرافي نظيف (للعربية: El Messiri للعناوين + Tajawal للنص، وتجنّب Amiri)، وبدائل لطيفة عند فقد أيّ أصل.

الشرح الكامل وأسباب كل قرار في مجلد memory/. ابدأ دائمًا من CLAUDE.md.

مبنيّةٌ من تجربة إنتاجٍ حقيقية. أعد استخدامها بحرّية.