react-bits（React bits 前端）

React Bits

React Bits (https://reactbits.dev) is the largest open-source library of animated, interactive React components. 110+ components across four categories, fully customizable via props, copy-paste ready.

GitHub: https://github.com/DavidHDev/react-bits — 35k+ stars

Installation

Each component is copy-paste or CLI installable via shadcn/jsrepo. No monolithic package install needed.

# Via shadcn (recommended)
npx shadcn@latest add @react-bits/<ComponentName>-TS-TW

# Examples
npx shadcn@latest add @react-bits/BlurText-TS-TW
npx shadcn@latest add @react-bits/AnimatedContent-TS-TW
npx shadcn@latest add @react-bits/Aurora-TS-TW

# Via jsrepo
npx jsrepo add github/DavidHDev/react-bits/src/ts-tailwind/<Category>/<ComponentName>

4 variants per component — choose based on your stack:

• JS-CSS — JavaScript + plain CSS
• JS-TW — JavaScript + Tailwind
• TS-CSS — TypeScript + plain CSS
• TS-TW — TypeScript + Tailwind (recommended)

Component Categories

🌀 Animations (30+ components)

Scroll-triggered and interactive animation wrappers.

🖼️ Backgrounds (35+ components)

Full-screen animated backgrounds.

🧩 Components (35+ components)

Interactive UI elements.

✍️ Text Animations (25+ components)

Animated text effects.

Usage Patterns

Pattern 1: Scroll-triggered section reveal

import AnimatedContent from '@/components/ui/AnimatedContent';

export function Section() {
  return (
    <AnimatedContent distance={60} direction="vertical" duration={0.7} delay={0.1}>
      <h2>Your Content</h2>
    </AnimatedContent>
  );
}

Pattern 2: Animated hero background

import Aurora from '@/components/ui/Aurora';
import BlurText from '@/components/ui/BlurText';

export function Hero() {
  return (
    <div className="relative h-screen">
      <Aurora colorStops={["#3A1C71", "#D76D77", "#FFAF7B"]} blend={0.5} amplitude={1.0} speed={0.5} />
      <div className="absolute inset-0 flex items-center justify-center">
        <BlurText text="Welcome to the Future" delay={150} animateBy="words" direction="top" className="text-6xl font-bold text-white" />
      </div>
    </div>
  );
}

Pattern 3: Interactive card grid

import TiltedCard from '@/components/ui/TiltedCard';

export function CardGrid() {
  return (
    <div className="grid grid-cols-3 gap-6">
      {items.map(item => (
        <TiltedCard
          key={item.id}
          imageSrc={item.image}
          captionText={item.title}
          containerHeight="300px"
          rotateAmplitude={12}
          scaleOnHover={1.05}
          showMobileWarning={false}
        />
      ))}
    </div>
  );
}

Pattern 4: Animated navigation dock

import Dock from '@/components/ui/Dock';
import { Home, Settings, User } from 'lucide-react';

const items = [
  { icon: <Home size={18} />, label: 'Home', onClick: () => {} },
  { icon: <User size={18} />, label: 'Profile', onClick: () => {} },
  { icon: <Settings size={18} />, label: 'Settings', onClick: () => {} },
];

export function Nav() {
  return <Dock items={items} magnification={60} distance={100} panelHeight={68} />;
}

Pattern 5: Text scramble on hover

import DecryptedText from '@/components/ui/DecryptedText';

export function HoverText() {
  return (
    <DecryptedText
      text="Hover to reveal"
      speed={50}
      maxIterations={20}
      revealDirection="center"
      enableHoverEffect={true}
      animateOn="hover"
      className="text-2xl font-mono"
    />
  );
}

Dependencies by Component

Most components use one of these — install as needed:

# Motion (most text animations + components)
npm install motion

# GSAP (AnimatedContent, some animations)
npm install gsap

# Three.js (3D components: ASCIIText, ModelViewer, Hyperspeed)
npm install three @types/three

# OGL (shader backgrounds: Silk, Iridescence, LiquidChrome)
npm install ogl

Component Source URLs

Browse and copy source at:

• Docs: https://reactbits.dev
• GitHub source: https://github.com/DavidHDev/react-bits/tree/main/src/ts-tailwind/<Category>/<ComponentName>/

Categories in source: Animations/, Backgrounds/, Components/, TextAnimations/

Creative Tools

React Bits also provides free browser-based tools at https://reactbits.dev/tools:

• Background Studio — customize animated backgrounds, export as video/image/code
• Shape Magic — inner rounded corners between shapes, export SVG/React/clip-path
• Texture Lab — apply noise, dithering, ASCII effects to images/videos