הפרומפט שהופך תיאור במילים לאנימציית וידאו

אני רוצה שתבנה לי אנימציית וידאו קצרה. אתה כותב אותה כעמוד HTML עם GSAP, אני רואה אותה בדפדפן, ובסוף אנחנו מרנדרים אותה ל-MP4 עם HyperFrames. אל תתחיל לכתוב לפני שאתה שואל. ## קודם תשאל אותי שלוש שאלות, אחת בכל הודעה 1. מה להראות: הטקסט המדויק, וכמה שניות (בין 3 ל-15). 2. באיזה יחס: 9:16 לסטורי ולרילס (1080x1920), 16:9 ליוטיוב (1920x1080), או 1:1 (1080x1080). 3. באיזה סגנון מהתפריט למטה, או "תציע לי" ואז תבחר אחד ותגיד למה. ## תפריט הסגנונות - **טיפוגרפיה קינטית**: הטקסט עצמו הוא הגיבור. מילה נכנסת אחרי מילה, בקצב. - **גרפיקה בסגנון אפל**: הרבה אוויר, כותרת אחת גדולה, תנועה שקטה, אקסנט אחד. - **הסבר בשליש העליון**: כותרת ותת כותרת שנכנסות מלמעלה, מיועד לשבת מעל וידאו של פנים מדברות. - **ספירת מספרים**: נתון אחד שרץ מאפס עד הערך, עם תווית מתחתיו. - **קו שמצייר את עצמו**: SVG stroke שנמשך ומגלה צורה, ואז הטקסט. - **חשיפה מאחורי מסכה**: הטקסט מתגלה מאחורי פס שנפתח, בלי fade. ## איך לבנות קובץ אחד, `index.html`, בתיקייה הנוכחית, עצמאי לגמרי: - `<div data-composition-id="main" data-width="1080" data-height="1920" data-start="0" data-duration="8" data-track-index="0">` ישירות בתוך ה-body. בלי `<template>`, זו קומפוזיציה עצמאית. - GSAP מ-`https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js`. - **timeline אחד בלבד**, `gsap.timeline({ paused: true })`, ובסוף `window.__timelines["main"] = tl;`. הנגן שולט בהרצה, אל תקרא ל-play. - אורך הסרטון נקבע מ-`data-duration`, לא מאורך ה-timeline. - **דטרמיניסטי**: בלי `Math.random`, בלי `Date.now`, בלי `setTimeout`, בלי `async`. אם צריך אקראיות, מספרים קבועים מראש. - **בלי `repeat: -1`**. לולאה מקבלת מספר חזרות מחושב. - כניסות ב-`tl.fromTo(el, {from}, {to}, t)` ולא ב-`tl.from()`. המנוע מדלג בין פריימים, ו-from עלול להבהב. - אנימציה רק על `opacity`, `x`, `y`, `scale`, `rotation`, `color`. אף פעם לא על `width`, `height`, `top`, `left`, `display` או `visibility`. - קודם בונים את הפריסה הסופית ב-CSS, ורק אחר כך מוסיפים תנועה אליה. - שוליים בטוחים: לפחות 8 אחוז מכל צד, כדי ששום דבר לא ייחתך. - גודל טקסט לווידאו: כותרת לפחות 60px, גוף לפחות 20px. ## עברית - **`dir="rtl"` אף פעם לא על תגית `<html>`.** זה נראה תקין בדפדפן ומייצר וידאו שחור לגמרי, בלי הודעת שגיאה. שמים `dir="rtl"` על המכלים שמכילים עברית בלבד, ומשאירים על ה-html רק `lang="he"`. - כניסה מהצד: בעברית נכנסים מימין, כלומר `x: 80` ולא `x: -80`. - שם מותג באנגלית בתוך משפט עברי נכנס ל-`<bdi>`. - גופן: הורד קובץ עברי לתיקייה `fonts/` והצהר עליו בעצמך, למשל Heebo מ-Google Fonts כקובץ ttf, ואז: `@font-face { font-family:'Heebo'; src:url('fonts/Heebo.ttf') format('truetype'); font-weight:100 900; }` ובמחסנית: `font-family:'Heebo', system-ui, sans-serif`. אל תוסיף `<link>` או `@import` לגופנים: הרנדור רץ בלי רשת. ## אחרי שכתבת 1. פתח לי את הקובץ בדפדפן ותגיד לי מה לבדוק. אני מאשר או מבקש שינוי. 2. רק אחרי אישור, הרץ: ```bash HYPERFRAMES_NO_TELEMETRY=1 DO_NOT_TRACK=1 npx --yes hyperframes@0.8.63 check . HYPERFRAMES_NO_TELEMETRY=1 DO_NOT_TRACK=1 npx --yes hyperframes@0.8.63 render . ``` 3. תקן כל אזהרה מ-check לפני שמרנדרים, במיוחד אזהרות ניגודיות. אל תריץ `hyperframes init`, `skills`, `add` או `catalog`, ואל תשתמש ב-`@latest`. הגרסה נעולה בכוונה. מתחילים. שאלה ראשונה.