אנימציית מוצר בגלילה: אפקט רנטגן שמראה מה יש בפנים

מה זה אפקט רנטגן בגלילה, ואיך הוא בנוי?

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

המתכון בנוי משלושה חלקים:

1. שתי תמונות. המוצר במצב רגיל, ואותו מוצר באותה זווית כשהוא שקוף ורואים מה בפנים. את זה עושים ב-Nano Banana Pro.
2. מעבר. קלינג מקבל את שתי התמונות כפריים ראשון ופריים אחרון, ומייצר סרטון קצר של המעבר.
3. דף גלילה. קלוד קוד מפרק את הסרטון לפריימים ומחבר אותם לגלילה: כל תזוזה של האצבע מקדמת את הסרטון.

שלב 1: איך מייצרים את המוצר ואת גרסת הרנטגן שלו?

Nano Banana Pro הוא מודל התמונות של גוגל דיפמיינד, שבנוי על Gemini 3. נכון לאוקטובר 2026 אפשר להשתמש בו באפליקציית Gemini וב-Google AI Studio. מה שחשוב פה: הוא טוב בעריכה של תמונה קיימת תוך שמירה על אותו מוצר ואותה זווית.

תמונה 1, המוצר. מעלים צילום של המוצר שלכם (גם צילום טלפון עובד) וכותבים:

Studio product shot of the product in the attached photo.
Keep the exact shape, colors, logo and proportions.
Centered, 3/4 front view, pure black background,
soft rim light from the top left, subtle reflection below.
16:9, photorealistic, no text.

תמונה 2, הרנטגן. מעלים את התמונה שיצאה, ובאותה שיחה כותבים:

Same image, same camera angle, same position and size.
Make the outer shell transparent like frosted glass,
revealing the internal components inside: [describe the real parts,
e.g. speaker driver, battery, circuit board, cables].
Glowing cyan x-ray edges on the parts, black background.
Do not move or resize the product.

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

שלב 2: איך קלינג מייצר את המעבר?

קלינג הוא מחולל וידאו שיש לו מצב של פריים התחלה וסוף. מעלים את התמונה הרגילה כפריים ראשון ואת תמונת הרנטגן כפריים אחרון, והוא ממלא את התנועה ביניהן. לפי דף ה-workflow של Kling 3.0 ב-ComfyUI, המצב הזה מקבל שתי תמונות ומייצר את הרצף שביניהן. באתר של קלינג מופיע כבר Kling 4.0, אז תבחרו את הגרסה העדכנית שיש בה פריים התחלה וסוף.

פרומפט התנועה:

Static camera. The product stays perfectly still.
The outer shell slowly fades to transparent glass,
revealing the internal components. Smooth, even transition,
no camera movement, no rotation, no new objects.

"Static camera" הוא העיקר. בדף גלילה כל תנועת מצלמה מיותרת מרגישה כמו רעד. ככה נראה מעבר כזה בסרטון הרשמי של קלינג, מהפריים הראשון (מימין) לאחרון (משמאל):

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

שלב 3: איך קלוד קוד בונה את דף הגלילה?

שומרים את הסרטון מקלינג בתיקייה חדשה, פותחים שם את קלוד קוד ומדביקים:

בתיקייה יש סרטון xray.mp4 של מוצר שנהיה שקוף.
תבנה לי דף מוצר בקובץ index.html אחד:
1. תפרק את הסרטון עם ffmpeg לכ-120 פריימים בפורמט webp,
   ברוחב 1600 פיקסלים, לתיקייה frames.
2. תצייר את הפריימים על canvas שנשאר קבוע במסך,
   כשהגלילה קובעת איזה פריים מוצג (גלילה של כ-300vh).
3. תטען מראש את כל הפריימים, עם פס טעינה עדין.
4. לצד המוצר: כותרת למעלה, ושלוש תוויות של רכיבים
   שמופיעות כשהמוצר נהיה שקוף: [שם רכיב 1], [שם רכיב 2], [שם רכיב 3].
5. רקע שחור, טקסט בעברית מימין לשמאל, עובד טוב בטלפון.
6. תפעיל שרת מקומי, תגלול בדפדפן ותבדוק שהאנימציה חלקה.

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

רוצים דף שלם שזז בגלילה, עם כותרות ושכבות ולא רק מוצר אחד? Scrollcraft הוא סקיל שבנוי בדיוק לזה.

איך שומרים את התהליך כסקיל לכל מוצר חדש?

אחרי שהדף הראשון עובד, מבקשים מקלוד קוד להפוך את מה שעשיתם לסקיל:

תהפוך את מה שבנינו עכשיו לסקיל בשם xray-product-page.
הקלט: קובץ mp4 ורשימה של שמות רכיבים.
הפלט: תיקייה עם index.html ופריימים, באותו עיצוב.
תכלול בסקיל את פקודת ה-ffmpeg ואת בדיקת הגלילה בדפדפן.

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

על אילו מוצרים האפקט עובד?

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

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

חשוב לדעת

• ה-AI ממציא את הפנים. המודל לא יודע מה באמת יש בתוך המוצר שלכם. הוא מצייר משהו שנראה סביר. בדף מכירה, רכיבים שלא קיימים במוצר יכולים להטעות לקוחות. תבדקו כל רכיב מול המפרט, ותכתבו ליד שזו המחשה. זה לא ייעוץ משפטי.
• עלויות. Nano Banana Pro וקלינג דורשים קרדיטים או מנוי בשימוש רציני. תבדקו את המחירים באתרים שלהם לפני שמתחילים.
• כמה ניסיונות. לא כל מעבר יוצא חלק בפעם הראשונה. תתכננו שלוש או ארבע הרצות בקלינג.
• משקל הדף. 120 פריימים זה כמה מגה. בטלפון זה מורגש, אז אפשר לבקש מקלוד קוד פחות פריימים או גודל קטן יותר לגרסת המובייל.
• תמונת המקור. תשתמשו רק בצילומים של המוצר שלכם או כאלה שיש לכם זכות להשתמש בהם.