Beschreibung
React Bits ist eine quelloffene Sammlung von über 140 animierten und interaktiven React-Komponenten des Entwicklers David Haz, aufgeteilt in vier Kategorien: Text-Animationen, allgemeine Animationen, interaktive UI-Bausteine und animierte Hintergründe. Jede Komponente liegt in vier technischen Varianten vor, JavaScript oder TypeScript kombiniert mit reinem CSS oder Tailwind, sodass sie sich an den jeweils bestehenden Stack anpasst. Statt als npm-Abhängigkeit eingebunden zu werden, wird der Code direkt in das eigene Projekt kopiert, entweder manuell von der Website oder über eine CLI auf Basis von jsrepo oder der shadcn-Registry, was volle Einsicht und Kontrolle über den Quellcode gibt.
Die Animationen laufen je nach Komponente über unterschiedliche Bibliotheken im Hintergrund, etwa GSAP für Text- und Scroll-Effekte oder Three.js für aufwendige WebGL-Hintergründe wie Aurora, Hyperspeed oder Liquid Chrome, deren jeweilige Zusatzpakete bei jeder Komponente einzeln installiert werden müssen. Wer WebGL im Projekt grundsätzlich vermeiden will oder eine Marke mit sehr reduziertem, ruhigem Auftritt verfolgt, für den passt ein Großteil der eher expressiven Effekte nicht ohne Weiteres.
Gegenüber strukturellen Komponentenbibliotheken wie shadcn/ui, die Grundbausteine für Buttons, Formulare und Layout liefern, deckt React Bits gezielt die expressive Seite ab: Bewegung, Text-Effekte und atmosphärische Hintergründe für Landingpages und Marketing-Auftritte. In diesem Feld steht es neben anderen kostenlosen Motion-Komponentenbibliotheken und eignet sich als Ergänzung zu einer bestehenden UI-Basis, nicht als deren Ersatz.
