Hero Sections שעוצרים את הגלילה

3.1 מה הופך Hero מגנרי למרהיב — 5 עקרונות

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

לפני שנצלול ל-12 ארכיטיפים ו-prompt templates, בואו נבין מה בכלל נמצא בתוך hero section ואיך ההרכב הנכון הופך תוצאה גנרית לתוצאה שעוצרת גלילה.

האנטומיה של Hero Section

כל hero section מורכב מ-6 רכיבים. לא כולם חייבים להופיע, אבל חשוב להכיר את כולם כדי שתוכלו לציין בפרומפט מה אתם רוצים (ומה לא):

סדר העיבוד הקוגניטיבי: Headline → Supporting Copy → CTA → Visual. אבל כשיש ויזואל דומיננטי עם פנים אנושיות — הוא תופס את המבט הראשון ורק אחר כך העין עוברת לכותרת. זכרו את זה כשאתם מחליטים מה יהיה האלמנט הדומיננטי ב-hero.

5 העקרונות שהופכים Hero גנרי למרהיב

ראינו מאות hero sections. אלה שגורמים לאנשים לעצור ולהגיד "וואו" לעומת אלה שנשכחים תוך שנייה — ההבדל תמיד חוזר ל-5 העקרונות האלה:

3.2 12 ארכיטיפים של Hero — הקטלוג המלא

עכשיו שאתם מבינים את הרכיבים ואת העקרונות, בואו נכיר את 12 סוגי ה-hero sections שנפוצים ב-2025-2026. כל אחד מהם מתאים למצבים שונים, משתמש בטכנולוגיות שונות, ודורש פרומפט שונה. בסעיפים הבאים תקבלו prompt template מוכן לכל אחד — אבל קודם, הנה המפה המלאה:

מבנה ההתקדמות: מ-CSS טהור עד WebGL

שימו לב לסדר בטבלה — הוא לא מקרי. הארכיטיפים מסודרים לפי עליית מורכבות:

• CSS בלבד (1-2, 6-7): Aurora, Gradient Mesh בסיסי, Text Reveal, Counter. אפס JavaScript, ביצועים מעולים, עובד בכל מקום.
• CSS + JavaScript (3-5, 8, 11-12): Video, Particles, Kinetic Typography, Split-Screen, Parallax, Morphing. צריך JS לאינטראקטיביות או אנימציות מורכבות.
• WebGL / Three.js (9-10): 3D Scene, Globe. הכי מרשים, הכי כבד, הכי חשוב לספק fallback.

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

3.3 מתכונים 1-4: אפקטי רקע (Gradient Mesh, Aurora, Video, Particle Field)

עכשיו מתחילים לבשל. בסעיף הזה תקבלו prompt template מוכן ל-4 ארכיטיפי רקע — הבסיס שעליו נבנה כל hero section. כל מתכון כולל: prompt שאפשר להעתיק ולהדביק ישירות ב-AI, הסבר מתי להשתמש, והערות ביצועים שחשוב לדעת.

מתכון 1: Gradient Mesh Hero

מה זה: רקע של כתמי צבע גדולים שזורמים ומשתנים לאט, כמו שרואים ב-stripe.com וב-linear.app. התחושה: מודרני, טכנולוגי, ודינמי בלי להיות מוגזם. זה אחד מהאפקטים הכי נפוצים ב-2025-2026 כי הוא נראה מרשים ומיושם ב-CSS טהור (או קרוב לזה).

איך זה עובד טכנית: מספר radial-gradient שכבות ב-CSS, כל אחת בצבע ומיקום שונה, עם @keyframes שזזים את המיקומים לאט. התוצאה: כתמי צבע "נוזליים" שמתערבבים. גרסאות מתקדמות יותר משתמשות ב-WebGL (כמו ה-mesh gradient של Stripe), אבל גרסת CSS מספיקה לרוב המקרים.

Build a hero section with an animated gradient mesh background.

BACKGROUND:
- Use 4-5 overlapping radial-gradient layers in [YOUR COLORS, e.g., "deep purple #6C3CE1, electric blue #3B82F6, cyan #06B6D4, pink #EC4899"]
- Animate the gradient positions with CSS @keyframes, duration 15-20s, infinite loop
- Movement should be slow and organic — like liquid paint mixing
- Dark base (#0a0a0f) so colors glow against it

CONTENT (centered):
- Headline: "[YOUR HEADLINE]" — large, bold, white, font-size: clamp(2.5rem, 8vw, 5rem)
- Subheadline: "[YOUR SUBHEADLINE]" — lighter weight, rgba(255,255,255,0.7)
- Primary CTA button: "[YOUR CTA TEXT]" — with subtle glow effect matching the gradient colors
- Optional: secondary text link below CTA

LAYOUT:
- Full viewport height (min-height: 100dvh)
- Content vertically and horizontally centered
- Generous padding (at least 2rem on mobile)

RESPONSIVE:
- Mobile: stack vertically, headline clamp adjusts down, CTA full-width
- Reduce animation complexity on prefers-reduced-motion

TECH: Pure HTML + CSS only. No JavaScript. No external libraries.

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

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

מתכון 2: Aurora Background Hero

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

איך זה עובד טכנית: 2-3 שכבות של linear-gradient עם filter: blur() גבוה (60-80px), opacity נמוכה (0.3-0.5), ו-@keyframes שמסובבים ומזיזים את השכבות לאט. ה-blur הוא מה שיוצר את אפקט "האורות הצפוניים" — בלעדיו זה נראה כמו gradient רגיל.

Build a hero section with an aurora borealis (northern lights) CSS background effect.

BACKGROUND:
- Dark base: #0a0a1a
- 3 aurora layers, each a wide linear-gradient band:
  Layer 1: [YOUR PRIMARY COLOR, e.g., "#6366f1"] to transparent, rotated 15deg
  Layer 2: [YOUR SECONDARY COLOR, e.g., "#06b6d4"] to transparent, rotated -10deg
  Layer 3: [YOUR ACCENT COLOR, e.g., "#a855f7"] to transparent, rotated 25deg
- Each layer: filter: blur(70px), opacity: 0.4
- Animate each layer with different @keyframes:
  - Slow translateX + translateY drift (30-40s cycle)
  - Subtle scale pulse (1.0 to 1.3)
  - Slight rotation shift
- Container overflow: hidden to contain blur bleed

CONTENT:
- Headline: "[YOUR HEADLINE]" — white, bold, clamp(2.5rem, 7vw, 4.5rem)
- Subheadline: "[YOUR SUBHEADLINE]" — rgba(255,255,255,0.7), max-width: 600px
- CTA: "[YOUR CTA]" — semi-transparent white border button with backdrop-blur

LAYOUT:
- min-height: 100dvh, flexbox center
- z-index layering: aurora behind (z:0), content above (z:10)

RESPONSIVE:
- Mobile: reduce blur to 40px (GPU optimization), keep all 3 layers
- prefers-reduced-motion: stop animations, show static gradient

TECH: Pure HTML + CSS. Zero JavaScript.

מתי להשתמש: אתרים עם theme כהה, מוצרי טכנולוגיה, SaaS פרימיום, כל מצב שבו אתם רוצים אפקט WOW ב-CSS בלבד וביצועים מושלמים. זה גם הארכיטיפ הכי "בטוח" לפרויקט ראשון.

מתי לא: אתרים עם theme בהיר — Aurora צריך רקע כהה כדי לעבוד. אם המותג שלכם light/pastel, עדיף Gradient Mesh עם רקע בהיר.

מתכון 3: Video Background Hero

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

איך זה עובד טכנית: אלמנט <video> עם autoplay muted loop playsinline (כל ה-4 חובה), ממוקם ב-position: absolute עם object-fit: cover כדי לכסות את כל ה-hero. מעל הוידאו — שכבת div עם background: rgba(0,0,0,0.5) שמבטיחה קריאות טקסט. מעל השכבה — התוכן.

Build a hero section with a fullscreen looping video background.

VIDEO SETUP:
- <video> element with: autoplay, muted, loop, playsinline
- poster="[PATH_TO_POSTER_IMAGE]" — blurred/compressed still frame (~10KB)
- object-fit: cover, position: absolute, inset: 0
- Video source: [YOUR_VIDEO.mp4] (keep under 5MB for fast load)

OVERLAY:
- Dark gradient overlay on top of video:
  background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.7) 100%)
