קומפוננטות WOW — Aceternity UI, Magic UI ו-React Bits

מה הופך אתר מ'בסדר' ל-WOW

נניח שבניתם אתר עם AI — shadcn/ui, Tailwind CSS, כל מה שלמדנו עד עכשיו. האתר נראה מקצועי, נקי, תפקודי. אבל משהו חסר. הוא נראה כמו עוד אתר. אין בו את ה-"רגע" הזה שגורם למבקר לעצור ולהגיד "וואו".

מה ההבדל? אנימציות ואפקטים ויזואליים. כשכותרת נכנסת עם אפקט blur-to-focus, כשכרטיסים נוטים בתלת-ממד כשהעכבר עובר עליהם, כשהרקע זז עם particles — האתר מרגיש חי. לא סתטי. לא "עוד דף HTML". אלא חוויה.

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

הנה ההבדל בשתי מילים:

החדשות הטובות: כל הספריות שנלמד בפרק הזה חינמיות או עם free tier נדיב מאוד. לא צריך לשלם שקל כדי להוסיף WOW לאתר שלכם. צריך רק לדעת איפה לחפש.

וזה בדיוק מה שנעשה: נכיר את 3 הספריות הגדולות (Aceternity UI, Magic UI, React Bits), נלמד את מנוע האנימציה שמאחוריהן (Motion), נגלה עוד 10 ספריות משלימות — ונבין מתי WOW מוסיף ומתי הוא פוגע. בסוף הפרק, תדעו בדיוק לאן לגלוש, מה לבחור, ואיך לבקש מ-AI לשלב אפקט מרשים בפרויקט.

למה זה חשוב ל-Vibe Coders? כי אתם לא כותבים אנימציות — AI כותב בשבילכם. אבל אתם צריכים לדעת מה קיים. אם לא תדעו שיש קומפוננטת Aurora Background חינמית ב-Aceternity UI — תבקשו מ-AI "תעשה לי רקע מגניב" ותקבלו CSS gradient בסיסי. אם תדעו — תבקשו "Use Aceternity Aurora Background for the hero section" ותקבלו אפקט שנראה כמו עשרות אלפי דולרים של פיתוח.

הנה סיפור שממחיש את הנקודה: מפתח Vibe Coder ישראלי רצה לבנות landing page לסטארטאפ שלו. הוא ביקש מ-AI "Build me a cool landing page". קיבל דף סטנדרטי עם shadcn/ui — נקי, תפקודי, אבל בלי שום WOW. אחרי שלמד על Aceternity UI, הוא שינה את הprompt: "Build a landing page with Aceternity Aurora Background hero, spotlight feature cards, and infinite moving testimonial cards". התוצאה נראתה כמו אתר של סטארטאפ אמריקאי עם funding של $50M. אותו AI, אותו זמן עבודה — prompt שונה.

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

שלוש השכבות של אתר מקצועי

עד עכשיו בקורס בנינו שתי שכבות:

1. שכבה 1 — Tailwind CSS (פרק 04): שפת העיצוב. צבעים, מרווחים, responsive, dark mode
2. שכבה 2 — shadcn/ui (פרק 05): קומפוננטות מוכנות. כפתורים, כרטיסים, דיאלוגים, טבלאות
3. שכבה 3 — קומפוננטות WOW (הפרק הזה): אנימציות ואפקטים. Spotlight, aurora, typewriter, parallax

כל שכבה בונה על הקודמת. Aceternity UI משתמשת ב-Tailwind לעיצוב ובshadcn/ui לקומפוננטות בסיסיות — ומוסיפה את ה-WOW מעל. זה כמו עוגה: Tailwind הוא הבצק, shadcn הוא הקרם, וקומפוננטות WOW הן הקישוטים שגורמים למבקרים להגיד "וואו".

Aceternity UI — 200+ קומפוננטות חינמיות עם אנימציות פרימיום

Aceternity UI היא הספרייה שהפכה "אנימציות מרשימות" לנגישות לכולם. 200+ קומפוננטות חינמיות שאפשר לקחת, להעתיק ולשלב בפרויקט React — בלי לדעת שום דבר על אנימציות.

מה עושה את Aceternity מיוחדת? כל קומפוננטה מגיעה עם אנימציה מוכנה שנראית כמו משהו שצוות עיצוב של סטארטאפ ב-Silicon Valley היה בונה. לא אנימציות "בסיסיות" — אנימציות שגורמות ללקוח להתרשם.

הקומפוננטות הכי פופולריות

איך זה עובד טכנית

Aceternity UI עובדת בדיוק כמו shadcn/ui — copy-paste. אתם נכנסים לדף הקומפוננטה, רואים את האנימציה חיה, לוחצים "Copy" ומדביקים את הקוד בפרויקט. מתחת למכסה, רוב הקומפוננטות מבוססות על:

• React + Next.js — הבסיס
• Tailwind CSS — כל העיצוב
• Motion (לשעבר Framer Motion) — כל האנימציות

זוכרים מפרק 05 שshadcn/ui הוא copy-paste? Aceternity עובדת באותה צורה. הקוד שלכם, בפרויקט שלכם, עם שליטה מלאה.

