Scroll Video — אתר שזז עם הגלילה

מה בניתי כאן

אתר להמבורגרייה שבו הסרטון לא סתם מתנגן, אלא זז עם הגלילה. גוללים למטה וההמבורגר מתפרק לשכבות עם שם לכל אחת, גוללים עוד והוא מתחבר בחזרה ונוחת על השולחן, ליד שקית עם הלוגו. גוללים למעלה והכל רץ אחורה. את התמונות והסרטון יצרתי ב-Higgsfield, ואת האתר בנה Claude Code.

שלבי העבודה

1. 01
   Higgsfield

   תמונת מוצר ראשית

   מתחילים מתמונה אחת חזקה של המוצר ביחס 16:9, על רקע בצבע המותג. זאת הפריים הראשון של הסרטון, אז כדאי להשקיע בה.

   Studio product photo of a classic cheeseburger on a deep red background, sesame bun, melted cheese, fresh lettuce and tomato, centered, soft top light, 16:9

2. 02
   Higgsfield

   פירוק לשכבות

   עורכים את אותה תמונה כך שכל שכבה של ההמבורגר מרחפת בנפרד, על רקע לבן. אפשר ליצור גרסה נוספת עם שמות לכל שכבה.

   Same burger, exploded view: every layer floating apart vertically with even gaps, bun top, tomato, ketchup, patty, lettuce, bun bottom, clean white background, same lighting

3. 03
   Higgsfield

   סצנת סיום ממותגת

   תמונה שלישית של המוצר בסביבה שלו: שקית, צ'יפס וכוס עם הלוגו שלכם. זה המקום שבו הסרטון נוחת.

4. 04
   Higgsfield

   סרטוני מעבר

   בכל סרטון נותנים תמונת התחלה ותמונת סיום, ומתארים את התנועה ביניהן. אחד מפרק את ההמבורגר לשכבות, והשני מרכיב אותו מחדש ומנחית אותו בסצנה. בסוף מחברים את הקטעים לסרטון אחד.

   The burger slowly separates into its floating layers, smooth continuous motion, locked camera, no cuts

5. 05
   Claude Code

   הכנת הסרטון לגלילה

   סרטון שרץ עם הגלילה צריך להיות מקודד כך שכל פריים עומד בפני עצמו, אחרת הוא נתקע כשגוללים אחורה. מבקשים מ-Claude Code לעשות את זה.

   Re-encode burger.mp4 for scroll scrubbing: every frame a keyframe, no audio, 1920px wide, faststart, and make a poster image from the first frame

6. 06
   Claude Code

   בניית האתר

   מתארים את האתר במילים: הסרטון ממלא את המסך, הגלילה מריצה אותו, ובנקודות מסוימות טקסטים נכנסים ויוצאים. משם ממשיכים לשפר בשיחה עד שזה מרגיש נכון.

   Build a one-page Hebrew RTL site for a burger place. The video fills the screen and its playback follows the scroll with GSAP ScrollTrigger. Hold on the exploded view for a moment, fade the title out when the burger starts moving, and pop in an opening hours card when it lands on the table. Add a short loading animation, a menu section and a newsletter form