מצגת Remotion בעברית RTL
מצגת HTML חד־קובצית בעברית על Remotion ו־Claude Code, עם מערכת עיצוב מותאמת ואנימציות.
הבעיה
רציתי להסביר לקהל דובר עברית איך משתמשים ב־Remotion ו־Claude Code ליצירת וידאו באמצעות קוד. מצגות מסורתיות (PowerPoint/Keynote) לא מאפשרות אנימציות אינטראקטיביות, ופתרונות webב־RTL מלא הם נדירים.
הגישה
בניתי מצגת HTML אחת (single-file) שמשלבת סלייד־שואו בעברית RTL מלא, מערכת עיצוב שלי (ירוק
טכנולוגיות
HTML CSS JavaScript Remotion Claude Code
על הפרויקט
הפרויקט התחיל כהכנה להרצאה על Remotion, אבל הסתעף לתרגיל רציני במערכת עיצוב לאתרים בעברית. הרעיון היה שכל סלייד יהיה מופע של פטרן ויזואלי מסוים — וזה מה שאפשר עכשיו להעביר בצורה נקייה לאתר הבלוג הזה.
מה בפנים
- 10 סליידים עם layouts שונים (title, problem, solution, cards, pipeline, terminal, וכו’)
- רקע אנימטיבי משותף (grid + radial glow)
- טיפוגרפיה נוזלית (clamp) ללא media queries
- ייצוא ל־PowerPoint דרך python-pptx
- גרסת embed.html ממוטבת לנייד (ללא קליפ וידאו כבד)
מה למדתי
- מערכת עיצוב עקבית (tokens + פטרנים חוזרים) חוסכת זמן ענקי גם בפרויקט חד־פעמי
- RTL ב־flexbox פשוט יחסית אם מקפידים על logical properties (inset-inline, margin-inline)
- MutationObserver על class של סלייד פעיל הוא דפוס נקי לאנימציות מותנות־נראות
- ייצוא ל־PowerPoint דרך python-pptx אפשרי אבל דורש תיעוד צבעים וטיפוגרפיה בנפרד
תוצאות
- המצגת פורסמה ב־GitHub Pages ונצפתה על ידי מאות אנשים
- מהווה בסיס למערכת העיצוב של האתר החדש הזה
- כל ה־tokens הועברו כ־CSS variables וניתן לעשות בהם שימוש חוזר