קטגוריות ב-Aceternity

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

• Hero Sections — קומפוננטות לפאנל הראשון שהמבקר רואה. כולל backgrounds, כותרות אנימטיביות ו-CTA buttons
• Cards — כרטיסים עם hover effects, spotlights, 3D tilts ו-glowing borders
• Text — אפקטי טקסט: typewriter, text generate, gradient text, text reveal
• Backgrounds — רקעים אנימטיביים: aurora, particles, grid, beams, meteors
• Navbars — סרגלי ניווט עם אפקטים: floating dock, animated tabs
• Scroll — קומפוננטות שמופעלות בזמן גלילה: parallax, stacking cards, timeline

Aceternity בשוק הישראלי

סטארטאפים ישראליים שמגייסים כסף צריכים landing page שמרשים משקיעים תוך 3 שניות. Aceternity UI מאפשרת ליצור את ה-"WOW factor" הזה בלי צוות frontend ייעודי. בקשו מ-AI: "Build me a SaaS landing page with Aceternity spotlight cards, aurora background, and text generate effect for the hero" — ותקבלו דף שנראה כמו של חברת unicorn.

דוגמאות מייצגות לשימושים בשוק הישראלי:

טיפ RTL: רוב הקומפוננטות של Aceternity עובדות RTL בלי שינוי, כי הן מבוססות על Tailwind ו-CSS transforms שלא תלויים בכיוון. יוצאי דופן: קומפוננטות עם טקסט "שזורם" (typewriter, text generate) — שם צריך לוודא שהכיוון עובד מימין לשמאל. אם מקבלים כיוון הפוך — בקשו מ-AI: "Fix the text animation direction to work RTL, the text should appear from right to left".

החינמי vs. ה-Pro

Aceternity מציעה 200+ קומפוננטות חינמיות — וזה הרבה. אבל יש גם Pro ($199, תשלום חד-פעמי) שכולל 100+ blocks מוכנים (hero sections, pricing pages, feature grids) ו-30+ templates מלאים. אתם לא צריכים Pro. הקומפוננטות החינמיות מספיקות לבנות אתר מרשים. ה-Pro נועד לצוותים שבונים הרבה אתרים ורוצים sections שלמים מוכנים.

Magic UI — מינימליזם עם השפעה

אם Aceternity UI היא "מרשים ונועז", Magic UI היא "מינימליסטי ואלגנטי". 150+ קומפוננטות חינמיות שמתמקדות באנימציות עדינות וקלאסיות — אידיאליות ל-SaaS landing pages שרוצים להיראות מקצועיים בלי להיות "יותר מדי".

ההבדל בין Aceternity ל-Magic UI:

קומפוננטות בולטות של Magic UI

• Animated Beam — קו אור שעובר בין אלמנטים, מושלם להמחשת connections ו-data flow
• Globe — גלובוס תלת-ממדי מסתובב עם נקודות, מושלם ל-"Global reach"
• Marquee — טקסט או לוגואים שנעים אופקית ללא הפסקה, מושלם לשותפים ולקוחות
• Number Ticker — מספרים שסופרים כלפי מעלה באנימציה, מושלם ל-KPI ו-stats
• Shimmer Button — כפתור עם אפקט ברק מתנצנץ, מושלם ל-CTA ראשי
• Dock — סרגל ניווט בסגנון macOS, דומה ל-Aceternity אבל בגרסה מינימלית

מתי לבחור Magic UI על פני Aceternity? כשהמותג שלכם מדבר על אמינות, מקצועיות וקלאסיות. חברת FinTech? Magic UI. סטארטאפ שמוכר חוויה? Aceternity. חברת SaaS B2B? Magic UI. Agency שבונה landing pages? Aceternity.

Magic UI Pro — מה מקבלים בתשלום?

החלק החינמי של Magic UI כולל עשרות קומפוננטות שמספיקות לרוב הפרויקטים. ה-Pro ($149, תשלום חד-פעמי) מוסיף קומפוננטות מתקדמות, templates מלאים ודוגמאות. אבל בניגוד לכלים אחרים — אתם לא צריכים Pro כדי ליצור אתר מרשים. ה-free tier מספיק.

הנה הפילוסופיה של Magic UI שכדאי להכיר: "less is more". במקום אפקט שצורח "תסתכלו עלי!", Magic UI מעדיפה אנימציה עדינה שגורמת למבקר להרגיש שמשהו מיוחד קורה — בלי שהוא יכול להצביע בדיוק על מה. זו האמנות של אנימציה טובה.

ב-Magic UI תמצאו פחות particles ו-3D — ויותר gradient text שזורם לאט, number tickers שסופרים בחלקות, ו-beams עדינים שמוסיפים חיים בלי לגנוב את תשומת הלב מהתוכן. לדוגמה, ה-Animated Beam component מראה קו אור שעובר בין אלמנטים — מושלם להמחשת data flow או integration architecture. זה אפקט שאתרים כמו Vercel ו-Clerk משתמשים בו.

React Bits — 110+ אנימציות ללא התחייבות לספרייה

React Bits שונה מ-Aceternity ו-Magic UI בנקודה חשובה: הוא לא תלוי בספריית אנימציה אחת. בעוד ש-Aceternity ו-Magic UI מבוססות על Motion (לשעבר Framer Motion), React Bits תומך ב-כמה ספריות — Motion, GSAP, React Spring ואפילו CSS טהור.

למה זה חשוב? כי לפעמים יש לכם פרויקט שכבר משתמש ב-GSAP. או שאתם רוצים אנימציה שלא דורשת JavaScript בכלל — רק CSS. React Bits נותן לכם גמישות.

קומפוננטות בולטות

כל הקומפוננטות של React Bits חינמיות ופתוחות (open-source). אין Pro tier, אין תשלום. 110+ קומפוננטות, הכל שלכם.

היתרון הגדול: props ניתנים להתאמה

כל קומפוננטה ב-React Bits מגיעה עם props שאפשר לשנות ישירות באתר — sliders, color pickers, dropdowns. זה אומר שאתם יכולים לנסות עשרות וריאציות של אותה אנימציה לפני שמעתיקים את הקוד לפרויקט. נסו מהירות שונה, צבע אחר, כיוון הפוך — וכשהגעתם למשהו שאתם אוהבים, העתיקו.

מתי לבחור React Bits?

• כשאתם רוצים להתנסות ולשחק עם props לפני שמחליטים
• כשהפרויקט כבר משתמש ב-GSAP ואתם לא רוצים להוסיף Motion
• כשאתם רוצים אנימציית CSS טהורה בלי JavaScript dependencies
• כשאתם רוצים 100% חינמי ללא שום הגבלה

השוואה: שלושת הספריות הגדולות

SVG Diagram: מפת ספריות WOW — מה מתאים למה

הנה סיכום ויזואלי של ספריות ה-WOW העיקריות — מתי כל אחת מתאימה:

Framer Motion (עכשיו Motion) — המנוע מאחורי הקלעים

כמעט כל ספריית WOW שראינו — Aceternity, Magic UI, Skiper UI — מבוססת על ספרייה אחת מאחורי הקלעים: Motion (לשעבר Framer Motion). זה מנוע האנימציה המוביל ל-React, וכדאי להכיר אותו כי הוא מופיע בכל מקום.

מה Motion עושה — בגובה העיניים

Motion הופכת אנימציות React מכאב ראש למשהו פשוט. במקום לכתוב CSS keyframes מסובכים או JavaScript animation loops, אתם כותבים props על קומפוננטות React:

// קומפוננטה שנכנסת עם fade ו-slide מלמטה
<motion.div
  initial={{ opacity: 0, y: 50 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.5 }}
>
  <h1>שלום עולם</h1>
</motion.div>

שלוש ה-props החשובות:

• initial — מאיפה מתחילים (opacity: 0 = שקוף, y: 50 = 50px למטה)
• animate — לאן מגיעים (opacity: 1 = גלוי, y: 0 = מקום רגיל)
• transition — כמה זמן לוקח וסוג התנועה

ויש עוד prop שימושי במיוחד ל-WOW:

// אנימציה שמופעלת רק כשנגללים אליה
<motion.div
  initial={{ opacity: 0 }}
  whileInView={{ opacity: 1 }}
  viewport={{ once: true }}
>
  <p>אני אופיע רק כשתגללו אלי</p>
</motion.div>

whileInView — זה הsecret sauce של רוב אנימציות ה-scroll. הקומפוננטה "חיכתה" שקופה, וכשהיא נכנסת ל-viewport (מה שהמשתמש רואה) — היא מופיעה עם אנימציה. viewport={{ once: true }} אומר "תעשה את זה פעם אחת בלבד" — כדי שהאנימציה לא תחזור כל פעם שגוללים מעלה ומטה.

מתחת למכסה, whileInView משתמש ב-Intersection Observer — API מובנה של הדפדפן שמזהה מתי אלמנט נכנס לחלק הנראה של המסך. זה הרבה יותר יעיל מ-scroll event listener ישן, כי הדפדפן עושה את הזיהוי בצורה אופטימלית בלי לגרום ל-layout recalculations מיותרים.

בגדול, Intersection Observer הוא הכלי שהופך את "תוכן שמופיע בזמן גלילה" ממשהו כבד ואיטי למשהו חלק ויעיל. כל ספריות ה-WOW שנלמד משתמשות בו — אתם לא צריכים לכתוב אותו בעצמכם, אבל כדאי לדעת שהוא קיים כי לפעמים AI ישתמש בגישה ישנה יותר (scroll event + getBoundingClientRect) שפחות יעילה.

אתם לא צריכים לכתוב Motion code — ה-AI יעשה את זה בשבילכם. אבל כשתראו motion.div בקוד ש-AI ייצר, תדעו מה הולך שם. וכשתרצו לשנות מהירות אנימציה — תדעו שצריך לשנות את transition.duration.

המילון הקצר של Motion — מה כל prop עושה

כשתראו את ה-props האלה בקוד ש-AI ייצר — תדעו בדיוק מה כל שורה עושה, ותוכלו לבקש שינויים ספציפיים: "Change the transition duration to 0.8 seconds and use easeInOut instead of easeOut".

Variants — שליטה בקבוצת אנימציות

כשיש כמה אלמנטים שצריכים להיכנס ברצף (אחד אחרי השני), Motion משתמשת ב-variants:

// ילדים שנכנסים אחד-אחד עם השהיה
const container = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: { staggerChildren: 0.2 }
  }
}

const item = {
  hidden: { opacity: 0, y: 20 },
  show: { opacity: 1, y: 0 }
}

<motion.ul variants={container} initial="hidden" animate="show">
  <motion.li variants={item}>פריט 1</motion.li>
  <motion.li variants={item}>פריט 2</motion.li>
  <motion.li variants={item}>פריט 3</motion.li>
</motion.ul>

staggerChildren: 0.2 אומר "תפעיל כל ילד עם השהיה של 0.2 שניות". התוצאה: פריטים שנכנסים ברצף חלק, אחד-אחד. זה האפקט שאתם רואים ב-feature lists, pricing cards ו-testimonials — כולם נכנסים ברצף עם delay קטן.

Variants בפרקטיקה: כשתראו קוד כזה בפרויקט ש-AI ייצר, תדעו שמדובר באנימציית רצף. אם רוצים שהפריטים ייכנסו מהר יותר — שנו את staggerChildren ל-0.1. אם רוצים delay גדול יותר — שנו ל-0.3 או 0.4. זה שינוי של מספר אחד שמשנה את כל התחושה של האנימציה.

Motion ו-Next.js — "use client"

נקודה טכנית חשובה: ב-Next.js App Router, קומפוננטות שמשתמשות ב-Motion חייבות להיות client components. זה אומר שצריך להוסיף "use client" בתחילת הקובץ:

"use client"  // חובה כשמשתמשים ב-Motion!

import { motion } from 'motion/react'

export function AnimatedHero() {
  return (
    <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
      <h1>WOW!</h1>
    </motion.div>
  )
}

אם שכחתם את "use client" תקבלו שגיאה. AI בדרך כלל מוסיף את זה אוטומטית, אבל אם מקבלים error על "hooks can only be used in client components" — זה כנראה מה שחסר.

סוגי אפקטים — מ-scroll ועד 3D

לא כל אפקט WOW הוא אותו דבר. יש קטגוריות שונות, וכל אחת מתאימה למצב אחר. בואו נכיר את 6 הקטגוריות העיקריות:

1. Scroll Animations — אנימציות גלילה

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

• Fade-in on scroll — אלמנט שמופיע בהדרגה כשגוללים אליו
• Slide-in — אלמנט שנכנס מצד (שמאל, ימין, למעלה, למטה)
• Parallax — שכבות שנעות במהירויות שונות בזמן גלילה
• Scroll-linked progress — פס התקדמות שממלא לפי מיקום הגלילה

מבוסס על: Intersection Observer API — הדפדפן מזהה מתי אלמנט נכנס ל-viewport. ב-Motion, זה whileInView.

2. Text Effects — אפקטי טקסט

• Typewriter — טקסט "נכתב" אות-אות כאילו מישהו מקליד בזמן אמת
• Blur Reveal — טקסט שמתחיל מטושטש ומתחדד (BlurText מ-React Bits)
• Gradient Text — gradient צבעוני שזורם על הטקסט
• Word Rotation — מילה שמתחלפת באנימציה: "אנחנו עושים [עיצוב / פיתוח / שיווק]"
• Split Text — טקסט שמתפרק ומתרכב מחדש

שימו לב בעברית: Typewriter effects צריכים לעבוד מימין לשמאל. לא כל הספריות תומכות ב-RTL כברירת מחדל. הנה מה לעשות:

• Typewriter — בקשו מ-AI: "Make sure the typewriter effect works RTL for Hebrew text, cursor should start from the right"
• GradientText — עובד RTL בלי שינוי (CSS gradient לא תלוי בכיוון)
• SplitText — בקשו: "SplitText animation should assemble from right to left for Hebrew"
• Word Rotation — עובד RTL בלי שינוי ברוב הספריות

3. Background Effects — אפקטי רקע

• Particles — נקודות/כוכבים שנעים ברקע
• Aurora — זוהר צפוני — צבעים שזורמים לאט ברקע
• Grid Pattern — רשת עם אפקט glow שנע
• Spotlight — אור שעוקב אחרי העכבר על הרקע
• Beams — קרנות אור שחוצות את הרקע

4. Hover Effects — אפקטי מעבר עכבר

• 3D Tilt — אלמנט שנוטה לכיוון העכבר בתלת-ממד
• Magnetic — אלמנט ש"נמשך" לכיוון העכבר כשהוא קרוב
• Glow — הילה זוהרת שמופיעה סביב אלמנט ב-hover
• Morphing — צורה שמשתנה (עיגול הופך למלבן) ב-hover

5. Hero Sections — הפאנל הראשון

Hero section הוא מה שהמבקר רואה ראשון. זה המקום שבו WOW הכי חשוב. שילוב טיפוסי:

• Background effect (aurora, particles, grid)
• + Text effect (typewriter, gradient, blur reveal)
• + CTA button עם glow או shimmer

6. Layout Effects — אפקטי פריסה

• Bento Grid — grid א-סימטרי בסגנון קופסת בנטו יפנית, עם כרטיסים בגדלים שונים. פופולרי מאוד ב-2026 — Apple משתמשת בזה בדפי המוצר שלהם
• Infinite Scroll / Marquee — אלמנטים שנעים אופקית ללא הפסקה (לוגואים, testimonials). קלאסי ויעיל
• Stacking Cards — כרטיסים שנערמים אחד על השני בזמן גלילה — אפקט דרמטי לדפי תכונות

איך הקטגוריות משתלבות — דוגמה לעמוד שלם

הנה דוגמה לאתר landing page של סטארטאפ ישראלי בתחום ה-CyberSecurity שמשלב 3 קטגוריות:

1. Hero (background + text): Aurora Background מ-Aceternity + Text Generate Effect שכותב "הגנו על העסק שלכם מאיומי סייבר" מילה-מילה
2. Features (scroll + layout): Bento Grid עם 6 כרטיסי תכונות שנכנסים אחד-אחד בזמן גלילה (staggerChildren)
3. Social Proof (layout): Infinite Moving Cards עם לוגואים של לקוחות — 12 לוגואים שנעים אופקית ללא הפסקה

שימו לב: רק 3 קטגוריות, לא 6. כל section עושה שימוש ב-WOW אבל העמוד לא מרגיש עמוס.

Bento Grid — הטרנד של 2026

אם יש טרנד עיצובי שכל Vibe Coder צריך להכיר ב-2026, זה Bento Grid. הרעיון: במקום grid רגיל עם כרטיסים בגודל אחיד (3 טורים x 3 שורות), Bento Grid מציג כרטיסים בגדלים שונים — כרטיס גדול אחד, שניים קטנים לצדו, מלבן רחב מתחת. בדיוק כמו קופסת בנטו יפנית שמחולקת לתאים בגדלים שונים.

Apple, Vercel, Linear ו-Stripe — כולם משתמשים ב-Bento Grid בדפי המוצר שלהם. זה עובד כי הפריסה הא-סימטרית יוצרת hierarchy ויזואלי — הכרטיס הגדול חשוב יותר, הקטנים משלימים. וכשמוסיפים hover effects (spotlight, tilt) על כל כרטיס — הBento Grid הופך ממרשים למדהים.

בקשו מ-AI: "Create a Bento Grid features section with 6 cards in asymmetric layout. Large card for main feature, medium for secondary, small for supporting. Add Aceternity Spotlight Effect on hover. Dark theme."

SVG Diagram: קטגוריות אפקטים — מתי כל אחד מתאים

עוד ספריות שכדאי להכיר — Uiverse, Animata, DaisyUI ועוד

מעבר ל-"שלישייה הגדולה" (Aceternity, Magic UI, React Bits), יש עולם שלם של ספריות שכל אחת מביאה משהו ייחודי. הנה המפה המלאה — כולן חינמיות או עם free tier נדיב:

Uiverse.io — 4,341+ אלמנטי CSS חינמיים

Uiverse.io שונה מכל הספריות שראינו — הוא לא דורש React. כל האלמנטים כתובים ב-CSS וTailwind טהור, כך שאפשר לשלב אותם בכל פרויקט. הקהילה יצרה 4,341+ אלמנטים: כפתורים, כרטיסים, checkboxes, loaders, forms, tooltips ועוד.

מתי להשתמש: כשרוצים כפתור או loader מיוחד בלי להוסיף ספריית React חדשה. מושלם לפרויקטים קטנים, אתרי Astro (שלמדנו בפרק 03 — framework שלא מחייב React), או כשצריכים השראה.

היופי של Uiverse: הוא community-driven. כל מפתח יכול להעלות אלמנט, ויש דירוג קהילתי. חפשו "loader" ותמצאו עשרות loading spinners מרהיבים. חפשו "toggle" ותמצאו dark mode switches מדהימים. וכל אחד — העתקה של 3 שורות CSS.

Motion Primitives — building blocks תואמי shadcn

Motion Primitives הם כמו Radix Primitives (שלמדנו בפרק 05) — אבל לאנימציות. קומפוננטות בסיסיות (animated buttons, cards, modals, page transitions) שתואמות ל-shadcn/ui ומשתלבות בפרויקט קיים. הספרייה הליבה חינמית תחת MIT, עם Pro בתשלום לקומפוננטות מתקדמות.

Skiper UI — קומפוננטות מנופשות ל-shadcn

Skiper UI מספקת קומפוננטות עם אנימציות שמשתלבות ישירות עם shadcn CLI. 24+ קומפוננטות חינמיות כולל card swipers, marquees ו-theme toggles. אם אתם כבר בתוך אקוסיסטם shadcn — Skiper UI משתלבת חלק.

hover.dev — אפקטי hover מרשימים

hover.dev מתמחה בדבר אחד: hover effects. כפתורים, כרטיסים ו-sections עם אנימציות hover מרשימות. בנוי עם React, Tailwind ו-Motion. Copy-paste בשני קליקים — לחצו CODE ותעתיקו.

Animata — 80+ אנימציות hand-crafted

Animata מציעה אוסף של 80+ קומפוננטות React עם אנימציות מעוצבות ביד — text animations (Gradient Text, Glitch Text, Typing Text), widgets (שעון, לוח שנה, נגן מוזיקה) ו-sections שלמים (hero, pricing). הכל חינמי ופתוח. מה שמייחד את Animata הוא ה-widgets — קומפוננטות שלא תמצאו בספריות אחרות. שעון אנימטיבי? יש. כרטיס מזג אוויר אנימטיבי? יש. Battery indicator מונפש? יש. אלה לא אפקטים "רגילים" — הם אלמנטים שלמים שמוסיפים אופי לאתר.

Cult UI — עיצוב נועז עם shadcn

Cult UI מביאה קומפוננטות עם אנימציות מתוחכמות שתואמות ל-shadcn/ui. מיועדת ל-design engineers שרוצים אלמנטים נועזים עם Motion ו-Tailwind.

Lukacho UI — נקי ופשוט

Lukacho UI אוסף קטן (20+ קומפוננטות) אבל איכותי — animated dropdowns, marquees, pricing sections. תומך ב-light/dark mode. חינמי.

CodeMyUI — השראה + קוד

CodeMyUI הוא לא בדיוק ספרייה — הוא אוסף השראה. מאות snippets של אנימציות CSS ו-JavaScript עם GIF previews וקוד להעתקה. מצוין כשמחפשים רעיון ספציפי: "מה האנימציה הכי יפה לטקסט?" — גלשו ל-CodeMyUI ותמצאו עשרות דוגמאות חיות עם GIF שמראה את האפקט ולינק לקוד.

הטיפ הכי שימושי עם CodeMyUI: אם ראיתם אפקט שאהבתם אבל הקוד ב-vanilla CSS/JS — אל תנסו להמיר ידנית. תנו את ה-GIF (או תיאור מדויק) ל-AI ובקשו: "Recreate this effect using React + Motion + Tailwind CSS". AI ידע לייצר את אותו אפקט בstack המודרני שלכם.

DaisyUI — 63 קומפוננטות Tailwind עם semantic classes

DaisyUI לא ספריית WOW בפני עצמה — היא plugin ל-Tailwind שמוסיף semantic class names. במקום bg-blue-500 text-white px-4 py-2 rounded-lg אתם כותבים פשוט btn btn-primary. 63 קומפוננטות, 35 themes מובנים, אפס JavaScript. 350,000 הורדות שבועיות ב-npm.

Preline UI — 640+ קומפוננטות Tailwind מלאות

Preline UI היא ספרייה ענקית: 640+ קומפוננטות Tailwind, 220+ דוגמאות sections, 5 templates מלאים — הכל חינמי תחת MIT. תומכת ב-React, Vue ועוד. לא מתמקדת באנימציות WOW אלא ב-UI מלא ושלם. מתאימה כשצריכים ספריית UI מקיפה מעבר ל-shadcn.

סיכום מהיר — כל הספריות במבט אחד

ביצועים — מתי אפקטים הורסים את האתר

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

הכלל הזהב: transform ו-opacity בלבד

הדפדפן יכול להעביר אנימציות ל-GPU (כרטיס המסך) — אבל רק אם אתם משתמשים ב-properties מסוימים:

כשאתם משנים width באנימציה, הדפדפן צריך לחשב מחדש את ה-layout של כל הדף. כשאתם משנים transform — רק האלמנט הספציפי מושפע, והחישוב נעשה ב-GPU. זה ההבדל בין 60fps חלק ל-jank (קפיצות).

החדשות הטובות: Motion (ורוב ספריות ה-WOW) כבר משתמשים ב-transform ו-opacity כברירת מחדל. כש-AI כותב קוד עם motion.div — הוא כמעט תמיד יעשה את זה נכון.

אבל מה קורה כשאתם מוסיפים CSS custom? או כש-AI מחליט לעשות אנימציה על height: auto? פתאום הביצועים נופלים. הכלל פשוט: אם זה לא transform או opacity — תשאלו את עצמכם אם באמת צריך.

כמה אפקטים זה יותר מדי?

אין תשובה אחת — זה תלוי בסוג האפקט ובמכשיר. הנה guidelines:

שימו לב ל-3D Tilt: הוא עובד רק עם עכבר (hover), ובמובייל אין hover. אפקטי hover לא עובדים על מגע. זה לא באג — זה אומר שצריך fallback אחר למובייל, או שהאפקט פשוט לא מופיע.

LazyMotion — חיסכון של 30kb

הקומפוננטה הרגילה של Motion (motion.div) שוקלת 34kb. לא נשמע הרבה? על מובייל עם 3G, זה עוד שנייה של טעינה. הפתרון: LazyMotion.

// במקום motion.div רגיל (34kb)
import { LazyMotion, domAnimation, m } from 'motion/react'

