React Bits: ספריית הרכיבים הוויזואליים הטובה ביותר ל-React ב-2026

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

בין «בסדר» ל«וואו» מפרידים בדרך כלל שבועות של שיידרים, GSAP ו-Three.js. React Bits מוחקת את השבועות האלה. זהו קטלוג פתוח של רכיבים ויזואליים ל-React שבו האפקט כבר כתוב, כבר מנופה מבאגים וכבר מכוון, ונשאר רק לבחור אותו ולהריץ פקודה אחת.

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

רקעים שמצילים את המסך הראשון

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

לצידם יושבים Galaxy עם שדה כוכבים, Threads עם חוטים מתנועעים, Dither עם גרעיניות רטרו, וגם Plasma, Lightning, Hyperspeed ו-Balatro. השמות מסבירים את עצמם, וזה חצי מהערך של הקטלוג: אתם מגיעים לא בשביל «אנימציה» מופשטת אלא בשביל האפקט המדויק שראיתם אצל מישהו ובזבזתם חצי יום על ניסיון לשחזר.

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

רכיבים ששווים ביקור בפני עצמם

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

באותו מדף יש Dock בסגנון macOS, ‏Spotlight Card עם הבזק שעוקב אחרי העכבר, ‏Card Swap עם חפיסת כרטיסים, ‏Flying Posters, ‏Circular Gallery, ‏Staggered Menu, ‏Profile Card ו-Stepper לטפסים רב-שלביים. ארבעים וחמישה במספר, והם חלקים עובדים של ממשק ולא קישוט.

טקסט שמפסיק להיות רק טקסט

שלושים ושניים אפקטים לטיפוגרפיה בלבד. ‏Split Text מפזר כותרת אות אחר אות בהופעה, ‏Decrypted Text מפענח שורה מתוך תווים אקראיים, ‏Count Up מגלגל מספרים, ‏Shiny Text מעביר הבזק מתכתי, ו-Scroll Reveal חושף פסקה תוך כדי גלילה.

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

פקודה אחת, ומכאן הקוד שלכם

React Bits עובדת כמו shadcn: שום דבר לא נכנס ל-package.json. האתר מגיש רג'יסטרי, וה-CLI מעתיק את קוד המקור של הרכיב לתיקייה שלכם.

npx shadcn@latest add https://reactbits.dev/r/Aurora-TS-TW
# אותו דבר דרך jsrepo
npx jsrepo@latest add https://reactbits.dev/r/Aurora-TS-TW

הסיומת TS-TW בוחרת את הווריאנט. כל רכיב קיים בארבעה: JS עם CSS רגיל, JS עם Tailwind, TypeScript עם CSS, ‏TypeScript עם Tailwind. מגיעה אליכם גרסה שבנויה לסטאק שלכם, בלי לגרור איתה מערכת עיצוב זרה.

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

יש גם מצב למי שעובד עם סוכן AI. מוסיפים את הרג'יסטרי ל-components.json, מריצים npx shadcn@latest mcp init --client claude, ו-Claude Code מחפש בקטלוג ומתקין רכיבים בעצמו. מבקשים «שים רקע עם קרני אור במסך הראשון» ומקבלים רכיב מותקן במקום קישור לתיעוד.

מה מזה רץ אצלנו

באתר האקדמיה רצים כרגע שמונה רכיבים משם. ‏ColorBends זורם מאחורי המסך הראשון, ומעליו CurvedLoop כשורה מעוקלת, הכפתורים הם SpecularButton, וגלריית העבודות היא AccordionGallery. ‏Aurora משמש רקע בעמוד ההתחלה ובמדריכים, שם גם Particles, ‏Stepper מוביל בין השלבים, ו-Galaxy מסתובב בחלונית שרומזת על גלילה.

אף אחד מהם לא נשאר כפי שהגיע, וזו עבודה נורמלית עם קוד של מישהו אחר. ל-ColorBends בעמוד הנחיתה יש hidden md:block, כי לטלפון אין שום צורך בשיידר הזה בשום מחיר. תיקון נוסף מהסוג שלא מוצאים בגוגל: ‏ColorBends מחבר את צבעי הפסים במקום למזג אותם, ולכן שלושה צבעים רוויים יוצרים כתם לבן בנקודות ההצטלבות. לקחנו שלושה גוונים עמוקים וקרובים זה לזה (#6d28d9, #1d4ed8, #c2410c), והסכום נשאר בטווח הכחול-סגול של הלוגו. חצי שעה של כוונון, ובתמורה הרכיב נראה שלנו ולא כזה שנלקח מהמדף.

הדבר האחד שאסור לשכוח: WebGL

הרקעים היפים מצוירים בשיידרים. שורת הייבוא הראשונה בתוך Aurora היא ogl, עטיפה קלה מעל WebGL, וחלק מהרכיבים מושכים three. רכיב כזה מבקש מהדפדפן הקשר גרפי ברגע ההרכבה, ועושה זאת בשקט.

המלכודת היא ש«הדפדפן תומך ב-WebGL» ו«הדפדפן ייתן הקשר» הם שני דברים שונים. ההקשר לא נוצר כשהאצת החומרה כבויה, כשאין דרייבר עובד, כשאדם יושב דרך שולחן עבודה מרוחק, כשבלשונית כבר נפתחו יותר מדי הקשרים. בדיקה מסוג 'WebGLRenderingContext' in window תעבור בשלום, בעוד getContext יחזיר null או יזרוק חריגה. את השגיאה לא תראו אתם, יראה אותה חלק מהמבקרים, ואצלם זה נראה כמו חור שחור במקום הרקע.

התרופה היא בדיקה שבאמת מנסה ליצור הקשר ומשחררת אותו מיד. אצלנו היא חיה ב-src/lib/hooks/useGraphicsCapabilities.ts:

export function detectWebGLSupport(): boolean {
  if (typeof window === "undefined") return false;
  if (probeResult !== null) return probeResult;

  let gl: RenderingContext | null = null;
  try {
    const canvas = document.createElement("canvas");
    gl =
      canvas.getContext("webgl2") ??
      canvas.getContext("webgl") ??
      canvas.getContext("experimental-webgl");
  } catch {
    gl = null;
  }

  (gl as WebGLRenderingContext | null)
    ?.getExtension?.("WEBGL_lose_context")
    ?.loseContext();

  probeResult = gl !== null;
  return probeResult;
}

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

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

כמה זה עולה

כלום. בעמוד הבית של האתר כתוב FREE FOREVER, והחלק החינמי אינו מקוצץ לכדי דמו. הרישיון נקרא MIT + Commons Clause: מותר להשתמש בפרויקטים שלכם ושל לקוחות, כולל מסחריים, ואסור למכור את הספרייה עצמה כמוצר. בעבודה רגילה ההגבלה לא מורגשת.

‏React Bits Pro קיימת בנפרד: בלוקים לעמודים, מסכי אפליקציה ותבניות, בתשלום חד-פעמי. לא רכשנו אותה, ולכן אין לי חוות דעת עליה. אם אתם לא על React, יש פורטים רשמיים ל-Vue ול-Svelte.

למי אני ממליץ ולמי לא

ממליץ אם אתם על React או Next.js והמשימה נשמעת כמו «האתר בסדר אבל אף אחד לא מסתכל». זה המסלול הקצר ביותר מ«בסדר» ל«זוכרים» מבין אלה שאני מכיר. התחילו מאנימציית טקסט על הכותרת, הוסיפו אחר כך רקע אחד, ותמיד עטפו אותו בבדיקת WebGL עם תמונת גיבוי.

לא ממליץ בשני מקרים. אם הפרויקט חי בתקציב ביצועים מחמיר שבו סופרים כל קילובייט של JavaScript, לרקעי שיידר אין שם מקום. ואם מה שאתם צריכים זה מערכת עיצוב עם טפסים, טבלאות ונגישות מובנית, זו העבודה של shadcn/ui או Radix. ‏React Bits עונה על שאלה אחרת, ובדיוק שם הכוח שלה.