GUIDE · SCROLL FILM
איך בונים אתר גלילה קולנועי - בשיחה אחת עם Claude
אתם מכירים את זה מדפי המוצר של Apple: גוללים, וכאילו מפעילים סרט. המוצר מסתובב, מתפרק, מתרכב מחדש - והיד שלכם על העכבר היא הבמאי. אתרים כאלה נבנים בדרך כלל בצוות שלם, בתקציב אנימציה ובחודשי עבודה. אצלנו זו שיחה אחת עם Claude - מרפרנס ועד דמו חי. זה בדיוק התהליך שהפיק שני דמואים חיים באתר הסטודיו: אתר החומוס ואתר OMEGA. שישה שלבים, הכל מתוך הצ'אט.
הרעיון: הדף הוא הסרט
ההבדל מהותי. אתר "עם אנימציות" הוא עמוד סטטי שמישהו קישט - סקשן נכנס, כפתור מרעיד, כותרת דוהרת פנימה. אתר גלילה קולנועי הוא שוט אחד ארוך, מהפיקסל הראשון ועד האחרון, והגלילה של המבקר היא הכפתור שמנגן אותו. בונים סרט, וקובעים איפה הגלילה מפעילה אותו. לכן התהליך כולו שונה: מתחילים מתסריט, כמו בקולנוע.
01
שלב 1: רפרנס במקום Figma
בוחרים אתר קיים שעושה את זה טוב, בסגנון עמודי המוצר של Apple, וצילום מסך מלא הופך למפרט העבודה. הרפרנס אומר בדיוק מה קורה בכל שנייה של הגלילה - מתי המצלמה מתקרבת, מתי המוצר מסתובב, מתי הטקסט נכנס ומתי הוא יוצא. מפענחים שוט-שוט ובונים לפיו. רפרנס אחד חוסך את כל שלב האפיון.
02
שלב 2: מייצרים את הנכסים ב-AI
תמונות מוצר ב-4K, מיוצרות ב-Higgsfield, נחתכות מהרקע והופכות לחומר הגלם. ואז הצעד שממיר תמונה לתנועה: קטעי וידאו קצרים שממשיכים תנועה ישירות מתוך תמונת המוצר האמיתית, image-to-video. באתר החומוס: שש צלחות חומוס, כל אחת נוצרה ב-AI ונחתכה מהרקע בנפרד.
03
שלב 3: מווידאו לפריימים
כאן הקסם קורה. כל קטע וידאו מתפרק למאות פריימים בודדים - באתר OMEGA, 329 פריימים. הדפדפן מציג כל רגע פריים אחד על canvas, והגלילה קובעת איזה: קדימה או אחורה, בקצב של היד שלכם. זה הטריק שהופך גלילה לסרט - סרט שהעכבר שלכם מפעיל פריים-פריים.
04
שלב 4: מהלך סיגנצ'רי אחד
כל אתר מקבל תנועה חזקה אחת במקום עשרה אפקטים חלשים. פחות אפקטים, יותר זיכרון. באתר החומוס: קשת נסתרת ששש הצלחות רוכבות עליה לאורך הגלילה. באתר OMEGA: גלגלי שיניים שמגיבים למהירות שבה גוללים. מהלך אחד, אבל כזה שנשאר בראש אחרי שסוגרים את הטאב.
05
שלב 5: הקוד נכתב בשיחה
מתארים מה רואים ומה צריך לקרות: "כאן המצלמה מתקרבת", "כאן הצלחת עולה על הקשת", "כאן גלגל השן מתחיל להסתובב" - ו-Claude כותב את הקוד שמאחורי הקלעים. אתם נשארים בשפה של במאי, הוא מתרגם לשפה של דפדפן. חוק בית: גלילה אנכית תמיד, ואורך גלילה נדיב לכל סצנה, כדי שהסרט ירגיש חלק וזורם.
06
שלב 6: מפרסמים בבית
הדמו עולה לתיקיית labs באתר הסטודיו הקיים, ומקבל אריח בתיק העבודות - הכל תחת קורת גג אחת. הדמו החי הוא ההוכחה: אתר אמיתי שגוללים בו ממש עכשיו.
LIVE DEMOS
גללו בעצמכם
הכי קל להבין את זה ביד. שני הדמואים חיים על האתר הזה ממש - פתחו וגללו.
מה עשינו כאן, בקצרה
רפרנס אחד הוא המפרט
אתר קיים שעושה את זה טוב, צילום מסך אחד - וכל שלב האפיון נחסך.
מהלך אחד שנשאר בזיכרון
תנועה סיגנצ'רית אחת חזקה, במקום אפקטים על כל סקשן.
הגלילה היא הנגן
וידאו שמתפרק לפריימים, וגלילה אנכית - תמיד אנכית - שמנגנת אותם.
אבי קלאורה · Studio Sparkle · avi@studio-sparkle.com · וואטסאפ 050-5224230 · חיפה
