איך בנינו את
שדה הרגשות

הקונספט

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

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

ארבעת הרגשות

הארכיטקטורה: רגש = פונקציית כוח

כל התנהגות היא פונקציה טהורה שמקבלת חלקיק וזמן ומחזירה וקטור כוח [fx, fy]. זה כל ההבדל בין הרגשות — ארבע פונקציות קטנות:

const behaviors = {
  joy(p, t){ // ציפה מעלה + נדנוד שובב
    const fx = Math.sin(p.phase + t*p.freq*2.2) * .045;
    const fy = -.052 - Math.sin(t*.8 + p.phase) * .012;
    return [fx, fy];
  },
  longing(p, t){ // משיכה אל מגדלור שלא מגיעים אליו
    const dx = beacon.x - p.x, dy = beacon.y - p.y;
    const d = Math.hypot(dx, dy) + 40;
    const pull = 2.4 / d; // נחלש עם המרחק — לכן לא מגיעים
    return [dx/d*pull, dy/d*pull + .012];
  },
  anger(p, t){ // רעד + התפרצויות
    let fx = (Math.random()-.5)*.38, fy = (Math.random()-.5)*.38;
    if (Math.random() < .012) { fx *= 9; fy *= 9; }
    return [fx, fy];
  },
  calm(p, t){ // שדה זרימה נושם
    const k = .0038;
    return [Math.sin(p.y*k + t*.35)*.02,
            Math.cos(p.x*k + t*.3)*.014];
  },
};

מעבר בין רגשות: מיזוג כוחות, לא חיתוך

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

const ease = t => t < 0.5 ? 4*t*t*t : 1 - Math.pow(-2*t+2, 3)/2;
const m = ease(mix); // 0 = הרגש הקודם, 1 = הנוכחי

const fA = behaviors[previous](p, T);
const fB = behaviors[current](p, T);
p.vx += lerp(fA[0], fB[0], m);
p.vy += lerp(fA[1], fB[1], m);
// גם הצבעים, הרקע והדעיכה עוברים lerp באותו מקדם

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

טכניקות הרינדור

שובל (trail) בלי לשמור היסטוריה

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

ctx.fillStyle = `rgba(${bg[0]},${bg[1]},${bg[2]}, 0.16)`;
ctx.fillRect(0, 0, W, H);
// ואז החלקיקים מצוירים ב-'lighter' — אור שמצטבר
ctx.globalCompositeOperation = 'lighter';

עומק: שלוש שכבות

• ענני אורורה — שלושה גרדיאנטים רדיאליים ענקיים בתנועת ליסז'ו איטית, בצבעי הרגש.
• החלקיקים — עם ריצוד (twinkle) סינוסי ואלפא שתלוי במהירות.
• וינייטה + גרעין — שכבת CSS עם רעש SVG מוטמע ו־radial-gradient כהה בקצוות.

המילים העבריות

כל רגש מחזיק אוצר מילים משלו. מילה נולדת כל 2.6–4.6 שניות (או בלחיצה), מרחפת עם השדה ודוהה בעקומת sin(k·π) — נכנסת ויוצאת ברכות. הפונט: Frank Ruhl Libre במשקל 300, ישירות על הקנבס.

מהניסוי לאתר שלם

בגרסה המורחבת השדה הפך מ"דמו במסך אחד" לאתר אמיתי — בלי לוותר על הקונספט. הקנבס נשאר רקע חי וקבוע (position:fixed) שממשיך לנשום מאחורי כל העמוד, והתוכן נגלל מעליו על פאנלים שקופים־למחצה עם backdrop-filter: blur.

• מילת הרגש הענקית — שם הרגש הנוכחי מרונדר ב־Frank Ruhl Libre 900 בגודל עד 21vw, עם שלוש שכבות text-shadow בצבע הרגש. בהחלפה היא יוצאת ב־blur, מתחלפת, ונכנסת מחדש.
• שכבת החשכה גלילה — אוברליי קבוע שאטימותו נגזרת מ־scrollY, כך שהשדה בוהק בהירו ומתעמעם מאחורי התוכן.
• כרטיסי רגש חיים — כל כרטיס מריץ מיני־שדה (46 חלקיקים) עם ההתנהגות האמיתית של הרגש שלו, על קנבס קטן משלו. IntersectionObserver מקפיא מיני־שדות שמחוץ למסך.
• חשיפות גלילה — GSAP ScrollTrigger מריץ fromTo(y:44, opacity:0 → 1) על כל [data-reveal], פעם אחת לכל אלמנט, ומוני מספרים בסקשן "על הפרויקט".
• פרלקסת הגיבור — מילת הרגש נעה ומתעמעמת ביחס לגלילה עם scrub:true.

ולמה אין כאן אף תמונת AI? שקלנו — והחלטנו נגד. הקונספט של האתר הוא "רגש מתנועה בלבד": כל פיקסל מיוצר פרוצדורלית בזמן אמת. תמונה סטטית הייתה שוברת בדיוק את הטענה שהאתר מוכיח. אפס תמונות זה פיצ'ר.

ביצועים ונגישות

• devicePixelRatio מוגבל ל־2; ספירת חלקיקים: 700 בדסקטופ, 320 במובייל, ועוד 46 לכל מיני־שדה בכרטיסים (רק כשהם על המסך).
• כ־22% מהחלקיקים נושאים "הילה" — עיגול שני גדול ושקוף שמצויר סביבם ב־lighter ומעניק זוהר בלי shadowBlur היקר.
• פיזיקה מבוססת dt אמיתי (clamp ל־50ms) — מהירות זהה בכל קצב פריימים.
• אפס הקצאות בלולאה החמה: אין אובייקטים חדשים בכל פריים, רק מערכים קבועים.
• prefers-reduced-motion: מהירות ×0.45, פחות חלקיקים, דהייה מהירה של שובל, כמעט ללא אנימציות CSS.
• החלפת רגש גם במקלדת (מקשים 1–4) וגם בכפתורים עם focus-visible.
• טעינה: וילון כהה עם "נשימה" עד שהפונטים העבריים נטענים (document.fonts.load), ואז כוריאוגרפיית כניסה מדורגת — שורת פתיחה, כותרת, מילת הרגש, תיאור, מחליף הרגשות, ניווט עליון.
• המילים הצפות נולדות רק כשהגיבור על המסך (scrollY < 70% מגובה החלון) — לא מפריעות לקריאה בהמשך העמוד.

לשחזר בעצמכם

אין תלות בשום ספרייה — הכול Canvas 2D ונקודות. המתכון:

• קובץ HTML יחיד. קנבס במסך מלא, ctx דו־ממדי.
• הגדירו לכל רגש: פונקציית כוח, פלטה (5 צבעים), damping, ומילים.
• לולאת פריים: דהיית רקע → ענני עומק → כוחות (ממוזגים לפי mix) → ציור ב־lighter → מילים.
• סמן: כוח נוסף בתוך רדיוס, עם נפילה לינארית — משיכה, הדיפה או מערבולת לפי הרגש.
• לחיצה: אימפולס רדיאלי חד־פעמי (boost שדועך ב־0.82 לפריים) + מילה.

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