- This ensures text readability regardless of video content

CONTENT (on top of overlay, z-index: 10):
- Headline: "[YOUR HEADLINE]" — white, bold, clamp(2.5rem, 8vw, 5rem), text-shadow for extra contrast
- Subheadline: "[YOUR SUBHEADLINE]" — rgba(255,255,255,0.85)
- CTA: "[YOUR CTA]" — solid white button with dark text, or bordered white

LAYOUT:
- min-height: 100dvh
- Content centered vertically, aligned to start (right in RTL) or center

RESPONSIVE:
- Mobile: replace video with poster image (save bandwidth + battery):
  @media (max-width: 768px) { video { display: none; } }
  Show poster as background-image on the container instead
- CTA: full-width on mobile, min-height 44px

ACCESSIBILITY:
- prefers-reduced-motion: pause video, show poster only
- Ensure WCAG AA contrast (4.5:1) on headline over overlay

TECH: HTML + CSS only. No JavaScript needed for basic implementation.

מתי להשתמש: כשיש לכם footage אמיתי ואיכותי — סרטוני lifestyle, צילומי מוצר, אווירה של מקום פיזי. נדל"ן, מלונאות, סוכנויות פרסום, מותגי אופנה.

מתי לא: כשאין לכם וידאו איכותי (stock video גנרי נראה גרוע), כשהמשתמשים בעיקר במובייל (בזבוז bandwidth), או כשהמסר העיקרי הוא טקסט — הוידאו יתחרה בו.

מתכון 4: Particle Field Hero

מה זה: שדה של נקודות זעירות (חלקיקים) שצפות ברקע, מחוברות בקווים דקים, ומגיבות לתנועת העכבר. כשמזיזים את הסמן — החלקיקים זזים הצידה או נמשכים אליו. התחושה: טכנולוגי, עתידני, חכם. נפוץ מאוד באתרי AI, data platforms, וחברות טכנולוגיה.

איך זה עובד טכנית: אפשרויות ליישום:

• tsParticles (היורש של particles.js) — ספרייה מוכנה, קלה להגדרה, אינטראקטיבית. הדרך המומלצת.
• Canvas 2D ידני — requestAnimationFrame loop שמצייר ומזיז נקודות. שליטה מלאה, יותר קוד.
• Three.js Points — לגרסה תלת-מימדית עם עומק. כבד יותר, מרשים יותר.

Build a hero section with an interactive particle field background.

