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

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

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

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

איור שיוצא מוכן נראה כמו איור שיוצא מוכן

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

כל מה שבא אחר כך נבנה סביב שאלה אחת: מה הופך רצף נקודות לקו שמישהו מרח.

אנטומיה

מה קורה בין שתי נקודות סמוכות

כל שכבה במנוע היא החלטה. הדרך המהירה לראות מי מהן נושאת את התחושה היא לכבות אותן אחת אחת.

2.5

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

להזיז את המתגים: אותן נקודות בדיוק, עם השכבות ובלעדיהן.

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

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

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

ההוכחה

אותה סצנה, שתי ידיים, בו זמנית

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

גיאומטריהיד

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

שלוש דרכים להניח פיגמנט, ולא אחת יותר

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

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

הוצאתי את הכחול, והכל התחמם

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

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

24.07.2026

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

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

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

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

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

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

לבנות שפה כזאת למותג שלך ←

מרגע שנוגעים, הציור עובר ידיים

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

המכחול שלך

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

מכחול שלא מספר סיפור, רק מגיב ליד

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

הוא חלש בכוונה, כי הוא מקשט את הריק במקום להילחם בכותרת. זה המכחול שחי בהירו של PlaySoul, ומשם הוא נכנס לשפה.

להזיז את העכבר על המשטח. במגע, להחליק עליו.

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

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

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

חוק א

השדה הסמנטי זז עם הסצנה

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

מושן משרת את מסלול העין

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

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

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

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

01 · הסולם

חמש דרגות, ולא אחת יותר

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

שפה שמציירת את עצמה 800 · clamp(30,5.2vw,60) · -.035em
מה קורה בין שתי נקודות 700 · clamp(22,3vw,34) · -.03em
כותרת בתוך כרטיס 700 · 19px · -.02em
גוף הטקסט, המידה שבה נמדדת הקריאות של העמוד כולו. 400 · 16.5px · 1.85
Brand Language 700 · 10px · .18em · caps
02 · משמעת

שני משקלים למסך, לא ארבעה

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

הרפרנס

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

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

שני משקלים במסך: 400 ו-800
03 · המידה

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

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

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

50ch בטווח
04 · אלמנות ויתומים

מילה בודדת בסוף נראית כמו טעות

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

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

שלוש שורות, ארבע מילים בשורה האחרונה.
05 · המפגש

עובי המכחול נמדד מעובי האות

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

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

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

מנוע שמצייר כל הזמן חייב להיות זול

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

אפס ספריותCanvas 2D ו-vanilla JS. בלי framework, בלי build, בלי שרשרת תלויות.
ספרייט מכחולקצה המכחול נצרב פעם אחת לגוון ומוצב ב-drawImage, במקום גרדיאנט חי לכל טיפה.
DPR מוגבל ל-2מעבר לזה זה פי ארבעה פיקסלים בלי הבדל שהעין תופסת.
לולאה שעוצרתכל קנבס רץ רק כשהוא במסך, דרך IntersectionObserver.
כלב שמירה ל-rAFאם הדפדפן מקפיא פריימים, המנוע עובר לטיימר והציור לא נתקע באמצע.
פחות תנועהמי שביקש פחות תנועה מקבל את הסצנה המוגמרת מיד, בפריים אחד, בלי לולאה.

האמנות היא בבימוי המערכת

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

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

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

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