→ כל העבודות
אמנות AI · שפת מותג · טיפוגרפיה · 2026

לימדתי את הקוד לצייר ביד, ואז לימדתי אותו לרעוד

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

תפקיד בימוי מערכת, אמנות וכתיבת החוקים
מדיום קנבס שמצייר את עצמו בזמן אמת
טכנולוגיה Canvas 2D, vanilla JS
שנה 2026
פרימיטיבים של מכחול
סצנות בספרייה
חותמות בין שתי נקודות
ספריות, אפס build

התחלתי מקליפ שבו אני מציירת

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

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

אנטומיה של משיכה

לכבות שכבה אחת ולראות מה נעלם

לכל שכבה במנוע יש תפקיד, והכי קל לראות מי עושה את העבודה כשמכבים אותה.

המכחול הראשון יודע מראש מה הוא מצייר. הוא סוטה מהקו, מתייבש, ומשאיר ברק איפה שהלחץ ירד.

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

2.5

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

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

שבע סצנות, אותו מנוע, ידיים חדשות בכל ריצה

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

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

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

לחיצה על הציור מציירת אותו מחדש, עם יד אחרת

המכחול שלך

הסצנה מסיימת, והמשטח נשאר פתוח

הסצנה סיימה. עכשיו המשטח פנוי, וכל סימן שנוסף נשאר.

שני חוקים

שני חוקי מותג שנולדו מתוך הציור

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

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

טיפוגרפיה

האותיות והמכחול נשמעים לאותם חוקים

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

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

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

הדבר שחייבים לקרוא ראשון

ברירת המחדל כאן היא הכישלון. מספיק להזיז את המתג.

הסצנה נבנית מול העין, קו אחרי קו.

גזע Heebo 400נמדד...
רדיוס המכחולנמדד...
גודל הגוף16.5px

ביימתי את זה, לא ציירתי אותו ביד

מה למדתי

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

מה נשאר אצלך

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

אני בונה שפות ויזואליות שרצות בקוד

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