איך נבנה
"AI בלי בולשיט"

האנטי-דף-נחיתה.

רוב דפי הנחיתה בתחום ה-AI עושים בדיוק את מה שההרצאה נלחמת בו: הבטחות ענק, באזוורדס, ו"השאירו פרטים". אז העיצוב עובד הפוך: הוא לוקח את שפת הבולשיט ומשמיד אותה מול העיניים של המבקר.

שני פונטים, שלושה צבעים.

הצללות קשות בלי טשטוש, גרעין נייר שנוצר בקוד (SVG feTurbulence בשורה אחת של CSS), וכיווניות RTL מלאה עם מאפיינים לוגיים: margin-inline, inset-inline-end, וכן הלאה. אין אף תמונה בעמוד: הכול טקסט, גבולות וקוד.

איך עובדת המגרסה.

כל באזוורד הוא כפתור. בלחיצה, הקוד פורס את הכפתור ל-6 עד 11 רצועות אנכיות: כל רצועה היא עותק של המילה עם היסט שלילי, כך שביחד הן מרכיבות את המילה המקורית בדיוק של פיקסל. ואז כל רצועה נופלת עם סיבוב אקראי משלה, דרך Web Animations API, בלי ספריות.

// strip i shows the word, offset so all slices align
strip.style.left  = `${i * stripWidth}px`;
text.style.left   = `${-i * stripWidth}px`;
strip.animate([
  { transform: 'translate(0,0) rotate(0)' },
  { transform: `translate(${drift}px, ${fall}px) rotate(${rot}deg)`, opacity: 0 },
], { duration: 430 + Math.random() * 230, delay: (N - 1 - i) * 16 });

ציר הזמן של הפתיח, במילישניות:

• 0-790שורת ההייפ מוקלדת, תו אחרי תו, עם סמן מהבהב
• 940חותמת "בולשיט" נוחתת בסקייל 2.6 עם ריבאונד, והעמוד רועד לרגע
• 1,250שני קווי מחיקה נמתחים מימין לשמאל, והכותרת עולה מתוך מסכות
• 1,900הכול במקום. מי שמעדיף הפחתת תנועה מקבל את המצב הסופי מיד

מה נאסר מראש.

• המלצות, לוגואים או מספרים מומצאים: כל עובדה בעמוד הגיעה מרשימת עובדות סגורה
• תלות ברשת: אפס CDN, אפס ספריות, אפס תמונות. קבצים סטטיים בלבד
• כלי בנייה: אין. HTML, CSS ו-JS שרצים כמו שהם בדפדפן
• קו מפריד ארוך בעברית: אסור. פסיק, נקודה או נקודתיים

ומה כן חובה:

• נגישות: ניווט מקלדת מלא במגרסה, אזור aria-live לספירה, וכיבוד prefers-reduced-motion
• העמוד עובד גם בלי JavaScript: מצב ברירת המחדל הוא המצב הסופי, והתיאטרון רק משופר מעליו
• מובייל כשוות ערך: אותה פוסטריות, אותם אפקטים, כפתורים ברוחב מלא

עיניים של רובוט,
שיפוט של עורך.

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

node verify.mjs ../sites/ai-bli-bullshit ai-bli-bullshit
# REPORT: {"consoleErrors":0,"exceptions":0,"failedRequests":0,"verdict":"CLEAN"}

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

כל הקבצים. זהו.

• index.htmlמבנה ותוכן, כ-250 שורות
• css/style.cssכל העיצוב, כ-520 שורות, כולל אנימציות
• js/main.jsתיאטרון, מגרסה, חשיפות גלילה: כ-215 שורות, אפס תלויות
• fonts/*.woff210 קבצי פונט מקומיים, כ-108KB
• favicon.svg"AI" עם קו מחיקה אדום, וקטור בכתב יד
• guide/index.htmlהעמוד הזה

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