cinematic-landing-kit

KO | EN

gitlite — search

#typescript #ai-agents #ai #dsh-plugin #deepseek-harness #open-source #claude-code #codex #cli #developer-tools #react #windows

cinematic-landing-kit

★ 60 Open GitHub ↗

ملفات ذاكرة/سياق جاهزة تجعل Claude Code يُنتج صفحات هبوط سينمائية فاخرة لأي منتج عبر Higgsfield — Drop-in DNA for cinematic, scroll-driven luxury landing pages.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 🎬 حزمة صفحات الهبوط السينمائية · 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`.

---

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

</div>

cinematic-landing-kit

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README