PARTICLE SYSTEM:
- Use tsParticles (or vanilla Canvas 2D if you prefer zero dependencies)
- 80-120 particles on desktop, 40-60 on mobile
- Particle color: rgba(255,255,255,0.5) on dark background (#0a0a1a)
- Particle size: 1-3px, randomized
- Connection lines between nearby particles (distance threshold: 150px):
  color rgba(255,255,255,0.1), width 0.5px
- Movement: slow random drift, speed 0.5-1.0
- Mouse interaction: particles repel from cursor within 100px radius
  (or attract — choose based on feel)

CONTENT (above particle canvas, z-index: 10):
- Headline: "[YOUR HEADLINE]" — white, bold, clamp(2.5rem, 7vw, 4.5rem)
- Subheadline: "[YOUR SUBHEADLINE]" — rgba(255,255,255,0.7)
- CTA: "[YOUR CTA]" — gradient border button or solid accent color

LAYOUT:
- Canvas: position absolute, inset 0, z-index 0
- Content: position relative, z-index 10, centered
- min-height: 100dvh

RESPONSIVE:
- Mobile: reduce particle count to 40, disable mouse interaction (no hover on touch)
- Tablet: 60 particles
- prefers-reduced-motion: show static particles (no animation, no connection lines)

PERFORMANCE:
- Use requestAnimationFrame (not setInterval)
- Limit canvas resolution on high-DPI: max 2x device pixel ratio
- Pause animation when tab is not visible (document.hidden)

TECH: HTML + CSS + JavaScript (tsParticles CDN or vanilla Canvas 2D).

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

מתי לא: אתרים warm/אנושיים (particles מרגישים קרים וטכניים), אתרים שהקהל שלהם בעיקר מובייל (אין hover interaction בטאצ'), או כשהביצועים קריטיים ואתם לא רוצים JavaScript נוסף.

3.4 מתכונים 5-8: טקסט ותנועה (Kinetic Typography, Text Reveal, Counter, Split-Screen)

ב-4 המתכונים הקודמים טיפלנו ברקע — ה-canvas שעליו הכל יושב. עכשיו נעבור לשכבה שמעליו: הטקסט עצמו כאלמנט WOW. המתכונים בסעיף הזה הופכים אותיות, מילים ומספרים ממשהו סטטי שקוראים — למשהו דינמי שמרגישים. ההבדל בין hero בינוני למרהיב הוא לרוב לא הרקע, אלא הדרך שבה הטקסט מופיע.

כל מתכון כולל: prompt template מוכן להעתקה, הסבר מתי (ומתי לא) להשתמש, והערות ביצועים קריטיות.

מתכון 5: Kinetic Typography Hero

מה זה: אותיות שנכנסות אחת אחרי השנייה, מתפזרות ומתקבצות מחדש, מתהפכות, או "מתגלגלות" למקום שלהן — כאילו הטקסט עצמו חי ונושם. זה האפקט שאתם רואים באתרי סוכנויות יצירתיות ו-portfolios של מעצבים, וב-2025-2026 הוא נגיש לכולם הודות ל-GSAP SplitText (שהפך חינמי לאחר רכישת Webflow).

איך זה עובד טכנית: GSAP SplitText מפרק headline לאלמנטים נפרדים — chars (תווים), words (מילים), או lines (שורות). אחרי הפירוק, כל אלמנט הופך ל-span עם display: inline-block, מה שמאפשר להנפיש כל אות בנפרד. GSAP Timeline עם stagger מנפיש אותם ברצף — למשל fade-in + translateY מלמטה, עם stagger של 0.03-0.05 שניות בין אותיות. התוצאה: גל של אותיות שמופיעות כמו דומינו.

Build a hero section with kinetic typography — the headline letters animate in individually.

ANIMATION:
- Use GSAP (v3.12+) with SplitText plugin to split the headline into individual characters
- Animation sequence:
  1. Characters start invisible (opacity: 0) and shifted down 40px (translateY)
  2. On page load, characters animate in with stagger: 0.04s
  3. Easing: "power3.out" for natural deceleration
  4. Total duration: ~1.2s for the full headline
- After headline completes: subheadline fades in (0.5s delay), then CTA (0.3s more)
- Optional: add a subtle scramble/decode effect before each letter settles (GSAP TextPlugin)

BACKGROUND:
- Clean dark background (#0f0f0f) or subtle gradient
- No competing background animations — the text IS the show

CONTENT:
- Headline: "[YOUR HEADLINE]" — bold, white, clamp(3rem, 8vw, 6rem)
- Subheadline: "[YOUR SUBHEADLINE]" — lighter weight, max-width: 600px
- CTA: "[YOUR CTA]" — appears last in the sequence

LAYOUT:
- min-height: 100dvh, centered with flexbox
- Headline max-width: 20ch for impact

RESPONSIVE:
- Mobile: split by words instead of characters (fewer elements = better performance)
- Reduce stagger to 0.06s on mobile (feels faster with fewer items)
- prefers-reduced-motion: skip SplitText, show instant headline with simple fade-in

TECH: HTML + CSS + GSAP (gsap.min.js + SplitText.min.js from CDN). Load GSAP with defer.

מתי להשתמש: סוכנויות יצירתיות, portfolios של מעצבים, אתרי editorial, דפי נחיתה שה-headline הוא המסר העיקרי. Kinetic typography עובד מצוין כשיש לכם headline קצר וחזק (3-6 מילים) שמגיע "בחלקים" מגביר את הדרמה.

מתי לא: headline ארוך (8+ מילים) — האנימציה תרגיש אינסופית. אתרים עם הרבה תוכן above the fold — אין זמן לחכות ל-1.2 שניות של אנימציית טקסט כשהגולש רוצה לראות information. וגם: אם ה-headline בעברית/ערבית (RTL), ודאו שה-stagger direction מתחיל מימין, לא משמאל.

מתכון 6: Text Reveal Hero

מה זה: טקסט שנחשף בהדרגה תוך כדי גלילה — כאילו חלון נפתח ומגלה את המילים מתחתיו. האפקט הזה יוצר תחושת "גילוי" ו-anticipation, ומתאים לחוויות storytelling שבהן אתם רוצים שהגולש ירגיש שהוא מגלה משהו, לא רק קורא אותו. ב-2025 זה אפשרי ב-CSS בלבד בזכות scroll-driven animations.

איך זה עובד טכנית: clip-path (או mask-image) מגביל את האזור הגלוי של הטקסט. ב-CSS מודרני, animation-timeline: view() מקשר את שינוי ה-clip-path לעמדת הגלילה — כלומר ככל שגוללים, ה-clip-path גדל וחושף יותר טקסט. אפשר גם עם GSAP ScrollTrigger + scrub: true לתמיכה רחבה יותר בדפדפנים.

Build a hero section where the headline text is revealed through a clip-path mask as the user scrolls.

REVEAL EFFECT:
- Headline starts hidden (clip-path: inset(0 0 100% 0) — bottom edge clips everything)
- As user scrolls, clip-path transitions to inset(0 0 0% 0) — fully revealed
- Use CSS scroll-driven animations:
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
- The reveal should feel like a curtain lifting from bottom to top
- Add a subtle gradient-edge at the clip boundary for a soft reveal (not hard cut)

BACKGROUND:
- Solid dark (#0a0a0a) or very subtle gradient
- No competing visual elements — the reveal IS the spectacle

CONTENT:
- Headline: "[YOUR HEADLINE]" — extra bold, white, clamp(3rem, 10vw, 8rem)
- Make the headline LARGE (it needs to fill most of the viewport for the effect to work)
- Subheadline below: revealed 200ms after headline completes
- CTA: appears with fade-in after full reveal

LAYOUT:
- Hero section needs extra height for scroll runway: min-height: 150vh
- Headline vertically centered in a sticky container
- Content should feel like it "lives" in the page, not floating

RESPONSIVE:
- Mobile: reduce headline size, keep reveal effect but shorten scroll runway to 120vh
- prefers-reduced-motion: show headline immediately, no clip-path animation

FALLBACK (for older browsers):
- If animation-timeline not supported: show headline with simple fade-in on load
- Use @supports (animation-timeline: view()) for progressive enhancement

TECH: Pure HTML + CSS. No JavaScript. Use CSS scroll-driven animations (animation-timeline).
For broader support, provide alternative GSAP ScrollTrigger version in comments.

מתי להשתמש: מותגי פרימיום, דפי storytelling, אתרי editorial, דפי נחיתה שהמסר צריך "להירשם" לאט ולא להיזרק בבת אחת. עובד מצוין כשה-headline קצר אבל חזק — "One word. Everything changes." סוג של headline.

מתי לא: דפים עם information-heavy hero (e-commerce, SaaS דשבורד) — הגולש צריך לראות מידע מיידית, לא לחכות לגלילה כדי לקרוא. גם לא מתאים למובייל-first אם אין תוכן אחר מעל ה-hero — הגולש לא ידע שצריך לגלול.

מתכון 7: Animated Counter Hero

מה זה: מספרים שרצים מאפס לערך הסופי ברגע שהם נכנסים לצפייה — 0 → 10,000 לקוחות, 0 → 99.9% uptime, 0 → $2.4B הכנסות. האפקט הזה מוכיח ויזואלית שאתם לא סתם טוענים — אתם מדגימים. מושלם לדפים שמנסים לבנות אמון דרך מספרים אמיתיים.

איך זה עובד טכנית: שתי גישות. גישה 1 (JavaScript): IntersectionObserver מזהה מתי אלמנט ה-counter נכנס ל-viewport, ואז requestAnimationFrame מעדכן את ה-textContent ממספר ההתחלה למספר הסופי לאורך ~2 שניות עם easing (ease-out כדי שייאט בסוף). גישה 2 (CSS מודרני): @property --num מגדיר custom property מספרי, ו-CSS @keyframes מנפיש אותו מ-0 לערך הסופי. counter(num) מציג אותו בתוכן — אפס JavaScript.

Build a hero section with animated counting numbers that count up when they enter the viewport.

COUNTER ANIMATION:
- 3-4 stat boxes, each with:
  - A large number that counts from 0 to its target value
  - A label below the number (e.g., "Happy Clients", "Projects Delivered")
  - Optional: suffix after the number ("+", "%", "K", "M", "$")
- Use IntersectionObserver to trigger counting ONLY when the section is visible
- Count duration: 2 seconds with ease-out (fast start, gentle landing)
- Use requestAnimationFrame for smooth 60fps counting
- Numbers should be formatted with locale separators (e.g., 10,000 not 10000)

STAT VALUES:
- Stat 1: [YOUR NUMBER, e.g., 10000] — label: "[YOUR LABEL, e.g., Happy Clients]" — suffix: "+"
- Stat 2: [YOUR NUMBER, e.g., 99.9] — label: "[YOUR LABEL]" — suffix: "%"
- Stat 3: [YOUR NUMBER, e.g., 50] — label: "[YOUR LABEL]" — suffix: "M+"
- Stat 4 (optional): [YOUR NUMBER] — label: "[YOUR LABEL]"

LAYOUT:
- Stats in a responsive grid: 4 columns on desktop, 2x2 on tablet, stacked on mobile
- Each stat box: large number (clamp(2rem, 5vw, 4rem)) + small label below
- Subtle dividers or card backgrounds between stats
- Optional: a headline above the stats row with the company value proposition

BACKGROUND:
- Light or dark — counters work on both
- Subtle gradient or solid color — nothing that competes with the numbers

RESPONSIVE:
- Mobile: 2 columns or stacked, smaller number size
- prefers-reduced-motion: show final numbers immediately, no counting animation

TECH: HTML + CSS + vanilla JavaScript (IntersectionObserver + requestAnimationFrame).
No libraries needed. Alternatively, provide a CSS-only version using @property for modern browsers.

מתי להשתמש: דפי הישגים (annual reports), SaaS dashboards, דפי "אודות" של חברות גדולות, כל מצב שבו יש מספרים אמיתיים ומרשימים להציג. Counter hero עובד מצוין גם כ-section שני מתחת ל-hero הראשי.

מתי לא: כשאין לכם מספרים אמיתיים (אל תמציאו סטטיסטיקות — הגולשים מרגישים). כשה-hero צריך לספר סיפור רגשי — מספרים הם לוגיים, לא רגשיים. וגם: אם המספרים לא מרשימים מספיק ("12 לקוחות" לא שווה counter animation).

מתכון 8: Split-Screen Hero

מה זה: המסך מחולק לשני חצאים — שמאל וימין (או עליון ותחתון) — כל אחד עם מסר, צבע, או תמונה שונים. הקונטרסט בין החצאים יוצר מתח ויזואלי שמושך את העין. זה הארכיטיפ ה"נגיש" ביותר מבחינה טכנית — CSS Grid או Flexbox בלבד — אבל כשעושים אותו נכון עם אינטראקציה (hover שמרחיב צד אחד), הוא יכול להיות מרשים לא פחות מ-3D.

איך זה עובד טכנית: CSS Grid עם grid-template-columns: 1fr 1fr (או display: flex עם flex: 1 לכל צד). האינטראקציה הקלאסית: :hover על צד אחד מרחיב אותו ל-65-70% ומכווץ את השני, עם transition: flex 0.5s ease. אפשר להוסיף clip-path אלכסוני לקו ההפרדה (במקום קו ישר) לתחושה יותר דינמית.

Build a split-screen hero section with two contrasting halves.

LAYOUT:
- Two equal halves side by side (CSS Grid: grid-template-columns: 1fr 1fr)
- Full viewport height: min-height: 100dvh
- Diagonal divider between halves using clip-path on both sides (angled ~5deg)

LEFT HALF:
- Background: [YOUR COLOR/IMAGE, e.g., dark theme #1a1a2e]
- Headline: "[YOUR LEFT HEADLINE]" — white, bold
- Brief text + CTA button
- Represents: [e.g., "For Developers", "Product A", "Before"]

RIGHT HALF:
- Background: [YOUR COLOR/IMAGE, e.g., light theme #f5f5f5 or a photo]
- Headline: "[YOUR RIGHT HEADLINE]" — dark text
- Brief text + CTA button
- Represents: [e.g., "For Designers", "Product B", "After"]

INTERACTION:
- On hover (desktop): hovered half expands to 65%, other shrinks to 35%
- Use CSS transition: flex 0.6s cubic-bezier(0.4, 0, 0.2, 1)
- Each half has a subtle scale(1.02) on hover for depth
- The diagonal clip-path shifts with the expansion

RESPONSIVE:
- Tablet: reduce interaction to simple highlight (no expand)
- Mobile: stack vertically (top/bottom), each half ~50vh
- prefers-reduced-motion: disable expand animation, keep static layout

TECH: HTML + CSS only. Optional: minimal JavaScript for touch support on mobile.

מתי להשתמש: כש-hero צריך להציג שני מסרים מנוגדים — "לפני/אחרי", "למפתחים/למעצבים", "חינמי/פרימיום", "מוצר A/מוצר B". גם מתאים ל-portfolios עם חלוקה (עיצוב/פיתוח) ולאתרי נדל"ן (חוץ/פנים). ה-split מייצר narrative tension שגורם לגולש לרצות לחקור את שני הצדדים.

מתי לא: כשיש מסר אחד ברור — split-screen מפצל תשומת לב, ואם אין סיבה לפיצול, הוא מבלבל. גם לא מומלץ כשצד אחד חלש יותר מהשני (הקונטרסט חושף חולשה). ובמובייל — תמיד עדיף לתכנן שהצד החשוב יותר יופיע קודם כשעוברים ל-stack.

3.5 מתכונים 9-12: תלת-מימד ומתקדם (3D Scene, Globe, Parallax, Morphing Shapes)

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

מתכון 9: 3D Scene Hero

מה זה: אובייקט תלת-מימדי — מוצר, לוגו, צורה גיאומטרית — שמסתובב, מגיב לעכבר, או משתנה בגלילה, ישירות ב-hero section. זה ה-"level הכי גבוה" של hero מרשים, והוא מה שמפריד בין אתר בינוני לאתר שגורם לאנשים לשלוח link לחברים. אבל: הוא גם הכי כבד מבחינת ביצועים ומורכבות.

איך זה עובד טכנית: Three.js (או React Three Fiber עבור React) יוצר סצנה עם camera, lights, ו-3D object. ה-object יכול להיות geometry פשוט (box, sphere, torus) או מודל GLTF/GLB מיובא. GSAP ScrollTrigger מאפשר לקשור rotation/position של ה-object לגלילה. Renderer: WebGL (98%+ תמיכה), עם WebGPU כחלופה עתידית. ה-canvas element של Three.js יושב כ-background מאחורי התוכן.

Build a hero section with an interactive 3D object using Three.js.

3D SCENE:
- Create a Three.js scene with a single geometric object:
  [YOUR OBJECT: e.g., "low-poly torus knot", "metallic sphere", "floating cube cluster"]
- Material: [e.g., "MeshStandardMaterial with metallic: 0.8, roughness: 0.2, color: #6366f1"]
- Lighting: one ambient light (intensity 0.4) + one directional light (intensity 0.8)
- Camera: perspective, fov 45, positioned to see the full object

INTERACTION:
- Mouse movement rotates the object subtly (max 15deg on each axis)
- Use mousemove event with lerp (linear interpolation) for smooth following
- On scroll: object slowly rotates 360deg over the page height (GSAP ScrollTrigger scrub)
- Optional: object gently floats (translateY sine wave, 3s cycle)

BACKGROUND:
- Dark gradient behind the canvas (#0a0a0a to #1a1a2e)
- Three.js canvas is positioned absolute, behind the text content

CONTENT (overlaid on 3D):
- Headline: "[YOUR HEADLINE]" — white, bold, clamp(2.5rem, 7vw, 5rem)
- Subheadline: "[YOUR SUBHEADLINE]"
- CTA button with subtle backdrop-blur

PERFORMANCE:
- pixelRatio: Math.min(window.devicePixelRatio, 2) — cap at 2x
- Disable antialiasing on mobile
- Use requestAnimationFrame loop, pause when tab is hidden (document.hidden)
- Object polygon count: under 5,000 faces

RESPONSIVE:
- Mobile: disable mouse interaction, keep auto-rotation only
- Smaller canvas resolution (0.75x) on mobile
- prefers-reduced-motion: show static 3D render (no rotation)

FALLBACK:
- If WebGL not supported: show a static image of the 3D object as background

TECH: HTML + CSS + Three.js (from CDN). Optional: GSAP ScrollTrigger for scroll-linked rotation.

מתי להשתמש: product showcases (אתרים שמציגים מוצר פיזי או דיגיטלי), חברות gaming, tech premium, ודפי נחיתה שצריכים "wow factor" מקסימלי. 3D hero עובד מעולה כשהאובייקט הוא המסר — למשל, סניקר שמסתובב, headphones מכל זווית, לוגו שמתפרק ומתרכב.

מתי לא: כשאין אובייקט ספציפי להציג (3D של "צורה גנרית" מרגיש חסר משמעות). כשהקהל בעיקר על מובייל — Three.js על מכשיר ישן = חוויה גרועה. וכשזמן הפיתוח קצר — 3D hero דורש tweaking שלא תמיד ה-AI מצליח ב-prompt ראשון.

מתכון 10: Interactive Globe Hero

מה זה: כדור הארץ מסתובב ב-hero, עם נקודות (markers) שמסמנות מיקומים — משרדים, שרתים, לקוחות, נתיבי משלוח. הגלובוס אומר "אנחנו גלובליים" טוב יותר מכל headline. חברות כמו GitHub, Cloudflare ו-Stripe משתמשות בזה כדי להמחיש סקאלה גלובלית.

איך זה עובד טכנית: שתי גישות. גישה כבדה: Three.js עם sphere geometry, texture של מפת העולם (או wireframe), ו-markers כ-points שממוקמים לפי lat/lng. ספריות כמו globe.gl (מעל Three.js) מפשטות את זה. גישה קלה: CSS 3D transforms — border-radius: 50% על div עם background pattern שזז ב-translateX, עם perspective ו-rotateY. זה לא globe אמיתי, אבל בגודל hero section ומרחק מספיק — ה-illusion עובדת.

Build a hero section with an interactive rotating globe showing global presence.

GLOBE:
- Use Three.js with a sphere geometry (radius: 1, segments: 64, 64)
- Globe texture: dark navy base (#0a1628) with light country outlines or a subtle world map texture
- Atmosphere glow: add a slightly larger transparent sphere with a blue-purple edge glow (Fresnel effect)
- Auto-rotation: slow Y-axis rotation (0.002 per frame)
- Mouse drag to rotate (OrbitControls with damping, limited to rotation only — no zoom, no pan)

MARKERS:
- Place glowing dots at these coordinates (lat, lng):
  [YOUR LOCATIONS, e.g., "Tel Aviv (32.08, 34.78), New York (40.71, -74.01), London (51.51, -0.13), Tokyo (35.68, 139.69)"]
- Each marker: small pulsing circle (scale 1.0 to 1.3, repeat)
- On hover: show tooltip with location name
- Optional: draw arc lines between markers to show connections

BACKGROUND:
- Very dark: #050510
- Subtle star field behind the globe (tiny white dots)

CONTENT (beside the globe):
- Two-column layout: text LEFT, globe RIGHT
- Headline: "[YOUR HEADLINE, e.g., Global infrastructure. Local speed.]"
- Subheadline + stats (e.g., "50+ countries, 200+ edge servers")
- CTA button

RESPONSIVE:
- Tablet: globe below text (stacked)
- Mobile: replace globe with a static globe image (SVG or WebP) — too heavy for mobile GPU
- prefers-reduced-motion: stop rotation, show static globe

TECH: HTML + CSS + Three.js. Use OrbitControls from Three.js examples.

מתי להשתמש: חברות גלובליות, לוגיסטיקה, תיירות, CDN/infrastructure, כל מותג שהנרטיב שלו הוא "אנחנו בכל מקום". Globe hero גם עובד מצוין עם real-time data — למשל, נקודות שמהבהבות כל פעם שיש transaction חדש.

מתי לא: עסק מקומי (globe עם נקודה אחת זה עצוב, לא מרשים). אתרים שהקהל רובו מובייל — Three.js globe על מכשיר ישן = מניפה. וכשאין נתונים גיאוגרפיים אמיתיים — globe "ריק" בלי markers מרגיש כמו template שלא מילאו.

מתכון 11: Parallax Layers Hero

מה זה: שכבות שזעות במהירויות שונות בזמן גלילה — שכבת רקע זוחלת לאט, שכבה אמצעית זזה קצת, ותוכן ה-foreground זז הכי מהר. התוצאה: תחושת עומק תלת-מימדית בלי 3D אמיתי. Parallax זה אחד האפקטים הוותיקים ביותר בעיצוב אתרים, אבל ב-2025 הוא חי ובועט — הפעם ב-CSS טהור בזכות scroll-driven animations.

איך זה עובד טכנית: גישה מודרנית (CSS בלבד): animation-timeline: scroll() מקשר כל שכבה ל-scroll position. שכבת הרקע זזה ב-translateY(calc(var(--scroll) * 0.3)), השכבה האמצעית ב-0.6, והתוכן ב-1.0. גישה קלאסית: GSAP ScrollTrigger עם scrub: true מנפיש את השכבות. היתרון של CSS: אפס JavaScript, GPU-composited. היתרון של GSAP: תמיכה רחבה יותר, שליטה מדויקת יותר, easing מותאם אישית.

Build a hero section with multi-layer parallax scrolling effect.

PARALLAX LAYERS:
- Layer 1 (back): [YOUR BACKGROUND — e.g., "dark gradient sky #0a0a2e to #1a1a4e"]
  - Scroll speed: 0.2x (moves slowest)
- Layer 2 (mid-back): [e.g., "abstract mountain silhouettes or geometric shapes"]
  - Scroll speed: 0.4x
- Layer 3 (mid-front): [e.g., "larger foreground shapes, slightly blurred"]
  - Scroll speed: 0.7x
- Layer 4 (front): Main text content
  - Scroll speed: 1.0x (normal scroll)

IMPLEMENTATION — use CSS scroll-driven animations:
- Each layer: position absolute, full width, will-change: transform
- Use animation-timeline: scroll() with @keyframes that translate each layer
- @keyframes layer-back { to { transform: translateY(-20vh); } }
- @keyframes layer-mid { to { transform: translateY(-40vh); } }
- Apply with: animation: layer-back linear both; animation-timeline: scroll();

CONTENT (Layer 4):
- Headline: "[YOUR HEADLINE]" — white, bold, clamp(2.5rem, 8vw, 5rem)
- Subheadline + CTA
- Positioned center, z-index above all layers

LAYOUT:
- min-height: 120vh (extra height for parallax runway)
- overflow: hidden on the hero container
- Each layer sized larger than viewport (120-150%) to prevent gaps

RESPONSIVE:
- Mobile: reduce parallax intensity (0.1x, 0.2x, 0.5x) — subtle effect on small screen
- prefers-reduced-motion: disable parallax, all layers at normal scroll speed

FALLBACK:
- @supports not (animation-timeline: scroll()): use static layered background, no parallax
- Optional: provide GSAP ScrollTrigger alternative in comments

TECH: Pure HTML + CSS with scroll-driven animations. Zero JavaScript.

מתי להשתמש: storytelling ו-editorial (parallax מוסיף "עומק" לנרטיב), מותגי outdoor/טבע (שכבות של הרים/יער), דפי נחיתה ארוכים שהגלילה היא חלק מהחוויה. Parallax עובד מצוין כהוספה לארכיטיפ אחר — gradient mesh ברקע + parallax על שכבות foreground.

מתי לא: דפים קצרים (אין מספיק scroll runway ל-parallax). מובייל בעיקר — parallax מרגיש פחות אפקטיבי במסך קטן ויכול להרגיש "מקולקל" אם לא מכוילים נכון. וגם: לעולם אל תשתמשו ב-background-attachment: fixed — זה שבור ב-iOS Safari ויגרום לגלילה קופצנית.

מתכון 12: Morphing Shapes Hero

מה זה: צורות SVG שמשתנות ומתמורפות ברציפות ברקע — blob שהופך ל-blob אחר, קווים שמתעקלים ומשתנים, צורות אורגניות שנושמות. התוצאה: רקע שמרגיש חי ואורגני בלי להיות aggressive כמו particles או כבד כמו 3D. זה אפקט "שקט" — הגולש לא בהכרח מבחין בו מיידית, אבל הוא מרגיש שמשהו "חי" ברקע.

איך זה עובד טכנית: GSAP MorphSVG (חינמי מאז 2024) מנפיש <path> אחד לשני — הוא מחשב interpolation בין הנקודות ויוצר מעבר חלק. חלופה: ספריית Flubber.js (קלה יותר, MIT). חלופה CSS-only: border-radius עם ערכים מורכבים (כמו 30% 70% 70% 30% / 30% 30% 70% 70%) ב-@keyframes — יוצר blob שמשתנה בלי SVG.

Build a hero section with continuously morphing SVG shapes in the background.

MORPHING SHAPES:
- 2-3 large SVG blob shapes in the background
- Each blob: filled with a gradient ([YOUR COLORS]), opacity: 0.3-0.5
- Use GSAP MorphSVG to morph each blob between 3-4 different path states
- Morphing cycle: 8-12 seconds per full morph loop, infinite repeat
- Stagger the blobs so they don't all morph at the same time
- Easing: "sine.inOut" for organic, breathing feel
- Blobs should be large (spanning 40-60% of the viewport)

ALTERNATIVE (CSS-only, no SVG):
- Use div elements with complex border-radius values
- @keyframes that transition border-radius between organic shapes:
  0%: border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%
  50%: border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%
- Add filter: blur(40px) for soft edges
- Combine with background gradient for color

BACKGROUND:
- Base: dark (#0a0a0f) or light (#fafafa) — morphing works on both
- SVG shapes positioned absolute, behind content

CONTENT:
- Headline: "[YOUR HEADLINE]" — bold, clamp(2.5rem, 7vw, 5rem)
- Subheadline + CTA
- z-index above the morphing shapes

RESPONSIVE:
- Mobile: reduce to 1-2 blobs (fewer elements = smoother)
- Scale down blob size on small screens
- prefers-reduced-motion: show static blobs, no morphing

TECH: HTML + CSS + GSAP with MorphSVG plugin (free).
Alternative: CSS-only version with border-radius animation (no libraries).

מתי להשתמש: סוכנויות יצירתיות, portfolios של אומנות/עיצוב, מותגים אורגניים/wellness, כל אתר שרוצה תחושה "אורגנית" ו"חיה" בלי אפקט aggressive. Morphing shapes מצוין כרקע לארכיטיפים אחרים — hero עם kinetic typography + morphing shapes ברקע.

מתי לא: מותגים corporate/רשמיים (blobs מרגישים "playful" מדי). אתרים עם תמונות רקע — ה-blobs יתחרו בתמונה. וכשה-hero כבר עמוס באפקטים אחרים.

3.6 שילוב מתכונים — כלל 2+1

עכשיו שיש לכם 12 ארכיטיפים, הפיתוי הוא לשלב 4-5 מהם ב-hero אחד. אל. זו הטעות הנפוצה ביותר שאנחנו רואים — hero section שנראה מדהים בדסקטופ של המפתח ונופל על הפנים במובייל של הלקוח. הכלל שמונע את זה: 2+1.

טבלת תאימות — מה מתחבר למה

לא כל שילוב עובד. הנה המפה:

איך לכתוב prompt לשילוב

כשמשלבים שני ארכיטיפים, הפרומפט צריך לציין במפורש מה בכל שכבה. אם לא תגידו — ה-AI ישים הכל באותה "רמה" והאפקטים יתנגשו. הנה ה-pattern:

Build a hero section combining [EFFECT A] background with [EFFECT B] text animation.

IMPORTANT: These are separate layers. Do NOT merge them.

LAYER 1 — BACKGROUND (z-index: 0):
[Full prompt for Effect A — paste from the relevant recipe above]

LAYER 2 — TEXT + ENTRANCE (z-index: 10):
[Full prompt for Effect B — paste from the relevant recipe above]

LAYER 3 — SCROLL BEHAVIOR (optional):
[e.g., "On scroll, background parallax at 0.3x speed, text at 1.0x"]

PERFORMANCE BUDGET:
- Total JavaScript: under 80KB gzipped
- Animations: only transform + opacity
- Mobile: [specify what to simplify/disable]

3.7 טיפוגרפיה של Hero — clamp(), hierarchy, ו-RTL

הטיפוגרפיה היא הרכיב שהמשתמש קולט ראשון ב-hero. לא הרקע, לא האנימציה — הכותרת. אתם יכולים לבנות את ה-gradient mesh המושלם ולהוסיף particles מהפנטים, אבל אם הכותרת קטנה מדי, דחוסה מדי, או לא קריאה — הכל מתמוטט. ב-hero section, הטיפוגרפיה היא לא עיצוב — היא ארכיטקטורה של תשומת לב.

Fluid Typography עם clamp() — שורה אחת במקום 5 breakpoints

הדרך הישנה לטיפוגרפיה רספונסיבית הייתה לכתוב @media query לכל breakpoint: גודל אחד למובייל, אחד לטאבלט, אחד לדסקטופ. clamp() מחליפה את כל זה בשורה אחת:

/* ישן — 3 breakpoints */
h1 { font-size: 2rem; }
@media (min-width: 768px)  { h1 { font-size: 3.5rem; } }
@media (min-width: 1200px) { h1 { font-size: 5rem; } }

/* חדש — שורה אחת */
h1 {
  font-size: clamp(2.5rem, 5vw + 1rem, 7rem);
}

ה-clamp() מקבלת שלושה ערכים: מינימום (2.5rem — לעולם לא יותר קטן), preferred (5vw + 1rem — גדל עם הדפדפן), ו-מקסימום (7rem — לעולם לא יותר גדול). התוצאה: הכותרת גדלה בצורה חלקה לחלוטין מ-375px ועד 2560px, בלי "קפיצות" בין breakpoints.

הנוסחה המהירה: clamp(MIN, PREFERRED, MAX) כאשר:

• MIN — הגודל הקטן ביותר שהכותרת צריכה להיות (בד"כ 2-2.5rem למובייל)
• PREFERRED — ערך שמשתנה עם viewport. השתמשו ב-Xvw + Yrem (ה-rem מוסיף baseline). ככל ש-X גבוה יותר, הכותרת משתנה מהר יותר
• MAX — הגודל הגדול ביותר (בד"כ 5-8rem לכותרות hero)

טיפ פרקטי: Utopia Type Calculator מייצר את ערכי ה-clamp() בשבילכם — בחרו את הגדלים לקצוות והוא יחשב את ה-preferred value.

Font Pairing ל-Hero — Display + Body

ב-hero section אתם צריכים שני פונטים שעובדים יחד: אחד display לכותרת הראשית (גדול, מרשים, בולט) ואחד body לתת-כותרת וטקסט משני (קריא, נקי, שקט). הכלל: הכותרת מושכת, התת-כותרת מסבירה.

שילובים שעובדים:

• עברית: Heebo 800 (headline) + Heebo 300 (subheadline) — אותה משפחה, משקלים שונים. בטוח ונקי
• עברית מודרנית: Rubik 700 (headline) + Assistant 400 (body) — ניגוד בין geometric ל-humanist
• אנגלית + עברית: Inter 800 (English headline) + Heebo 400 (Hebrew body) — x-height דומה, הרמוניה בין שפות

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

Letter-spacing ו-Line-height לטקסט Display

טקסט display (כותרות גדולות) צריך letter-spacing שלילי — האותיות נצמדות זו לזו, מה שנותן מראה מודרני ומקצועי. ככל שהטקסט גדול יותר, ה-spacing שלילי יותר:

.hero-headline {
  font-size: clamp(2.5rem, 5vw + 1rem, 7rem);
  letter-spacing: -0.02em;  /* מינימלי — מודרני */
  line-height: 1.05;        /* צמוד — לכותרות בלבד */
}

.hero-subheadline {
  font-size: clamp(1rem, 1.5vw + 0.5rem, 1.5rem);
  letter-spacing: 0;        /* רגיל — לקריאות */
  line-height: 1.5;         /* מרווח — לקריאות */
  max-width: 55ch;          /* שורות קצרות = קריאות */
}

חשוב: line-height: 1.05 מתאים רק לכותרות של שורה-שתיים. לפסקאות, תמיד 1.5 לפחות. אם הכותרת שלכם יורדת ל-3+ שורות במובייל, העלו ל-1.2.

RTL — מה משתנה ב-Hero עברי

רוב ה-hero templates שתקבלו מ-AI מיועדים ל-LTR (אנגלית). כשאתם מבקשים hero בעברית, צריך לשים לב ל-4 דברים:

1. text-align: start (לא right) — ב-dir="rtl", start מצביע אוטומטית ימינה. אם מחר תרצו גרסה באנגלית, לא תצטרכו לשנות
2. מיקום CTA — כפתור ה-CTA צריך להיות בצד שמאל של הטקסט (כי בעברית העין מסיימת שם). ב-LTR הוא בימין
3. margin/padding — השתמשו ב-margin-inline-start ו-padding-inline-end במקום margin-left/margin-right. המאפיינים הלוגיים מתהפכים אוטומטית ב-RTL
4. אנימציות כיוון — אם יש slide-in מימין, ב-RTL הוא צריך לבוא משמאל. שימו לב ש-translateX לא מתהפך אוטומטית — צריך CSS logical properties או JS check

טיפ ל-prompt: כשאתם מבקשים hero בעברית מ-AI, הוסיפו את השורה: "The page is RTL (dir='rtl'). Use logical properties (margin-inline, padding-inline) instead of physical (margin-left, margin-right). Ensure CTA and text alignment respect RTL reading flow."

WCAG Contrast — קריאות על רקע Hero

רקעי hero הם כמעט תמיד כהים או צבעוניים, והטקסט צריך להיות קריא מעליהם. WCAG AA דורש יחס ניגודיות 4.5:1 לטקסט רגיל ו-3:1 לטקסט גדול (18px+ bold או 24px+ regular). כותרות hero הן בד"כ "טקסט גדול" — אז 3:1 מספיק.

הטכניקה הנפוצה: overlay שכבה חצי-שקופה בין הרקע לטקסט:

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.6),   /* חזק למעלה — שם הכותרת */
    rgba(0, 0, 0, 0.2)    /* קל למטה — הרקע נראה */
  );
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;  /* מעל ה-overlay */
}

ה-gradient overlay נותן ניגודיות חזקה למעלה (איפה שהכותרת) ומשאיר את הרקע גלוי למטה. זה עובד עם כל סוג רקע: תמונה, וידאו, gradient mesh, particles.

בדיקה: השתמשו ב-WebAIM Contrast Checker — הזינו את צבע הטקסט ואת צבע הרקע (כולל overlay). אם לא עוברים 3:1, הגבירו את ה-opacity של ה-overlay.

3.8 Hero רספונסיבי — מדסקטופ למובייל בלי לשבור

בניתם hero מרהיב על מסך 27 אינץ' — gradient mesh זורם, kinetic typography עם stagger מושלם, parallax חלק. מעולה. עכשיו פתחו אותו ב-iPhone 13. אם הוא נראה שבור, חצי מהאנימציות לא עובדות, והטקסט חורג מהמסך — אתם בחברה טובה. רוב ה-hero sections נשברים במובייל כי הם תוכננו לדסקטופ קודם.

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

אסטרטגיית Breakpoints ל-Hero

לא כל hero צריך להיראות אותו דבר בכל מכשיר. הוא צריך לעבוד בכל מכשיר. הנה מה שמשתנה:

svh במקום vh: במובייל, 100vh כולל את סרגל הכתובת של הדפדפן — מה שגורם לתוכן להיחתך. 100svh (small viewport height) מחשב את הגובה בלי סרגל הכתובת. תמיד השתמשו ב-svh למובייל.

Mobile Fallbacks — מה להחליף ומה לבטל

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

prefers-reduced-motion — נגישות שהיא גם ביצועים

חלק מהמשתמשים מגדירים במערכת ההפעלה "הפחת תנועה" (Reduce Motion) — בגלל רגישות לתנועה, אפילפסיה, או סתם העדפה אישית. ב-CSS, @media (prefers-reduced-motion: reduce) מאפשר לכם לכבות או להאט אנימציות עבור משתמשים אלה:

/* ברירת מחדל — אנימציה מלאה */
.hero-headline {
  animation: fadeSlideUp 0.8s ease-out;
}

/* משתמש שביקש reduced motion — ללא תנועה */
@media (prefers-reduced-motion: reduce) {
  .hero-headline {
    animation: none;
  }

  .hero-video {
    display: none;  /* וידאו = תנועה מתמשכת */
  }

  .particles-canvas {
    display: none;  /* חלקיקים = תנועה מתמשכת */
  }
}

זה לא רק נגישות — זה גם בונוס ביצועים. כשאנימציות כבויות, ה-GPU עובד פחות, הסוללה מחזיקה יותר, וה-FPS תמיד 60. חלק מהמפתחים משתמשים ב-prefers-reduced-motion כ-"performance mode" לא רשמי.

בדיקה על מכשירים אמיתיים vs DevTools

DevTools Responsive Mode הוא כלי מצוין ל-layout, אבל הוא משקר לגבי ביצועים. המחשב שלכם חזק פי 10 מ-iPhone SE. אפקט שרץ ב-60fps ב-DevTools יכול לרוץ ב-15fps על מובייל אמיתי.

תהליך בדיקה מומלץ:

1. Layout ראשון ב-DevTools — בדקו שהעמודות מתקפלות, הכותרת לא חורגת, ה-CTA נגיש
2. Performance ב-DevTools עם throttling — Performance tab → CPU: 4x slowdown, Network: Slow 3G. אם ה-FPS נופל מתחת ל-30 — יש בעיה
3. מכשיר אמיתי — העלו לשרת staging (או השתמשו ב-ngrok) ופתחו במובייל. בדקו: האם הכל טעון תוך 3 שניות? האם הגלילה חלקה? האם ה-CTA נלחץ בנוחות?

3.9 ביצועים — LCP, טעינה וה-2.5 שניות שקובעות הכל

כל מה שלמדתם בפרק הזה — gradients, particles, kinetic typography, 3D scenes — לא שווה כלום אם ה-hero נטען ב-5 שניות. ה-hero section הוא כמעט תמיד ה-LCP element של הדף (Largest Contentful Paint) — המטריקה שגוגל משתמשת בה כדי לקבוע כמה מהר הדף "נראה מוכן" למשתמש.

LCP טוב = מתחת ל-2.5 שניות. LCP גרוע = מעל 4 שניות. בין לבין = "צריך שיפור". כשאתם מעצבים hero מרשים, אתם חייבים לשמור על ה-2.5 שניות האלה — אחרת גוגל מוריד לכם דירוג, והמשתמשים עוזבים לפני שהם רואים את ה-WOW שלכם.

Hero IS the LCP Element — למה זה חשוב

ה-LCP element הוא האלמנט הגדול ביותר שהדפדפן מרנדר ב-viewport הראשון (מעל ה-fold). ב-90% מהדפים, זה ה-hero image, ה-hero video poster, או ה-hero headline (אם אין תמונה). כל אופטימיזציה שתעשו ל-hero = אופטימיזציה ישירה ל-LCP. וכל טעות ב-hero = LCP איטי.

fetchpriority="high" — חיסכון של 700ms

כברירת מחדל, הדפדפן נותן עדיפות נמוכה לתמונות — הוא מעדיף CSS, JavaScript, ופונטים. אבל תמונת ה-hero היא לא תמונה רגילה — היא האלמנט הכי חשוב בדף. fetchpriority="high" אומר לדפדפן: "טען את התמונה הזו קודם כל":

<!-- בלי fetchpriority — הדפדפן מחליט לבד (לרוב: low priority) -->
<img src="hero.webp" alt="...">

<!-- עם fetchpriority — הדפדפן מעדיף את התמונה הזו -->
<img src="hero.webp" alt="..." fetchpriority="high">

בדיקות שטח מראות שיפור ממוצע של ~700ms ב-LCP רק מהוספת ה-attribute הזה. שורה אחת, אפס JavaScript, חיסכון של 700 מילישניות. אין סיבה לא להוסיף את זה לכל תמונת hero.

Preload ב-<head> — התמונה מתחילה להיטען מיד

בדרך כלל, הדפדפן מגלה את תמונת ה-hero רק כשהוא מגיע ל-<img> ב-HTML — שזה אחרי שהוא פרס את כל ה-<head>. <link rel="preload"> אומר לדפדפן להתחיל לטעון את התמונה מייד, עוד לפני שהוא הגיע ל-body:

<head>
  <!-- Preload hero image — starts downloading immediately -->
  <link rel="preload" as="image" href="hero.webp"
        type="image/webp" fetchpriority="high">
</head>

שילוב של preload + fetchpriority="high" הוא ה-one-two punch של LCP optimization. התמונה מתחילה להיטען ברגע שה-HTML מגיע, ומקבלת עדיפות על כל resource אחר.

Image Optimization — WebP, AVIF, ו-srcset

תמונת hero ב-JPEG יכולה לשקול 500KB. אותה תמונה ב-WebP = 250KB. ב-AVIF = 150KB. 25-70% חיסכון בגודל קובץ, בלי ירידה באיכות נראית לעין. ה-<picture> element מאפשר לשלוח את הפורמט האופטימלי לכל דפדפן:

<picture>
  <!-- AVIF — הכי קל, נתמך ב-Chrome/Firefox/Safari 16+ -->
  <source srcset="hero.avif" type="image/avif">

  <!-- WebP — fallback לדפדפנים ישנים יותר -->
  <source srcset="hero.webp" type="image/webp">

  <!-- JPEG — fallback אחרון -->
  <img src="hero.jpg" alt="תיאור ה-hero"
       fetchpriority="high"
       width="1920" height="1080"
       decoding="async">
</picture>

srcset לגדלים שונים: אין סיבה לשלוח תמונת 1920px למסך של 375px. השתמשו ב-srcset עם sizes:

<img src="hero-1920.webp"
     srcset="hero-640.webp 640w,
             hero-1024.webp 1024w,
             hero-1920.webp 1920w"
     sizes="100vw"
     alt="תיאור ה-hero"
     fetchpriority="high">

הדפדפן יבחר אוטומטית את הגודל המתאים למסך. מובייל מקבל 640px (50KB), דסקטופ מקבל 1920px (200KB). כולם מרוצים.

Video Poster Frame — Placeholder ב-10KB

אם ה-hero שלכם משתמש ב-video background, הווידאו עצמו יכול לקחת 2-5 שניות לטעון. בזמן הזה, המשתמש רואה מלבן שחור — או גרוע מזה, כלום. ה-poster attribute פותר את זה:

<video autoplay muted loop playsinline
       poster="hero-poster.webp">
  <source src="hero.mp4" type="video/mp4">
</video>

הטכניקה: צלמו frame אחד מהווידאו, המירו ל-WebP, הקטינו ל-10-20KB (מותר טשטוש קל — זה placeholder). המשתמש רואה רקע יפה מיד, והווידאו מחליף אותו כשהוא מוכן. Preload גם את ה-poster ב-<head> כדי שגם הוא ייטען מהר.

Inline Critical CSS — ה-Hero מוכן לפני שה-CSS נטען

קובץ ה-CSS החיצוני שלכם (style.css) יכול לקחת 200-500ms לטעון. בזמן הזה, ה-hero נראה "שבור" — טקסט ללא עיצוב, תמונה לא ממוקמת. Inline critical CSS שם את ה-CSS הכי חשוב (hero styles) ישירות ב-<head>:

<head>
  <style>
    /* Critical — hero only */
    .hero { min-height: 100svh; display: grid; place-items: center;
            position: relative; overflow: hidden; }
    .hero h1 { font-size: clamp(2.5rem, 5vw + 1rem, 7rem);
               color: white; }
  </style>
  <link rel="stylesheet" href="style.css">
</head>

הדפדפן מרנדר את ה-<style> מיד (הוא כבר ב-HTML), וטוען את style.css ברקע. התוצאה: ה-hero מוכן תוך מילישניות, ושאר הדף מקבל עיצוב כשה-CSS החיצוני מגיע.

Audit Workflow — LCP ב-4 צעדים

תהליך מובנה לאופטימיזציית LCP שעובד על כל hero:

1. זיהוי: Lighthouse → Performance → ראו את "Largest Contentful Paint element". מה הוא? תמונה? וידאו? headline? כמה ms?
2. אופטימיזציה:
   • תמונה → fetchpriority="high" + preload + WebP/AVIF + srcset
   • וידאו → poster image + preload poster
   • Headline → inline critical CSS + font preload
3. בדיקה: הריצו Lighthouse שוב. האם LCP ירד מתחת ל-2.5s?
4. מעקב: PageSpeed Insights (web.dev/measure) מריץ בדיקה מהשטח — לא רק מהמחשב שלכם. בדקו שם גם

prefers-reduced-motion כבונוס ביצועים

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

@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }      /* לא טוענים וידאו */
  .particles-canvas { display: none; } /* לא טוענים canvas */
  /* hero מקבל background-image סטטי במקום */
  .hero { background: url(hero-static.webp) center/cover; }
}

פחות resources = LCP מהיר יותר = דירוג טוב יותר. נגישות וביצועים הולכים יד ביד.

3.10 Hero Animation Entrance — כניסות שמרגישות מקצועיות

בניתם hero section מרהיב — רקע, טיפוגרפיה, CTA, רספונסיבי, ביצועים. עכשיו השאלה האחרונה: איך הוא נכנס? ה-entrance animation היא ההבדל בין hero שפשוט "מופיע" לבין hero שמרגיש כאילו הוא מגיע — בכוונה, בטיימינג, בסגנון שמשדר מקצועיות.

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

Staggered Text Entrance — כל רכיב בתורו

הטכניקה הקלאסית והאלגנטית ביותר: headline נכנס ראשון → subheadline 0.15s אחריו → CTA 0.15s אחרי זה → trust signals 0.15s אחרי זה. כל רכיב עושה fade-up (opacity 0→1 + translateY 30px→0) עם easing של cubic-bezier(0.16, 1, 0.3, 1). Stagger של 0.1-0.15s בין רכיבים נותן תחושה של זרימה בלי לאט מדי.

הנה ה-pattern ב-CSS טהור:

.hero-headline  { animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both; }
.hero-subtitle  { animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both; }
.hero-cta       { animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both; }
.hero-badges    { animation: fadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

שימו לב ל-both ב-animation-fill-mode — בלי זה האלמנטים יהבהבו לרגע לפני שהאנימציה מתחילה. ו-delay ההתחלתי של 0.1s? הוא נותן לדפדפן רגע לרנדר את ה-hero background לפני שהטקסט מתחיל להיכנס.

Letter-by-Letter עם GSAP SplitText

לכניסה דרמטית יותר — פיצול האותיות בנפרד. זה מה שאתרים כמו Awwwards winners עושים. GSAP SplitText (חינמי מ-2024) מפרק כל מילה לאותיות בודדות, ו-stagger של 0.03-0.05s בין אותיות יוצר גל שנע על פני ה-headline:

// GSAP SplitText entrance
const split = SplitText.create(".hero-headline", { type: "chars" });
gsap.from(split.chars, {
  opacity: 0,
  y: 40,
  rotateX: -20,
  stagger: 0.04,
  duration: 0.7,
  ease: "power2.out",
  delay: 0.2
});

שימו לב לכיוון ב-RTL: ב-GSAP, ה-stagger עובד לפי סדר ה-DOM. בעברית (RTL) האותיות ב-DOM הן מימין לשמאל, כך ש-stagger חיובי יוצר כניסה מהאות הראשונה (ימין) — בדיוק מה שרוצים. אם רוצים כניסה מהכיוון ההפוך, השתמשו ב-stagger: { each: 0.04, from: "end" }.

Scale on Scroll — הכניסה שממשיכה

טכניקה אלגנטית ל-heroes שתופסים את כל גובה המסך: ה-hero content מתחיל ב-scale(1.05) וקטן בהדרגה ל-scale(1) ככל שהמשתמש גולל. זה יוצר אפקט "יציאה מתוך התמונה" שמרגיש קולנועי:

/* CSS Scroll-Driven Animation (no JS!) */
.hero-bg {
  animation: heroZoom linear both;
  animation-timeline: scroll();
  animation-range: 0vh 60vh;
}

@keyframes heroZoom {
  from { transform: scale(1.05); }
  to   { transform: scale(1); opacity: 0.3; }
}

שילוב של scale-down + opacity fade-out ככל שהמשתמש גולל למטה יוצר מעבר חלק מה-hero לתוכן שמתחתיו. זה עובד מצוין עם position: sticky על ה-hero כך שהתוכן גולל "מעל" אותו.

הכלל הזהב: animate רק transform + opacity

כל מה שלמדתם עד עכשיו — fadeUp, stagger, scale — משתמש רק ב-transform ו-opacity. זה לא מקרי. אלה שתי ה-properties היחידות שהדפדפן יכול להנפיש ב-GPU compositor thread בלי לעשות layout או paint. כל property אחר (left, top, width, height, margin, padding, background-color) מפעיל layout recalculation ומוריד FPS:

will-change — מתי להשתמש ומתי לא

will-change: transform אומר לדפדפן "האלמנט הזה עומד לזוז — תכין GPU layer מראש". זה מבטל את ה-delay של יצירת layer בהתחלת אנימציה. אבל: כל layer צורך זיכרון GPU. אם שמים will-change על 50 אלמנטים — אתם צורכים 50 layers של זיכרון, ומובייל יקרוס.

הכלל: will-change רק על אלמנט שעומד להתנפש בשנייה הקרובה. הסירו אותו אחרי שהאנימציה נגמרת. ב-CSS, השתמשו בו רק ב-hover/focus state, לא בברירת מחדל:

/* WRONG — permanent will-change wastes GPU memory */
.hero-element { will-change: transform; }

/* RIGHT — only when about to animate */
.hero:hover .hero-element { will-change: transform; }
/* Or in JS: add will-change before animation, remove after */

Prompt Pattern לאנימציות כניסה

כשמבקשים מ-AI ליצור entrance animation, ציינו 5 דברים בפרומפט:

1. סדר הכניסה: "headline first, then subtitle 150ms later, then CTA 150ms later"
2. סוג התנועה: "fade + slide up" / "letter-by-letter stagger" / "scale down from 1.05"
3. Easing: "cubic-bezier(0.16, 1, 0.3, 1)" או "power2.out"
4. Duration: "0.6-0.8s per element, total sequence under 1.5s"
5. Fallback: "prefers-reduced-motion: show content immediately, no animation"

3.11 סיכום ו-Hero Checklist

עברנו דרך ארוכה בפרק הזה — מ-5 עקרונות בסיסיים, דרך 12 ארכיטיפים עם prompt template לכל אחד, ועד טיפוגרפיה, responsive, ביצועים ואנימציות כניסה. הגיע הזמן לעצור ולוודא שהכל נמצא.

מה בניתם בפרק הזה:

• קטלוג של 12 סוגי hero sections עם שמות מקצועיים שאתם יכולים להשתמש בהם בשיחה עם מעצבים, מפתחים, ו-AI
• Prompt template מוכן לכל ארכיטיפ — כולל tech stack, animation, responsive instructions ו-performance constraints
• עץ החלטות לבחירת הארכיטיפ הנכון: brand personality → content type → performance budget → archetype
• כלל 2+1 לשילוב אפקטים: רקע אחד + טקסט אחד + scroll behavior אופציונלי (לעולם לא יותר)
• Hero section שנבנה בפועל עם AI — מ-brief ועד תוצאה עובדת

מה למדתם:

• כל hero צריך archetype מוגדר — לא "תעשה לי משהו יפה". שם הארכיטיפ בפרומפט = AI מבין בדיוק מה לבנות
• ביצועים הם לא "נחמד שיש" — הם חובה. LCP מעל 2.5s = Google מוריד דירוג + משתמשים עוזבים
• Responsive הוא לא "לבדוק אחר כך" — הוא חלק מהפרומפט. "mobile-first, stack vertically" הוא חובה בכל brief ל-hero
• אנימציות כניסה עובדות רק עם transform + opacity. כל property אחר = jank

Hero Quality Checklist — הצ'קליסט שתלווה כל hero שתבנו

לפני שאתם שולחים hero section לפרודקשן (או ממשיכים לבנות את שאר האתר), עברו על הרשימה הזו: