/react-animation

name: react-animation
description: ReactBits animations for Remotion - curated for aesthetic excellence in video production
metadata:
  tags: react-animation, reactbits, remotion, animation, video, effects, text, backgrounds, motion-graphics

When to use

Use this skill when creating Remotion video compositions that need **aesthetically refined** visual effects. Components are curated for motion graphics excellence, categorized by visual style.

Installation

npx shadcn@latest add https://reactbits.dev/r/<Component>-TS-CSS

---

🎨 Aesthetic Categories

Components organized by visual style. **Avoid mixing more than 2 styles in one video.**

---

1. Elegant & Soft (优雅柔和)

*Smooth, cinematic, refined. Best for luxury brands, emotional storytelling.*

Text

| Component | Install | Aesthetic | |-----------|---------|-----------| | **BlurText** | `npx shadcn add https://reactbits.dev/r/BlurText-TS-CSS` | Blur-to-clear cinematic reveal |

Backgrounds

| Component | Install | Aesthetic | |-----------|---------|-----------| | **Aurora** | `npx shadcn add https://reactbits.dev/r/Aurora-TS-CSS` | Flowing northern lights | | **Silk** | `npx shadcn add https://reactbits.dev/r/Silk-TS-CSS` | Minimalist fabric waves | | **Grainient** | `npx shadcn add https://reactbits.dev/r/Grainient-TS-CSS` | Grainy artistic gradients |

Effects

| Component | Install | Aesthetic | |-----------|---------|-----------| | **Ribbons** | `npx shadcn add https://reactbits.dev/r/Ribbons-TS-CSS` | Flowing silk ribbons | | **ShapeBlur** | `npx shadcn add https://reactbits.dev/r/ShapeBlur-TS-CSS` | Soft abstract geometry |

**Usage Pattern:**

const ElegantScene: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  
  return (
    <AbsoluteFill>
      <Aurora time={frame / fps} colorStops={['#3A29FF', '#FF94B4', '#FF3232']} />
      <BlurText text="Elegant Title" startFrame={15} />
    </AbsoluteFill>
  );
};

---

2. Modern & Tech (现代科技)

*Cutting-edge, dynamic, futuristic. Best for tech products, startups, innovation.*

Text

| Component | Install | Aesthetic | |-----------|---------|-----------| | **GlitchText** | `npx shadcn add https://reactbits.dev/r/GlitchText-TS-CSS` | Digital glitch artifacts | | **GradientText** | `npx shadcn add https://reactbits.dev/r/GradientText-TS-CSS` | Flowing gradient sweep |

Backgrounds

| Component | Install | Aesthetic | Disable Mouse | |-----------|---------|-----------|---------------| | **Iridescence** | `npx shadcn add https://reactbits.dev/r/Iridescence-TS-CSS` | Rainbow oil-slick | `mouseReact={false}` | | **LiquidChrome** | `npx shadcn add https://reactbits.dev/r/LiquidChrome-TS-CSS` | Liquid metal surface | `interactive={false}` | | **Particles** | `npx shadcn add https://reactbits.dev/r/Particles-TS-CSS` | Floating data points | `moveParticlesOnHover={false}` |

Effects

| Component | Install | Aesthetic | |-----------|---------|-----------| | **MetaBalls** | `npx shadcn add https://reactbits.dev/r/MetaBalls-TS-CSS` | Organic liquid fusion | | **Antigravity** | `npx shadcn add https://reactbits.dev/r/Antigravity-TS-CSS` | Ethereal particle field |

**Usage Pattern:**

const TechScene: React.FC = () => (
  <AbsoluteFill style={{ background: '#000' }}>
    <Iridescence mouseReact={false} color={[0.3, 0.1, 0.8]} speed={1} />
    <GlitchText speed={0.5} enableShadows enableOnHover={false}>
      FUTURE IS NOW
    </GlitchText>
  </AbsoluteFill>
);

---

3. Luxury & Premium (奢华高端)

*Metallic, refined, sophisticated. Best for luxury goods, finance, high-end services.*

Text

| Component | Install | Aesthetic | |-----------|---------|-----------| | **ShinyText** | `npx shadcn add https://reactbits.dev/r/ShinyText-TS-CSS` | Metallic sheen sweep |

Backgrounds

| Component | Install | Aesthetic | |-----------|---------|-----------| | **Silk** | `npx shadcn add https://reactbits.dev/r/Silk-TS-CSS` | Premium fabric texture |

Effects

| Component | Install | Aesthetic | |-----------|---------|-----------| | **StarBorder** | `npx shadcn add https://reactbits.dev/r/StarBorder-TS-CSS` | Animated gradient border |

**Usage Pattern:**

const LuxuryScene: React.FC = () => (
  <AbsoluteFill style={{ background: '#0a0a0a' }}>
    <Silk speed={0.5} color="#1a1a2e" />
    <StarBorder color="#gold" speed="4s">
      <ShinyText text="PREMIUM" color="#c9b037" shineColor="#fff" />
    </StarBorder>
  </AbsoluteFill>
);

---

4. Retro & Pixel (复古像素)

*Nostalgic, digital, lo-fi. Best for gaming, retro tech, vaporwave aesthetics.*

Text

| Component | Install | Aesthetic | |-----------|---------|-----------| | **TextType** | `npx shadcn add https://reactbits.dev/r/TextType-TS-CSS` | Terminal typewriter | | **DecryptedText** | `npx shadcn add https://reactbits.dev/r/DecryptedText-TS-CSS` | Data decryption effect |

Transitions

| Component | Install | Aesthetic | |-----------|---------|-----------| | **PixelTransition** | `npx shadcn add https://reactbits.dev/r/PixelTransition-TS-CSS` | Pixel grid dissolve |

Backgrounds

| Component | Install | Aesthetic | |-----------|---------|-----------| | **LetterGlitch** | `npx shadcn add https://reactbits.dev/r/LetterGlitch-TS-CSS` | Matrix code rain | | **Dither** | `npx shadcn add https://reactbits.dev/r/Dither-TS-CSS` | Retro dithering | | **FaultyTerminal** | `npx shadcn add https://reactbits.dev/r/FaultyTerminal-TS-CSS` | CRT monitor effect |

**Usage Pattern:**

const RetroScene: React.FC = () => (
  <AbsoluteFill style={{ background: '#000' }}>
    <LetterGlitch glitchSpeed={100} glitchColors={['#0f0', '#00ff41']} />
    <GlitchText>SYSTEM OVERRIDE</GlitchText>
  </AbsoluteFill>
);

---

5. Energy & Dramatic (能量戏剧)

*High-impact, dynamic, powerful. Best for action, sports, announcements.*

Backgrounds

| Component | Install | Aesthetic | Disable Mouse | |-----------|---------|-----------|------------