צינור הליד - מהדפדפן ועד המייל
בקשה שלא עוברת את אימות ה-Origin וה-HMAC לא מגיעה בכלל ל-D1 - ה-Worker סומך רק על מה שנחתם בדרך.
החלק החכם הוא היחס לסרטונים כאל קוד ולא כאל מדיה: כל קליפ הוא GSAP timeline מושהה בתוך render.html שחושף seek לפי זמן, ולכן דפדפן headless מצלם פריימים דטרמיניסטיים וה-mp4 הופך ל-build artifact שאפשר לבנות מחדש מאפס בכל רגע. כשהקליפים ששוחררו ירדו לרמת קופסה שחורה בטלפון אחרי שלושה דורות קידוד, התיקון לא היה פילטר על הקבצים ההרוסים אלא בנייה מחדש מהפריימים המקוריים במעבר אחד - סיבוב גוון מדוד לכל חבילת שירות ששחזר את הפלטה שכבר אושרה, עקומת צללים שמרימה את אמצע הטווח בלי לשבור את רצפת השחור, ו-dither סטטי שמוזרק אחרי הגריידינג כדי שהגרעיניות לא תפוצץ את ה-bitrate. אותה פילוסופיה ב-hero: במקום mp4 במשקל כ-3MB, סקריפט canvas שאופה כל קובייה ל-sprite פעם אחת ומשם רק עושה blit עם drawImage, עם תנועת delta-time זהה ב-60Hz וב-120Hz ופרלקסת עכבר משוקללת עומק - קל יותר, חד יותר, ולא נתקע בטעינה אף פעם. וצינור הלידים בנוי כשרשרת אמון: Vercel חותם HMAC, ה-Worker מאמת ב-timing-safe, ו-D1 מקבל רק מה שעבר במסלול החתום.
מה זה
Areta הוא אתר התדמית של סוכנות דיגיטלית שמוכרת שירות מקצה לקצה: בניית אתרים, צמיחה ושיווק, אוטומציה ומערכות, ואבטחה ונגישות. ארבעה עמודים בעברית RTL עם עיצוב Liquid Glass, בנויים vanilla HTML/CSS/JS בלי framework ובלי build step, עם GSAP ו-ScrollTrigger שמאוחסנים לוקאלית. האתר חי על Vercel וכל push עולה לפרודקשן אוטומטית.
זה לא עוד אתר שיווקי סטטי: יש בו hero תלת-ממדי חי שרץ בקוד, חמישה סרטוני מותג שהופקו כולם בקוד, וצינור לידים אמיתי עם backend מאחורי הטופס.
הבעיה
אתר של סוכנות שמוכרת בניית אתרים הוא הדגמה של עצמו - אם הוא איטי, גנרי או שבור בטלפון, אין סיבה להאמין לשום הבטחה בו. רציתי אתר שכל רכיב בו מוכיח את השירות שהוא מתאר: מושן, ביצועים, אבטחה ונגישות.
בדרך צצו הבעיות האמיתיות: hero של וידאו במשקל כ-3MB פגע בטעינה, וסרטוני השירות שעברו כמה סבבי קידוד יצאו כהים עד כדי קופסה שחורה בטלפון. וטופס יצירת קשר על אתר סטטי הוא בדיוק המקום שבו לידים הולכים לאיבוד או טובעים בספאם.
מה בניתי
עמוד שירותים עם 4 חבילות של 5 כרטיסים - 20 כרטיסי Liquid Glass עם צבע מותג לכל חבילה: build, growth, systems, secure. את ה-hero החלפתי מקובץ וידאו לשדה קוביות תלת-ממדי שמצויר חי ב-canvas ומגיב לתנועת העכבר - קוד במקום מדיה.
חמישה סרטוני מותג מופקים בקוד: showreel בשם One Machine באורך 14 שניות שמראה איך עסק רגיל נכנס ויוצא עסק דיגיטלי שלם, וארבעה קליפים סינמטיים, אחד לכל חבילת שירות - לולאות חלקות של 12 שניות ברזולוציית 1920x880. כולם GSAP timelines שמצולמים פריים אחרי פריים בדפדפן headless ומקודדים ל-h264.
מאחורי הטופס יש צינור לידים מלא: פונקציית Vercel חותמת HMAC, Cloudflare Worker מאמת ושומר ב-D1, ו-Resend שולח התראה למייל. מסביב: i18n עברית ואנגלית, ווידג'ט נגישות self-hosted, ו-OfferCatalog JSON-LD עם 20 תתי-שירותים למנועי החיפוש.
איך זה עובד
שדה הקוביות ב-hero נאפה פעם אחת ל-sprites ומשם רק מצויר עם drawImage - אין חישובי צל בכל פריים. התנועה מבוססת delta-time כך שהיא זהה ב-60Hz וב-120Hz, פרלקסת העכבר משוקללת לפי עומק, והשדה מושהה כשהוא מחוץ למסך או כשהטאב מוסתר. מי שמבקש reduced-motion מקבל פריים סטטי חד.
כל סרטון הוא render.html עם GSAP timeline מושהה שנשלט בפרמטר seek, כך שדפדפן headless מצלם פריימים דטרמיניסטיים ו-ffmpeg מקודד פעם אחת מפריימי PNG חסרי אובדן. כשהקליפים נהרסו משלושה דורות קידוד, בניתי אותם מחדש מהפריימים המקוריים במעבר אחד: סיבוב גוון לכל חבילה ששחזר את הפלטה המאושרת, עקומת הרמת צללים, dither סטטי אחרי הגריידינג, ו-CRF17 עם תיוג bt709 מלא.
צינור הלידים מוקשח בכל שכבה: Origin allowlist, honeypot, הגבלת קצב לפי IP, השוואת HMAC ב-timing-safe, שאילתות D1 עם פרמטרים, והגנה מהזרקת headers למייל. ה-CSP נעול על script-src self בלי אף סקריפט inline, וכל ה-assets מוגשים immutable עם גרסת ?v שנדחפת בכל שינוי.
התוצאה
האתר חי עם 0 שגיאות console תחת CSP קשיח, בדסקטופ ובמובייל - כל שינוי מאומת מול ה-URL החי, לא רק מול הקוד. צינור הלידים נבדק מקצה לקצה בשליחה אמיתית שחזרה עם אישור ו-lead_id.
הסרטונים שנבנו מחדש בהירים פי 2.5 עד 5.5 מהגרסאות שנהרסו בקידוד, וה-hero החדש קל וחד יותר מקובץ הווידאו שהוא החליף. התוצאה היא אתר שהוא גם חלון הראווה וגם ההוכחה: כל מה שהסוכנות מוכרת מודגם על האתר של עצמה.