// LazyMotion טוען רק מה שצריך (4.6kb)
function App() {
  return (
    <LazyMotion features={domAnimation}>
      <m.div animate={{ opacity: 1 }}>
        תוכן מונפש
      </m.div>
    </LazyMotion>
  )
}

הקומפוננטה m (במקום motion) עובדת בדיוק אותו דבר — אבל טוענת רק את מה שצריך. חיסכון: מ-34kb ל-4.6kb — 86% פחות.

whileInView — אנימציה רק כשצריך

אל תפעילו אנימציות על אלמנטים שאף אחד לא רואה. whileInView מבטיח שהאנימציה רצה רק כשהאלמנט נראה למשתמש — חיסכון ב-CPU ובסוללה.

will-change — רמז ל-GPU

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

/* הוסיפו will-change לאלמנטים שמתנפשים */
.animated-card {
  will-change: transform, opacity;
}

/* חשוב: הסירו אחרי שהאנימציה נגמרה */
.animated-card.done {
  will-change: auto;
}

שימו לב: will-change צורך זיכרון GPU. אל תשימו אותו על כל אלמנט — רק על אלמנטים שבאמת מתנפשים. ורוב ספריות ה-WOW כבר מטפלות בזה אוטומטית. אם אתם לא בטוחים — אל תוסיפו will-change ידנית. תנו ל-Motion ולספריות לטפל בזה.

Reduce Motion — נגישות שחשוב לזכור

יש אנשים שאנימציות גורמות להם לסחרחורת או אי-נוחות. לכן מערכות ההפעלה (macOS, Windows, iOS, Android) מאפשרות למשתמש לסמן "Reduce motion" — העדפת הפחתת תנועה. אתר מקצועי חייב לכבד את ההגדרה הזו.

ב-CSS, אפשר לזהות את ההעדפה:

/* אם המשתמש ביקש להפחית תנועה — בטלו אנימציות */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

Motion (Framer Motion) תומכת בזה אוטומטית אם מוסיפים את ה-prop reducedMotion="user". אבל לא כל הספריות עושות את זה כברירת מחדל. בקשו מ-AI: "Add prefers-reduced-motion support — disable animations when the user has Reduce Motion enabled".

בדיקת ביצועים בפועל — 3 צעדים

1. DevTools Performance: F12 → Performance → Record → גללו 5 שניות → Stop. חפשו פריימים אדומים (frame drops) ו-long tasks (חסימות ממושכות)
2. Lighthouse: F12 → Lighthouse → הריצו Performance audit. ציון מתחת ל-80? יש בעיה. בדקו "Avoid large layout shifts" ו-"Reduce JavaScript execution time"
3. מובייל אמיתי: פתחו את האתר בטלפון. גללו. חלק? מצוין. קופצני? פשטו או הסירו אפקטים

מתי להגיד "לא" ל-WOW

SVG Diagram: זרימת אינטגרציה — מספרייה לפרויקט

שילוב עם AI — צעד אחרי צעד

עכשיו שאתם מכירים את הספריות והקטגוריות, בואו נראה איך בפועל מבקשים מ-AI לשלב קומפוננטת WOW בפרויקט.

צעד 1: בחרו קומפוננטה מהספרייה

גלשו לספרייה (Aceternity, Magic UI, React Bits), מצאו קומפוננטה שאתם רוצים, וציינו את השם המדויק שלה. למשל: "Spotlight Effect" מ-Aceternity UI.

צעד 2: כתבו prompt ספציפי

ה-prompt הגנרי "Add a cool animation" לא יתן תוצאות טובות. הנה template שעובד:

// Prompt Template ל-WOW Components

I want to add [COMPONENT_NAME] from [LIBRARY_NAME] to my Next.js project.

My project uses:
- Next.js 15 (App Router)
- Tailwind CSS
- shadcn/ui components
- TypeScript

Here's the component source code from [LIBRARY_NAME]:
[PASTE THE COMPONENT CODE HERE]

Please:
1. Integrate this component into my project
2. Install any missing dependencies (motion, etc.)
3. Adapt colors to match my theme (primary: [YOUR_COLOR])
4. Make sure it works with RTL (dir="rtl")
5. Add responsive behavior for mobile
6. Use LazyMotion if possible for bundle optimization

צעד 3: הדביקו את קוד המקור

חשוב: תמיד הדביקו את קוד הקומפוננטה בתוך ה-prompt. ה-AI לא תמיד מכיר את הגרסה העדכנית של הקומפוננטה, ואם תתנו לו את הקוד — הוא ידע בדיוק מה לשלב.

צעד 4: בקשו התאמות ספציפיות

אחרי שה-AI שילב את הקומפוננטה, בקשו התאמות:

• "Change the animation speed to 0.3 seconds"
• "Make the background color match my dark theme (#1e1e2e)"
• "Add a delay so the animation starts 0.5s after page load"
• "Remove the effect on mobile screens (below 768px)"

צעד 5: בדקו ותקנו

אחרי שהקוד מוכן, עברו על צ'קליסט הבדיקה:

