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

1.מה זה HyperFrames
HyperFrames הוא כלי בקוד פתוח של HeyGen, ברישיון Apache-2.0. כותבים את הסרטון כעמוד HTML, עם טקסט, תמונות, וידאו ואנימציה, והכלי מרנדר אותו לקובץ וידאו. יש לו יותר מ-56 אלף כוכבים ב-GitHub (נבדק ב-3.10.2026).
הוא נבנה לעבודה עם סוכני AI שכותבים קוד. מתקינים אותו יחד עם הסקילים שלו (קבצי הוראות שמלמדים את הסוכן לבנות קומפוזיציה, לתזמן אנימציה ולרנדר). אחרי זה מתארים לסוכן את האפקט בעברית, והוא כותב את הקוד.
2.מה צריך כדי להתחיל
הכלי עצמו חינמי. מה שעולה כסף הוא הסוכן שכותב את הקוד: Claude Code עובד עם מנוי בתשלום של Claude או בתשלום לפי שימוש. אפשר לעבוד עם HyperFrames גם מסוכני קוד אחרים, כמו Codex ו-Cursor.
לא צריך לדעת לתכנת, אבל צריך להיות נוח לכם להריץ פקודה בטרמינל ולבדוק תצוגה מקדימה כמה פעמים, עד שהאפקט יושב במקום.
- מחשב עם Windows, Mac או Linux. זה לא עובד מהטלפון.
- Node.js בגרסה 22 ומעלה.
- סוכן קוד עם הסקילים של HyperFrames. ב-Claude Code מתקינים את HyperFrames כתוסף, בשתי הפקודות שלמטה.
- צילום אנכי בפריים יציב. חצובה עוזרת: אפקט שמוצמד לנקודה בפריים מתפספס כשהמצלמה זזה.
claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes3.לפני האפקטים: חותכים אתכם מהרקע
שלושה מהאפקטים עוברים מאחוריכם: הכוכבים, הלוגו והרקע החדש. כדי שהראש והידיים יסתירו אותם, צריך גרסה של הצילום שבה יש רק אתכם, בלי הרקע. ב-HyperFrames זו פקודה אחת. מהקובץ הזה בונים שלוש שכבות: הצילום המקורי מאחור, האפקט באמצע, ואתם מלפנים.
החיתוך מזהה אנשים. כיסא או חפץ שצמוד אליכם עלול להיכנס לתוכו, ואז חתיכה מהחדר הישן נשארת על הרקע החדש וכל השכבה נראית מודבקת. לכן כדאי לצלם בלי משענת גבוהה מאחורי הראש.
כדי לתזמן כל אפקט למילה הנכונה, תמללו את הצילום עם זמן לכל מילה. ככה אפשר לכתוב לסוכן ״כשאני אומר...״ במקום לחפש שניות ביד. ל-HyperFrames יש פקודת תמלול משלו; אם הצילום בעברית, בדקו קודם שהמודל שהיא מריצה תומך בעברית. אנחנו תמללנו עם Whisper.
npx hyperframes remove-background my-take.mp4 -o my-take-cutout.webm4.איך לעבוד עם הפרומפטים
פרומפט אחד לכל אפקט, לא הכול בבקשה אחת. בונים אפקט, בודקים תצוגה מקדימה, מתקנים, ורק אז עוברים לאפקט הבא.
הפרומפטים משתמשים בשמות קבצים לדוגמה: my-take.mp4 לצילום ו-my-take-cutout.webm לחיתוך, וגם logo.svg, new-room.jpg ו-page.png לתמונות. החליפו אותם בשמות שלכם, ואת המשפטים שבמירכאות במה שאתם אומרים בצילום.
בדקו כל מיקום על פריים אמיתי מהצילום. אצבע, כתף וקו השיער זזים בין טייק לטייק, ומיקום שנכון בטייק אחד יוצא לא במקום בטייק אחר.
5.אפקט 1: מונה כוכבים שקופץ ליד היד
ברגע שאני מצביע, יוצא פרץ של כוכבים זהובים מקצה האצבע, ומעל הכתף קופץ תג עם מונה שרץ עד מספר הכוכבים של הכלי ב-GitHub. התג יושב מאחורי הראש, והשיער מסתיר את התחתית שלו. זה מה שנותן לו עומק.
את המספר בודקים ביום הצילום וכותבים את התאריך בתג, כי מספר הכוכבים משתנה כל יום.
6.אפקט 2: לוגו שעף מהיד ונוחת מאחורי הראש
כשאני אומר את שם הכלי, אני מצביע עם האגודל אחורה, והלוגו עף מהאגודל ונוחת מאחורי הראש שלי, נמוך מספיק כדי שהשיער יחתוך את התחתית שלו. בלי החיתוך מהרקע הלוגו יושב על הראש כמו מדבקה.
השתמשנו בלוגו הרשמי של HyperFrames מהמאגר שלו ב-GitHub, בלי שינוי. כשאתם משתמשים בלוגו של מישהו אחר, השאירו אותו כמו שהוא.
7.אפקט 3: בועת פרומפט שהופכת לקוד באוויר
כשאני אומר שאני מתאר ל-AI אפקט במילים, מופיעה בועה לבנה עם הכותרת ״הפרומפט שלי״, והמילים נכנסות אחת אחת. בריל הבועה מציגה את הבקשה ״תנחית את הלוגו מאחורי הראש שלי״, כלומר את הפרומפט של האפקט הקודם.
אחר כך הבועה עפה לתוך חלון קוד שנפתח, הקוד מוקלד בו, ואז החלון מהבהב בזהב ומתפרק לניצוצות. הכול בחלק העליון של הפריים, כדי לא לכסות את הפנים.
8.אפקט 4: רקע שמתחלף בתנועת יד
אני מעביר את היד באלכסון, והחדר שמאחוריי מתחלף לסצנה אחרת. קו המעבר עובר דרך כף היד בכל פריים, ולאורכו פס אור זהוב. בשביל זה מודדים את מיקום כף היד פריים אחרי פריים, ולא מניחים קו ישר. אחרי המעבר החדר החדש זז מעט, כדי שלא ייראה כמו תמונה סטטית.
את התמונה של הסצנה החדשה יצרנו במחולל תמונות, בפורמט אנכי.
9.אפקט 5: דפדפן שנפתח איפה שאני מצביע, עם זום
אני מצביע לפינה העליונה, וחלון דפדפן קופץ משם עם צילום מסך של עמוד הכלי ב-GitHub. כשאני אומר ״זום״, המצלמה נכנסת לתוך החלון אל כפתור הכוכבים.
צילום המסך הוא תמונה, לא דפדפן שרץ בתוך הסרטון. צלמו את העמוד מראש, בלי באנר עוגיות. החלון המוגדל מכסה את הפנים לשנייה. אם זה מפריע, הקטינו את הזום או חתכו מיד אחריו.
10.אפקט 6: כרטיס סיום עם בועת תגובה וחץ
בסוף הסרטון, על ״תעקבו״, מופיע מעל הראש כפתור מעקב. על ״תגיבו אפקטים״ מופיעה בועת תגובה עם מילת המפתח, וחץ זהוב קופץ למטה, לכיוון התגובות. אחר כך מופיעים כרטיסים קטנים של האפקטים, נדלקים אחד אחד מימין לשמאל, ועפים לתוך מטוס נייר שיוצא מהפריים.
החץ נעצר מעל החלק התחתון של המסך, שבו האפליקציה מציגה את הכיתוב והכפתורים. החליפו בפרומפט את שם החשבון ואת מילת המפתח בשלכם.
בדיקה לפני מסירה
- Node.js בגרסה 22 ומעלה, וסוכן קוד עם הסקילים של HyperFrames.
- הצילום אנכי, יציב, ובלי משענת גבוהה מאחורי הראש.
- החיתוך שלכם מהרקע מוכן לפני האפקטים שעוברים מאחוריכם.
- כל אפקט נבנה ונבדק בתצוגה מקדימה לפני הבא.
- כל מיקום נבדק על פריים אמיתי מהצילום.
- מספר שמופיע על המסך נבדק ביום הצילום, ולידו תאריך.
- שום אלמנט חשוב לא נכנס לאזורים שהאפליקציה מכסה למעלה ולמטה.
שאלות נפוצות
HyperFrames באמת חינמי?
הכלי עצמו כן, קוד פתוח ברישיון Apache-2.0. הסוכן שכותב את הקוד בדרך כלל עולה כסף: Claude Code עובד עם מנוי בתשלום של Claude או בתשלום לפי שימוש.
צריך לדעת לתכנת?
לא, אבל צריך להיות נוח לכם להריץ פקודות בטרמינל ולבקש תיקונים. הסוכן כותב את הקוד, ואתם בודקים את התוצאה בתצוגה המקדימה.
זה עובד עם צילום מהטלפון?
כן. מה שחשוב הוא פריים יציב ותאורה שמפרידה אתכם מהרקע, כדי שהחיתוך ייצא נקי.
אפשר לעבוד עם Codex במקום Claude Code?
כן. הסקילים של HyperFrames עובדים גם עם Codex, Cursor, Gemini CLI וסוכני קוד נוספים שתומכים בסקילים.
למה מספר הכוכבים בריל שונה מהמספר כאן?
המספר ב-GitHub משתנה כל הזמן. בריל הוצג המספר שנבדק ביום הצילום, 3.10.2026, ובמדריך כתוב ״יותר מ-56 אלף״, כפי שהיה נכון באותו יום.
רוצים סרטון או אתר שבנויים ככה?
אני בונה לעסקים סרטונים עם HyperFrames ואתרים בקוד עם Claude Code. שלחו לי ״אפקטים״ בוואטסאפ וספרו מה אתם רוצים לבנות.