react-bits

name react-bits description Catalog + task router for React Bits — 130 open-source animated, interactive, fully customizable React components (DavidHDev/react-bits, 38k★). Use when user wants animated React UI: animated text (blur, shiny, decrypt, split, scroll-reveal), interactive animations (cursor effects, click spark, magnet, splash), shader/canvas backgrounds (aurora, galaxy, particles, liquid chrome, prism), or polished components (dock, card swap, magic bento, tilted card, glass surface). Maps design briefs to the right component + shadcn/jsrepo install command + required deps. React Bits — Animated Component Catalog What it is React Bits (github.com/DavidHDev/react-bits, 38k★, MIT + Commons Clause, reactbits.dev) — 130 animated, interactive, fully customizable React components for building memorable websites. Four source variants per component: JS-CSS, JS-TW, TS-CSS, TS-TW . Not a runtime npm dependency — components are copied into the user's project via shadcn-style CLI (like shadcn/ui, magicui, aceternity-ui). Each component owns its imports. Install pattern # Primary: shadcn CLI (preferred) npx shadcn@latest add @react-bits/<ComponentName>-<VARIANT> # Variants: # -JS-CSS → plain CSS, JavaScript # -JS-TW → Tailwind CSS, JavaScript # -TS-CSS → plain CSS, TypeScript # -TS-TW → Tailwind CSS, TypeScript (recommended for modern projects) # Examples: npx shadcn@latest add @react-bits/BlurText-TS-TW npx shadcn@latest add @react-bits/Galaxy-TS-TW npx shadcn@latest add @react-bits/Dock-TS-TW # Alternate: jsrepo # Alternate: copy source manually from reactbits.dev/<category>/<Component> Pick TS-TW unless the user's project is JS-only or CSS-first. After install, check component's import block for required peer deps. Dependency map (install only what each component needs) Dep family Required for npm install motion (Framer Motion v12) Most text + ui animations npm i motion gsap + @gsap/react Scroll-based text effects (ScrollFloat, ScrollVelocity, SplitText variants) npm i gsap @gsap/react three + @react-three/fiber + @react-three/drei + @react-three/postprocessing 3D scenes (Ballpit, ModelViewer, FluidGlass, Galaxy, Prism, PrismaticBurst) npm i three @react-three/fiber @react-three/drei @react-three/postprocessing @react-three/rapier Physics 3D (Ballpit, Antigravity) npm i @react-three/rapier ogl Lightweight WebGL backgrounds (Balatro, Beams, Dither, DotField, many others) npm i ogl matter-js 2D physics (FallingText) npm i matter-js meshline Line-based 3D (Threads, Ribbons) npm i meshline lenis Smooth scroll integrations npm i lenis postprocessing Shader bloom/glow (some backgrounds) npm i postprocessing @use-gesture/react Gesture-driven interactions (TiltedCard, Carousel) npm i @use-gesture/react react-confetti Confetti overlays npm i react-confetti Default stack for 80% of cases: motion + gsap + Tailwind. Add three/ogl/rapier per-component when a 3D/shader background is used. Full catalog (130 components) Text Animations (23) — reactbits.dev/text-animations/<Name> ASCIIText , BlurText , CircularText , CountUp , CurvedLoop , DecryptedText , FallingText , FuzzyText , GlitchText , GradientText , RotatingText , ScrambledText , ScrollFloat , ScrollReveal , ScrollVelocity , ShinyText , Shuffle , SplitText , TextCursor , TextPressure , TextType , TrueFocus , VariableProximity Animations (29) — reactbits.dev/animations/<Name> AnimatedContent , Antigravity , BlobCursor , ClickSpark , Crosshair , Cubes , ElectricBorder , FadeContent , GhostCursor , GlareHover , GradualBlur , ImageTrail , LaserFlow , LogoLoop , MagicRings , Magnet , MagnetLines , MetaBalls , MetallicPaint , Noise , OrbitImages , PixelTrail , PixelTransition , Ribbons , ShapeBlur , SplashCursor , StarBorder , StickerPeel , TargetCursor Backgrounds (42) — reactbits.dev/backgrounds/<Name> Aurora , Balatro , Ballpit , Beams , ColorBends , DarkVeil , Dither , DotField , DotGrid , EvilEye , FaultyTerminal , FloatingLines , Galaxy , GradientBlinds , Grainient , GridDistortion , GridMotion , GridScan , Hyperspeed , Iridescence , LetterGlitch , Lightning , LightPillar , LightRays , LineWaves , LiquidChrome , LiquidEther , Orb , Particles , PixelBlast , PixelSnow , Plasma , PlasmaWave , Prism , PrismaticBurst , Radar , RippleGrid , ShapeGrid , Silk , SoftAurora , Threads , Waves Components (36) — reactbits.dev/components/<Name> AnimatedList , BorderGlow , BounceCards , BubbleMenu , CardNav , CardSwap , Carousel , ChromaGrid , CircularGallery , Counter , DecayCard , Dock , DomeGallery , ElasticSlider , FlowingMenu , FluidGlass , FlyingPosters , Folder , GlassIcons , GlassSurface , GooeyNav , InfiniteMenu , Lanyard , MagicBento , Masonry , ModelViewer , PillNav , PixelCard , ProfileCard , ReflectiveCard , ScrollStack , SpotlightCard , Stack , StaggeredMenu , Stepper , TiltedCard Design brief → component routing Match the user's ask to the minimum component set. Don't spray — pick ONE per role (one hero background, one headline text animation, one primary CTA treatment). Hero-section patterns Intent Background Headline Supporting AI / dev tool, luminous Aurora , Galaxy , Silk , Plasma BlurText , ShinyText , GradientText SplashCursor , ClickSpark SaaS analytics, architectural Beams , DotField , DotGrid , Dither SplitText , TextType , ScrollReveal GradualBlur frame Editorial / typographic hero no bg / SoftAurora / Grainient TextPressure , VariableProximity , ScrambledText minimal Consumer / energetic Balatro , Iridescence , PrismaticBurst , LiquidChrome GlitchText , RotatingText , TextType ImageTrail , PixelTrail Developer CLI / brutalist FaultyTerminal , LetterGlitch , GridScan , Hyperspeed DecryptedText , ScrambledText , ASCIIText Crosshair cursor 3D product showcase Particles , Ballpit , Prism BlurText , ShinyText ModelViewer , FluidGlass UI element patterns Need Component macOS-style launcher dock Dock Portfolio card stack / deck CardSwap , Stack , BounceCards , FlyingPosters Feature grid w/ glow MagicBento , SpotlightCard , BorderGlow 3D-feeling hover card TiltedCard , DecayCard , ReflectiveCard Image gallery (circular) CircularGallery , DomeGallery , InfiniteMenu Masonry / pinterest grid Masonry Pricing tier picker ElasticSlider , Stepper Multi-step onboarding Stepper , AnimatedList Navigation CardNav , PillNav , StaggeredMenu , BubbleMenu , FlowingMenu , GooeyNav Team / profile ProfileCard , GlassIcons , GlassSurface Number counter (KPI) CountUp , Counter Scroll-linked timeline ScrollStack , ScrollFloat , ScrollReveal , ScrollVelocity Marquee / logo strip LogoLoop Cursor (custom) SplashCursor , TargetCursor , GhostCursor , BlobCursor , TextCursor , Crosshair When NOT to use react-bits Design systems for enterprise dashboards → use the interface-design skill + plain Tailwind primitives; animations should be restrained. Brand-first design language (tokens, palette, typography scales) → use hue first to generate the design system, then layer react-bits components INTO it. Accessibility-critical flows — several components use canvas/WebGL and lack ARIA semantics. For forms, tables, a11y-required UI, stick to shadcn/ui primitives and only sprinkle react-bits for hero/marketing surfaces. SSR-sensitive pages — some three.js / OGL / face-api components need client-only rendering. Wrap in 'use client' (Next.js App Router) or lazy-import with ssr: false . Integration checklist When the user adds a react-bits component: Pick the right variant : TS-TW for modern stacks; JS-CSS only if the project is JS + CSS modules. Run npx shadcn@latest add @react-bits/<Component>-<VARIANT> — the CLI writes source into the project's components dir. Check the component's import block and install the listed peer deps (see dependency map above). For three.js / OGL / face-api components in Next.js: mark the parent as 'use client' or lazy-load with next/dynamic({ ssr: false }) . Respect prefers-reduced-motion — most components animate by default; add a wrapper that disables motion for a11y-sensitive users. Performance-test 3D/shader components on target devices. Stack 2+ canvas backgrounds at your own risk — each one costs GPU. Relationship to other skills hue — generates brand-specific design language (tokens, hero-stage presets). Run hue FIRST for a new brand, then pick react-bits components that fit the brand's declared hero preset. impeccable-design / impeccable-audit / impeccable-polish — craft layer for UI. Use react-bits components as primitives; impeccable-* for spacing/typography/polish. interface-design — dashboards, admin panels. React-bits is generally NOT the right choice here; the interface-design skill steers toward restrained Tailwind primitives. frontend-design , aidesigner-frontend — generative UI. Can reference react-bits components in their output. baseline-ui — animation-duration and a11y sanity checks. Run AFTER adding a react-bits component. fixing-motion-performance — when the canvas backgrounds tank Lighthouse. Rules for Claude When the user describes a visual brief, propose the minimum set of components from the tables above. Don't stack 3 animated backgrounds. Always cite the exact component name and the npx shadcn@latest add @react-bits/<Name>-TS-TW command. Flag required peer deps so the user doesn't hit an install and then immediately hit a missing-module error. For Next.js projects, always mention the 'use client' / ssr: false caveat for three/OGL/face-api components. When a brand-first design is in progress (user is running hue or an interface-design flow), let that skill lead; react-bits is a component source, not a design authority. Link to reactbits.dev/<category>/<Component> for live previews — always more useful than a text description. Source Repo: https://github.com/DavidHDev/react-bits Docs / live previews: https://reactbits.dev Vue port: https://vue-bits.dev License: MIT + Commons Clause (free for personal and commercial use) Last catalog sync: 2026-04-16 (130 components enumerated from src/content/{TextAnimations,Animations,Backgrounds,Components}/ )