"שוק התבלינים" הוא מסע צבע קולנועי: ארבע סצנות גלילה — כורכום, סומק, פפריקה, זעתר — כל אחת עם צילום מקרו מלא־מסך, פלטה משלה, אבק חלקיקים חי ומשטח מריחה שמגיב למגע. מסביבן: סצנת פתיחה של הסמטה, חדר "השוק עצמו", וגלריית תבלינים נוספת — עשרה תצלומי AI שהוכוונו לפלטות האתר.
בשוק אמיתי, לפני שמריחים — רואים. ערימת כורכום היא אירוע כרומטי: גוון דומיננטי אחד, הבהוב בקצה המואר, וצל עמוק במדרון. האתר לוקח את ההיגיון הזה והופך אותו לשיטה: כל תבלין הוא סצנה, וכל סצנה בנויה מחמישה גוונים בלבד עם תפקידים מוגדרים — כמו תיוג של אוצרת במוזיאון.
חוק הפלטה: הבהוב עליון → מעבר → גוון דומיננטי → גוף הערימה → צל עמוק. חמישה גוונים, לא יותר. הרקע של כל סצנה הוא גרסה כהה מאוד של הדומיננטי — כך הזהב באמת זוהר.
Suez One לכותרות — סריף עברי כבד עם נוכחות של שלט שוק ישן, בגדלים של עד 13vw
עם line-height: 1.02. Heebo במשקל 300 לטקסט רץ, עם line-height: 2 —
ניגוד מקסימלי בין צעקה ללחישה. הכותרות צבועות בגרדיאנט של הפלטה עצמה דרך
background-clip: text, כך שהטיפוגרפיה היא חלק ממערכת הצבע ולא שכבה נפרדת.
שכבת רקע קבועה (position: fixed) יושבת מתחת לכול. כל סצנה נושאת
data-bg ו־data-c, ו־ScrollTrigger מזהה כניסה ומזרים את הצבע פנימה —
כך המעבר בין "חדרי" המוזיאון הוא נשימה אחת רכה ולא קפיצה:
// לכל סצנה — טריגר שמחליף את צבע העולם
ScrollTrigger.create({
trigger: sec, start: 'top 55%', end: 'bottom 55%',
onToggle: (self) => {
if (!self.isActive) return;
gsap.to('#bg', { backgroundColor: sec.dataset.bg,
duration: 1.1, ease: 'power2.out' });
targetColor = hexToRgb(sec.dataset.c); // גם האבק מחליף גוון
}
});קנבס במסך מלא מריץ כ־110 חלקיקים בריחוף איטי. לכל חלקיק פאזה סינוסואידלית משלו, כך שהתנועה נראית כמו אבקה באור שמש ולא כמו "שלג". הצבע של כל הענן נגרר בהדרגה (lerp של 4% לפריים) אל צבע הסצנה הפעילה:
// הצבע רודף אחרי הסצנה — לעולם לא קופץ
sceneColor.r += (targetColor.r - sceneColor.r) * 0.04;
p.ph += 0.008 * dt; // פאזה אישית
p.x += (p.vx + Math.sin(p.ph) * 0.12) * dt;
p.y += (p.vy + Math.cos(p.ph * 0.7) * 0.06) * dt;אותה מערכת משמשת גם למיקרו־אינטראקציות: ריחוף על צ'יפ צבע יורה התפרצות (burst)
של חלקיקים בצבע הצ'יפ מתוך המיקום שלו על המסך, ותזוזת העכבר משאירה שובל דק.
חלקיקי burst נולדים עם decay ונעלמים; המאגר מתמלא חזרה עד 110.
החתימה האינטראקטיבית של האתר: לכל תבלין קנבס "משטח מגע". בטעינה נזרעת עליו ערימת אבקה פרוצדורלית — מאות נקודות בפיזור גאוסיאני (סכום 4 ערכי אקראי) שיוצר תלולית טבעית, עם נקודות היילייט מהגוון הבהיר. ריחוף משאיר אבק דק; גרירה מורחת פיגמנט בכבדות:
// פיזור גאוסיאני זול — ערימה במקום רעש אחיד
function gauss() {
return (Math.random()+Math.random()+Math.random()+Math.random()-2)/2;
}
// מריחה: אינטרפולציה בין נקודות המצביע + פיזור סביבן
function smearAt(x, y, px, py) {
const steps = Math.min(Math.ceil(Math.hypot(x-px, y-py) / 4), 14);
for (let s = 0; s < steps; s++)
for (let k = 0; k < 3; k++)
dot(ix + gauss()*16, iy + gauss()*16,
Math.random()*5+1.2, randColor(), 0.18–0.63);
}כפתור "ניקוי המשטח" מעמעם את הקנבס, זורע ערימה חדשה ומחזיר אותו — כמו מוכר שמחליק את הסחורה.
שני דברים הופכים רקע כהה שטוח לחלל עם אוויר:
feTurbulence
(רעש פרקטלי, baseFrequency: 0.9) באטימות 9%. אין קובץ תמונה, אין בקשת רשת.<filter id="n">
<feTurbulence type="fractalNoise"
baseFrequency="0.9" numOctaves="2"/>
</filter>כל תצלום נוצר בכלי ג'נרוט (FLUX dev דרך fal.ai) עם פרומפט שמוכוון לפלטת הסצנה שלו:
אותם גוונים, אותה תאורת "פנס בשוק מקורה", אותו רקע כמעט־שחור. כך התמונה לא "יושבת על" העיצוב —
היא ממשיכה אותו. כל קובץ JPEG ≤ 330KB, נטען loading="lazy" (מלבד ה־hero).
איך התמונות נטוות פנימה:
.scene-bg ממוסך ב־mask-image
(שקוף→שחור→שקוף) כדי להתמזג עם צבע הרקע המתחלף, ומעליו שכבת color-grade:
גרדיאנט בצבע הרקע של הסצנה (66%→80%→אטום) ששומר על קריאוּת הטקסט.data-plx נגררת yPercent: -6→6
ב־scrub; תמונת ה־hero מקבלת גם Ken Burns איטי (scale 1→1.08, yoyo).clip-path: inset() מונפש עם stagger.hero.jpg — Ancient middle-eastern spice market alley at dusk, tall conical piles of golden turmeric, crimson sumac and red paprika on wooden stalls, hanging brass lanterns, volumetric shafts of warm amber light cutting through floating spice dust, deep dark umber shadows, cinematic chiaroscuro, moody editorial photography, rich saturated ochre and burgundy palette against near-black background
turmeric.jpg — Overhead macro photograph of a perfect mound of bright golden turmeric powder on dark charred wood, dramatic raking side light from the left, fine yellow dust particles suspended in the light beam, deep black-brown background, saturated amber ochre gold tones, high-end editorial food photography, texture of fine powder ridges, chiaroscuro
sumac.jpg — Overhead macro photograph of a mound of deep crimson sumac spice powder, wine-red burgundy tones, coarse ruby granules catching a single dramatic warm light beam, dark maroon-black background, floating red dust motes, moody editorial food photography, chiaroscuro, rich saturated purple-red palette
paprika.jpg — Overhead macro photograph of smoked paprika powder pile, ember orange-red gradient from bright terracotta highlights to burnt sienna shadows, dramatic warm light beam, dark smoky near-black background, fine red-orange dust in air, high-end editorial food photography, chiaroscuro, glowing coal palette
zaatar.jpg — Overhead macro photograph of za'atar spice blend pile, dusty olive-green dried hyssop leaves mixed with cream-white toasted sesame seeds and hints of sumac, dark forest-green black background, soft dramatic side light, editorial food photography, muted sage and olive palette with ivory speckles, chiaroscuro
market.jpg — Wide shot of an old spice merchant stall in a covered middle-eastern bazaar, rows of open burlap sacks brimming with colorful spice powders — gold turmeric, red paprika, green za'atar, dark sumac — brass scales and scoops, warm lantern light with dust haze, deep shadows, cinematic editorial travel photography, amber and umber palette, chiaroscuro
cardamom.jpg — Macro photograph of green cardamom pods scattered on dark slate, pale sage-green pods with papery ridged texture, one dramatic cool-warm light beam, dark green-black background, floating dust, editorial food photography, muted eucalyptus green palette, chiaroscuro
cumin.jpg — Macro photograph of whole cumin seeds pouring from an antique brass scoop onto a dark surface, warm khaki-brown ochre tones, seeds frozen mid-fall catching golden light, near-black background, editorial food photography, earthy umber palette, chiaroscuro, fine dust in light beam
cinnamon.jpg — Macro photograph of cinnamon quills stacked and tied with twine on dark wood, warm russet mahogany-brown curls, dramatic golden side light, deep black-brown background, floating cinnamon dust in light, editorial food photography, warm sienna palette, chiaroscuro
anise.jpg — Macro photograph of star anise pods arranged on dark stone, deep mahogany-brown eight-pointed stars with glossy seeds, single dramatic warm spotlight, near-black background with faint amber haze, editorial food photography, dark espresso palette with golden rim light, chiaroscuro
document.fonts.ready
(עם timeout ביטחון של 2.5 שניות), ואז קו הספקטרום נמתח, המסך מחליק למעלה
ואותיות הכותרת עולות ב־stagger עם expo.out.devicePixelRatio חסום ב־2; חלקיקים מוגבלים ל־110;
רק transforms ו־canvas — אפס אנימציות layout; spawn מהעכבר מוגבל לאחת כל 40ms.dir="rtl", ניווט נקודות בצד שמאל (הצד "הפנוי" בעברית),
קוד ומספרי HEX מסומנים direction: ltr נקודתית.data-bg ו־data-c, ו־ScrollTrigger אחד
שמזרים רקע + צבע חלקיקים. אל תזיזו את הרקע — הזיזו את הצבע שלו.power3.out,
ghost numbers עם פרלקסת scrub, ו־reduced-motion לכל דבר שזז לבד.נכסי AI: עשרה תצלומים (סעיף 07) — סמטת ה־hero, דוכן השוק, ארבעה מקרו של ערימות התבלין וארבעה לגלריה. כל השאר פרוצדורלי (CSS gradients, SVG noise, Canvas 2D): האבק, המריחות והגרעין הם קוד, כי רעש + פיזור קוד עושה טוב יותר מתמונה — אבל את האור של השוק עצמו עושה הצילום.