النتيجة أولاً
6 ثواني فيديو، 145 فريم. على الموقع ما بتشتغل كفيديو — كل حركة سكرول بتعرض فريم، فالزائر حاسس إنه هو اللي عم يفكّك راسك ويبني اللوغو.
الفيديو هون مضغوط ومكتوم للعرض بس. شوفه حيّ على الصفحة الرئيسية وحرّك السكرول.
1
كيف بتشتغل الفكرة
الفكرة مأخوذة من ترند مواقع الـ 3D اللي فيها راس بيتفكّك مع السكرول. بس بدل ما تبنيه بـ Three.js وأسابيع شغل، بنعمله بـ ٤ مراحل:
01 · Start frame
صورة واقعية لراسك — بألوان هويتك وبالمكان اللي بدك إياه بالكادر.
02 · End frame
لوغو البراند مبني من خيوط — بنفس الكادر ونفس المكان ونفس الحجم.
03 · Video
بتعطي الفريمين لـ Seedance 2.0 كـ start_image و end_image، وهو بيخترع التحوّل اللي بينهم.
04 · Scroll
بتقطّع الفيديو لصور JPG، وبترسمها على <canvas> حسب نسبة السكرول.
ليش فريمين مش برومت وبس؟ لأن بالبرومت لحاله الموديل بيقرّر هو شو شكل البداية والنهاية. لما تثبّت الطرفين، إنت اللي بتتحكم بالهوية والألوان والتكوين — والموديل مسؤول بس عن «الطريق» بينهم.
2
اللي بتحتاجه قبل ما تبلّش
| الشي | ليش |
|---|---|
| حساب Higgsfield | فيه موديل الصور وموديل الفيديو (Seedance 2.0) اللي بيدعم فريم بداية ونهاية |
| Claude Code + Higgsfield MCP | اختياري بس بيوفّر عليك كتير — Claude بيرفع الصور وبيولّد وبيقطّع الفريمات لحاله |
| صورة واضحة إلك | وجه من الأمام، إضاءة منيحة. صورتين أحسن من وحدة |
| اللوغو PNG | مرجع لشكل النهاية — بدونه الموديل بيخترع شعار |
| ألوان هويتك HEX | رح تكتبهن حرفياً بالبرومت. أنا استخدمت #0D1117 خلفية، #2DD4BF أساسي، #F59E0B مميز |
| ffmpeg | لتقطيع الفيديو لفريمات |
ربط Higgsfield بـ Claude Code — أمر واحد (العنوان الرسمي من higgsfield.ai/mcp):
claude mcp add --transport http --scope user higgsfield https://mcp.higgsfield.ai/mcp
تثبيت ffmpeg Windows
winget install ffmpeg
macOS
brew install ffmpeg
إذا لسا ما عندك موقع فيه Hero بالسكرول أصلاً، ابدأ من دليل البورتفوليو السينمائي — هاد الدليل بيكمّل عليه.
فريمين وفيديو
٨٠٪ من جودة النتيجة بتتقرّر هون. الفيديو نفسه أسهل خطوة إذا الفريمين مظبوطين.
3
فريم البداية — راسك بهويتك
ارفع صورتك كـ مرجع، واطلب من موديل الصور (أنا استخدمت gpt_image_2_5، جودة high، دقة 2k، مقاس 16:9) يطلع نسختين. بدّل ألوان الـ HEX بألوانك:
ولّد الفريمات على higgsfield.aiCinematic hyper-realistic 3D digital bust of the exact same man from the reference
photos (same face, same hair, same beard, same skin tone and identity).
HEAD ONLY: a floating disembodied head with a clean sculpted cut just below the jaw
at the upper neck, no shoulders, no clothes, no body. The head is in a slight
three-quarter turn, eyes looking calmly toward the camera, neutral confident
expression, like a premium tech-studio portrait sculpture.
Composition: wide 16:9 frame, the head placed in the LEFT third of the frame,
vertically centered, occupying about 55% of frame height, with generous empty
negative space on the right half for website text.
Background: very dark charcoal navy #0D1117, almost black, with an extremely subtle
faint grid of tiny dim dots fading into darkness toward the edges, soft vignette.
Lighting: moody studio key light on the face, a crisp teal (#2DD4BF) rim light along
one side of the head and jaw, and a warm amber (#F59E0B) rim light on the other side
of the head. Photoreal skin pores, sharp detail, shallow film grain, high-end 3D
render look like a luxury portfolio website hero. No text, no logos, no watermark,
no particles yet.
| الجملة | ليش موجودة |
|---|---|
| HEAD ONLY | الراس لحاله بيتفكّك بشكل أنضف بكتير من جسم كامل بملابس |
| LEFT third | موقعي RTL — النص عاليمين، فالراس لازم يترك مساحة. إذا موقعك إنجليزي اعكسها |
| ألوان HEX | الخلفية لازم تطابق خلفية موقعك، وإلا رح يبان «مستطيل» الفيديو |
| no particles yet | بدون هالجملة بعض الموديلات بتبلّش التأثير من فريم البداية |
4
فريم النهاية — اللوغو من خيوط
هون الغلطة الكبيرة اللي بيعملها الكل: بيولّدوا فريم النهاية من الصفر. لا. أعطِ الموديل فريم البداية نفسه كمرجع أول، واللوغو كمرجع تاني — مشان الكاميرا والخلفية والمكان يضلوا متطابقين.
Use the first reference image as the exact scene: same camera, same framing, same
dark #0D1117 background with the faint dim dot grid and vignette, same lighting mood.
The human head is now GONE. It has fully transformed into a bold 3D capital letter
"D" matching the second reference logo's D shape (thick geometric D with a rounded
right bowl and rectangular counter), occupying exactly the same position and size
the head occupied (left third of frame, same height).
The D is built entirely from thousands of fine glowing fiber-optic strands and cables
in teal #2DD4BF, tightly bundled and flowing along the curve of the letter like woven
cables, with photoreal 3D depth, soft subsurface glow and tiny specular highlights.
The strand tips at the edges glow warm amber #F59E0B like hot fiber-optic ends. A few
last loose strands and tiny glowing particles are still drifting in and settling into
the letter, subtle motion trails. Above the top-right corner of the D floats a small
glowing amber #F59E0B ring (hollow circle), like the orange dot in the logo, made of
the same fiber strands.
Premium cinematic 3D render, luxury tech portfolio website hero, dark moody lighting,
teal rim light, shallow film grain. Right half of the frame stays empty dark negative
space. No human face, no skin, no hair, no text other than the D shape, no watermark,
no rounded square app-icon background.
كيف تختار بين النسخ: حط فريم البداية فوق كل نسخة نهاية وقارن الحدود. اخترت النسخة اللي الـ D فيها بنفس عرض الراس وارتفاعه تقريباً. النسخة التانية كانت مزاحة شوي لتحت — والإزاحة هاي بتطلع بالفيديو كـ «قفزة» مش تحوّل.
ما عندك حرف؟ نفس البرومت بيشتغل لأي شعار بسيط: بدّل وصف الـ D بوصف شكل لوغوك بكلمات هندسية واضحة (دائرة، مثلث، سهم…). الأشكال المعقدة أو اللي فيها نص طويل ما بتطلع منيحة من خيوط.
5
الفيديو — من البداية للنهاية
الإعدادات اللي اشتغلت معي:
Seedance 2.0 على higgsfield.ai- الموديل: seedance_2_0 — وضع std
- الدقة: 1080p · المدة: 6 ثواني · المقاس: 16:9
- الصوت: مطفي — ما رح يشتغل عالموقع أصلاً، ليش تدفع عليه
- المراجع: فريم البداية بدور start_image، والنهاية بدور end_image
Locked-off static camera, no camera movement, dark #0D1117 studio background with
faint dot grid stays perfectly still. The floating realistic human head slowly turns
a little to the side, eyes close calmly. Then the skin begins to disintegrate from the
back of the head forward into thousands of tiny glowing teal particles and fine voxel
fragments, like a digital scan dissolving. The particles stretch into long flowing
teal fiber-optic strands with warm amber glowing tips that stream and swirl through
the air in elegant curves. The strands then gather, weave and wrap tightly together
in the same spot, building the shape of a bold 3D letter D made of bundled teal fiber
cables, and a small amber fiber ring forms above its top right corner. Smooth,
continuous, slow, satisfying VFX morph transformation, premium cinematic 3D render,
soft volumetric glow, no cuts, no text, no extra objects.
| الجملة | ليش موجودة |
|---|---|
| Locked-off static camera | أهم جملة. أي حركة كاميرا بتخلّي الخلفية «تسبح» لما تسكرول، وبتبان مزعجة |
| ترتيب المراحل | لفّة ← تفتّت ← خيوط ← تجمّع. لما توصف التسلسل، الموديل بيوزّع الوقت عليه بدل ما يقفز للنهاية |
| in the same spot | بتمنع الخيوط تبني الحرف بمكان تاني من الكادر |
| slow, no cuts | الفيديو لازم يكون لقطة وحدة متصلة — أي قطع بيطلع كقفزة وقت السكرول |
إذا Higgsfield اقترح عليك Preset (مثلاً «3D RENDER») — ارفضه وولّد حرفياً. الـ presets ما بتحترم فريم البداية والنهاية بنفس الدقة. التوليد بـ 1080p أخد معي حوالي ٣–٤ دقايق.
من فيديو لسكرول
الفيديو ما بيتحط كـ <video>. بيتقطّع لصور، والسكرول بيختار أي صورة تنعرض.
6
تقطيع الفريمات — كمبيوتر وموبايل
أ) نسخة الكمبيوتر — كل فريم بـ 1600×900. هاد كافي حتى للشاشات الكبيرة لأن الكانفس بيكبّر:
mkdir -p seq/hero/m
ffmpeg -i hero.mp4 -vf "scale=1600:900:flags=lanczos" -q:v 3 seq/hero/frame_%04d.jpg
ب) نسخة الموبايل — هون تعبت. القصّ العادي بالنص بيقطع اللوغو، وشاشة الجوال أضيق من الفريم كمان. الحل: بنقص منطقة الراس، منصغّرها، ومنحطها فوق خلفية بنفس اللون مع حواف ناعمة:
ffmpeg -i hero.mp4 -filter_complex "color=c=0x060D13:s=608x1080:r=24[bg];[0]crop=820:1080:200:0,scale=440:580:flags=lanczos,format=rgba,geq=r='r(X,Y)':g='g(X,Y)':b='b(X,Y)':a='255*clip(min(min(Y/80,(H-1-Y)/110),min(X/32,(W-1-X)/32)),0,1)'[fg];[bg][fg]overlay=84:40:shortest=1,format=yuvj420p" -q:v 3 seq/hero/m/frame_%04d.jpg
- crop=820:1080:200:0 — المنطقة اللي فيها الراس واللوغو بالفيديو تبعي. غيّر الأرقام حسب مكان الراس عندك
- 0x060D13 — لون الخلفية. خدته بالقطّارة من حافة الفيديو، مش من كود الهوية، لأن الموديل بيغيّر اللون شوي
- overlay=84:40 — الراس بأعلى الشاشة، والنص تحته
ج) ملف الـ manifest — عدّ الفريمات أول:
ls seq/hero/frame_*.jpg | wc -l
وحطّ الرقم بـ seq/hero/manifest.json (ونفس الملف بـ seq/hero/m/):
{"fps":24,"pattern":"frame_%04d.jpg","count":145}
7
ربطه بالسكرول
أ) الـ HTML — قسم طويل (280vh) وجوّاه مسرح لاصق بطول الشاشة. طول القسم هو اللي بيحدد «بطء» التحوّل:
<section class="hero-wrap">
<div class="pin-stage">
<canvas id="hero-seq"></canvas>
<div class="hero-type">
<h1>اسمك هون</h1>
<p>سطر تعريفي</p>
</div>
</div>
</section>
ب) الـ CSS — لاحظ القسم الأخير: النص عاليمين بالكمبيوتر، وتحت الراس بالموبايل:
.hero-wrap { height: 280vh; }
.pin-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
#hero-seq { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-type { position: absolute; inset: 0; display: grid; place-items: center; z-index: 5; }
/* desktop: the head lives in the left third, so the copy takes the empty side */
@media (min-width: 901px) {
.hero-type { justify-items: start; text-align: start; padding-inline: 7vw 0; }
.hero-type h1 { font-size: clamp(64px, 9vw, 150px); }
}
/* phones: the head sits in the top half of the frame, copy below it */
@media (max-width: 900px) {
.hero-type { align-items: end; padding-bottom: 23svh; }
}
ج) الـ JavaScript — بيحمّل الفريمات وبيرسم الفريم المناسب لنسبة السكرول:
const cv = document.getElementById('hero-seq');
const ctx = cv.getContext('2d');
const base = matchMedia('(max-width: 820px)').matches ? 'seq/hero/m/' : 'seq/hero/';
const frames = [];
fetch(base + 'manifest.json').then(r => r.json()).then(({ count, pattern }) => {
for (let i = 1; i <= count; i++) {
const img = new Image();
img.src = base + pattern.replace('%04d', String(i).padStart(4, '0'));
frames.push(img);
}
frames[0].onload = () => { size(); render(); };
});
function size() {
const dpr = Math.min(devicePixelRatio || 1, 2);
cv.width = cv.clientWidth * dpr;
cv.height = cv.clientHeight * dpr;
}
function render() {
const wrap = cv.closest('.hero-wrap');
const r = wrap.getBoundingClientRect();
const p = Math.min(1, Math.max(0, -r.top / (r.height - innerHeight)));
const img = frames[Math.round(p * (frames.length - 1))];
if (!img || !img.complete) return;
// "cover" fit, like background-size: cover
const s = Math.max(cv.width / img.naturalWidth, cv.height / img.naturalHeight);
const w = img.naturalWidth * s, h = img.naturalHeight * s;
ctx.drawImage(img, (cv.width - w) / 2, (cv.height - h) / 2, w, h);
}
addEventListener('scroll', () => requestAnimationFrame(render), { passive: true });
addEventListener('resize', () => { size(); render(); });
8
غلطات وقعت فيها — وفّرها على حالك
١) النص قعد فوق الوجه. أول ما ركّبت الفريمات، الاسم الكبير كان بالنص تماماً — فوق عيوني:
- خطّط مكان النص قبل ما تولّد. لهيك برومت البداية فيه «LEFT third» و «empty right half». إذا نسيتها، رح تتضطر تعيد كل شي.
- الموبايل مش قصّ بالنص. جرّبت القصّ العادي أول — الحلقة البرتقالية انقطعت. وكمان الكانفس بيعمل cover، فشاشة 390px بتقصّ أكتر من الفريم نفسه.
- ما تحط خلفية مغبّشة للموبايل. جرّبت blur بدل اللون السادة — طلعت خطوط واضحة فوق وتحت الكادر. اللون السادة مع حواف ناعمة أنضف بكتير.
- انتبه للحجم. الفريمات الجديدة طلعت ~20MB (القديمة 15MB) لأن الخيوط تفاصيل كتير. إذا الموقع صار بطيء، نزّل الجودة لـ -q:v 5.
- جرّب على جوال حقيقي أو iframe. Chrome headless ما بينزل تحت ~500px عرض — فالـ screenshot «موبايل» منه بيكذب عليك.
- خلّي نسخة من الفريمات القديمة. قبل ما تكتب فوقها — أو تأكد إنها بالـ git.
9
برومت واحد لـ Claude Code — ينفّذ الكل
إذا Higgsfield MCP مربوط، اعطِ Claude Code هالبرومت من جوّا مجلد موقعك. بدّل اللي بين الأقواس:
I want a scroll-scrubbed hero on my site: my realistic head dissolves into glowing
fiber strands that rebuild my logo, driven by scroll. Hero section only, do not touch
the rest of the site.
Inputs:
- My photo: [path/to/my-photo.png]
- My logo: [path/to/logo.png]
- Brand colors: background [#0D1117], primary [#2DD4BF], accent [#F59E0B]
- Site direction: [RTL] (text goes on the [right], so the head goes on the [left])
Work in this order and STOP for my approval after steps 1 and 2:
1. Show me your plan first. Then generate 2 START frames with Higgsfield
(16:9, 2k): head only, clean neck cut, placed in the [left] third, empty space for
text, background exactly my background color, rim lights in my brand colors.
2. Using the chosen start frame AS A REFERENCE plus my logo, generate 2 END frames:
same camera, same background, the logo built from fiber-optic strands in my
primary color with accent-colored tips, occupying the same position and size as
the head. Recommend the one whose position matches best.
3. Generate the video with seedance_2_0 (std, 1080p, 6s, 16:9, no audio) using
start_image and end_image, locked-off static camera, one continuous shot.
Decline any preset suggestion.
4. Back up the existing hero frames, then extract desktop frames (1600x900) and
mobile frames (608x1080: crop around the head, scale down, place in the top part
over a solid color sampled from the video edge, feathered edges so the logo is
never cut). Update manifest.json for both.
5. Check the hero text does not overlap the head on desktop and on a 390px phone
(use an iframe for the phone test). Fix with CSS only.
6. Report what changed, total size of the frames, and anything you did not verify.
ليش ما أحط الفيديو كـ <video> وأتحكم بـ currentTime؟
جرّبها الناس كتير — بتتقطّع، خصوصاً على Safari والجوال، لأن الفيديو المضغوط ما بيقدر يقفز لأي فريم بسرعة. الصور بتكون محمّلة بالذاكرة وجاهزة، فالسكرول بيطلع ناعم.
الوجه تغيّر بالفيديو وما عاد يشبهني
شبه دايماً المشكلة بفريم البداية مش بالفيديو. إذا فريم البداية مش شبهك ١٠٠٪، الفيديو رح يكمّل على الغلط. أعد توليده بصورتين مرجع بدل وحدة، واختار النسخة الأشبه قبل ما تكمّل.
اللوغو طلع مشوّه بالنهاية
بسّط الوصف. اكتب شكل اللوغو بكلمات هندسية (thick geometric D, rounded bowl, rectangular counter) بدل «like my logo». والأشكال اللي فيها كلمات طويلة ما بتطلع منيحة من خيوط — استخدم الحرف الأول أو الرمز.
قدّيش لازم يكون طول الفيديو؟
5–6 ثواني بـ 24fps = 120–145 فريم، وهاد كافي لقسم طوله 280vh. أطول من هيك بيزيد الحجم بدون ما يفرق بالنعومة. إذا بدك التحوّل أبطأ، طوّل القسم بالـ CSS مش الفيديو.
موقعي إنجليزي LTR — شو بغيّر؟
اعكس الجهات: الراس بـ «RIGHT third» بالبرومتين، والنص عاليسار. الـ CSS نفسه بيشتغل لأن justify-items: start و padding-inline بيتبعوا اتجاه الصفحة لحالهم.
البرومتات فوق جاهزة للنسخ — ابدأ بفريم البداية، ولا تكمّل للفيديو قبل ما يكون الفريمين مطابقين بالمكان والحجم.
ابدأ من هون — higgsfield.aiبالتوفيق 👊
لو طبّقتها على موقعك، ابعتلي الرابط — بحب أشوف شعارات الناس كيف طلعت.