1. Desktop: האנימציה חלקה? צבעים נכונים? הטקסט קריא מעל הרקע האנימטיבי?
2. Mobile: פתחו DevTools responsive mode (F12 → אייקון טלפון). גללו. חלק? אם לא — בקשו מ-AI: "Simplify animations for mobile: reduce particles, remove parallax, keep only fade-in"
3. RTL: בעברית, בדקו שהכיוון לא הפוך. typewriter צריך לכתוב מימין לשמאל. slides צריכים להיכנס מימין. marquee צריך לזרום בכיוון הנכון
4. Performance: Performance tab — הקליטו 3 שניות. פריימים אדומים = בעיה. בקשו מ-AI לייעל
5. Accessibility: בדקו שאנימציות לא חוסמות תוכן. משתמש שמסמן "Reduce motion" במערכת ההפעלה צריך לראות גרסה סטטית

טיפ: כשמשהו לא עובד, הprompt הכי יעיל הוא: "The [COMPONENT] animation is [PROBLEM]. Here's the current code: [PASTE CODE]. Fix it to [DESIRED BEHAVIOR]". תמיד תנו ל-AI את הקוד הנוכחי — הוא לא יכול לתקן מה שהוא לא רואה.

דוגמה מלאה — בישראל

נניח שאתם בונים landing page לסטארטאפ ישראלי בתחום ה-FinTech. הנה prompt מלא:

Build a SaaS landing page for a FinTech startup.
Use Next.js 15 + Tailwind CSS + shadcn/ui.

For the hero section:
- Use Aceternity UI "Lamp Effect" for the main heading
- Text: "הפלטפורמה הפיננסית של העתיד" (RTL Hebrew)
- Subtitle with Magic UI "Shimmer Button" CTA

For the features section:
- Bento Grid layout with 4 features
- Each card with Aceternity "Spotlight Effect" on hover
- Icons from Lucide (from Chapter 07)

For the testimonials:
- Aceternity "Infinite Moving Cards" with 6 testimonials

Theme: dark background (#0a0a0a), purple accent (#a855f7)
RTL support required. Mobile responsive.
Optimize with LazyMotion.

Prompt כזה נותן ל-AI מפת דרכים ברורה — הוא ידע בדיוק אילו קומפוננטות להשתמש, מאילו ספריות, ומה הדרישות.

טעויות נפוצות ב-prompts ל-WOW

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

מה לעשות כש-AI "לא מכיר" את הספרייה

לפעמים AI לא מכיר ספרייה חדשה (כמו React Bits או Skiper UI). הפתרון פשוט:

1. גלשו לספרייה ומצאו את הקומפוננטה
2. העתיקו את הקוד המלא של הקומפוננטה
3. הדביקו אותו ב-prompt עם ההוראה: "Here's the component source code. Integrate it into my project at [LOCATION]"
4. AI יבין את הקוד ויתאים אותו לפרויקט שלכם

זה עובד 100% מהזמן — כי אתם נותנים ל-AI את הקוד עצמו, לא מבקשים ממנו לדעת מה יש באתר חיצוני.

Workflow מלא — מרעיון לאפקט עובד

הנה הזרימה המלאה שעובדת בפרקטיקה:

1. חקרו — גלשו ל-Aceternity / Magic UI / React Bits ומצאו השראה
2. בחרו — הכריעו: איזו קומפוננטה, מאיזו ספרייה, איפה בעמוד
3. העתיקו — לחצו Copy באתר הספרייה ושמרו את הקוד
4. כתבו prompt — ספציפי: שם הספרייה, שם הקומפוננטה, שם הפרויקט, צבעים, RTL, mobile
5. הדביקו קוד — תמיד הוסיפו את קוד הקומפוננטה ב-prompt
6. בדקו — desktop, mobile, RTL, performance, accessibility
7. שפרו — בקשו התאמות ספציפיות: מהירות, צבע, delay, mobile behavior

כל הזרימה לוקחת 10-15 דקות. בלי ספריות WOW, לבנות את אותו אפקט מאפס היה לוקח שעות של עבודה על אנימציות. זה הכוח של ידע + AI + ספריות חינמיות.

ובשוק הישראלי, הזרימה הזו נותנת יתרון תחרותי משמעותי. סטארטאפ ישראלי שמשתמש בקומפוננטות WOW ל-landing page שלו מציג רושם ראשוני ברמת חברות גדולות — בלי תקציב הפיתוח של חברות גדולות. כשמשקיע גולש לאתר של הסטארטאפ שלכם ורואה aurora background עם spotlight cards — הוא לא חושב "זה סטארטאפ בן 3 חודשים". הוא חושב "הם יודעים מה הם עושים".

תרגילים

Build a hero section for a Hebrew RTL website.
Use Aceternity UI "Lamp Effect" component.
Title: "הפלטפורמה שמשנה הכל" (RTL)
Subtitle: "גלו איך אנחנו עוזרים לעסקים לצמוח"
CTA button: "התחילו עכשיו" with shimmer effect
Dark background (#0a0a0a), purple accent (#a855f7)
Make sure animations work on mobile.
Use LazyMotion for bundle optimization.

שגרת עבודה — WOW ביום-יום

בדוק את עצמך