react-animation

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
Lightning	npx shadcn add https://reactbits.dev/r/Lightning-TS-CSS	Electric storm	None
Beams	npx shadcn add https://reactbits.dev/r/Beams-TS-CSS	Volumetric light columns	None
LightRays	npx shadcn add https://reactbits.dev/r/LightRays-TS-CSS	God rays, dramatic	followMouse={false}

Usage Pattern:

const DramaticScene: React.FC = () => (
  <AbsoluteFill>
    <Lightning hue={45} intensity={0.8} speed={2} />
    <BlurText text="THUNDER STRIKE" />
  </AbsoluteFill>
);

---

6. Abstract & Artistic (抽象艺术)

Experimental, artistic, unique. Best for creative projects, music videos.

Text

Component	Install	Aesthetic
DecryptedText	npx shadcn add https://reactbits.dev/r/DecryptedText-TS-CSS	Cryptic reveal

Backgrounds

Component	Install	Aesthetic	Disable Mouse
Plasma	npx shadcn add https://reactbits.dev/r/Plasma-TS-CSS	Organic flowing colors	mouseInteractive={false}
Prism	npx shadcn add https://reactbits.dev/r/Prism-TS-CSS	Light refraction	animationType='rotate'

---

7. Utility (通用工具)

Enhance any scene.

Overlay

Component	Install	Purpose
Noise	npx shadcn add https://reactbits.dev/r/Noise-TS-CSS	Film grain texture overlay

Usage Pattern:

const SceneWithGrain: React.FC = () => {
  const frame = useCurrentFrame();
  const { width, height } = useVideoConfig();
  const canvasRef = useRef<HTMLCanvasElement>(null);
  
  useEffect(() => {
    const ctx = canvasRef.current?.getContext('2d');
    if (!ctx || frame % 2 !== 0) return;
    
    const imageData = ctx.createImageData(width, height);
    for (let i = 0; i < imageData.data.length; i += 4) {
      const seed = frame * 100000 + i / 4;
      const val = Math.floor((Math.sin(seed) * 10000 % 1) * 255);
      imageData.data[i] = imageData.data[i + 1] = imageData.data[i + 2] = val;
      imageData.data[i + 3] = 15;
    }
    ctx.putImageData(imageData, 0, 0);
  }, [frame]);
  
  return (
    <>
      <YourScene />
      <canvas ref={canvasRef} style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }} />
    </>
  );
};

---

🔧 Core Adaptation Patterns

Frame-Based Animation

Replace all time-driven animations with useCurrentFrame():

import { useCurrentFrame, useVideoConfig, interpolate, Easing } from 'remotion';

// Before: time accumulation
// After: deterministic from frame
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
const progress = interpolate(frame, [0, 30], [0, 1], {
  easing: Easing.out(Easing.cubic),
  extrapolateLeft: 'clamp',
  extrapolateRight: 'clamp',
});

Seeded Randomness

Ensure deterministic rendering:

function seededRandom(seed: number): number {
  const x = Math.sin(seed) * 10000;
  return x - Math.floor(x);
}

const rand = seededRandom(frame * 1000 + index);

Shader Uniforms

For WebGL/OGL components:

// Time uniform
uniforms.iTime.value = frame / fps;

// Scripted mouse path (optional)
uniforms.iMouse.value.set(
  0.5 + 0.3 * Math.sin(frame / fps),
  0.5 + 0.2 * Math.cos(frame / fps * 0.7)
);

---

⚠️ Style Consistency Guidelines

DO:

• ✅ Mix Elegant + Luxury styles (BlurText + ShinyText + Silk)
• ✅ Mix Modern + Retro styles (GlitchText + LetterGlitch)
• ✅ Use Noise overlay on ANY scene
• ✅ Keep backgrounds subtle when text is prominent

DON'T:

• ❌ Mix Elegant + Retro (BlurText + PixelTransition)
• ❌ Mix Luxury + Glitch (ShinyText + GlitchText)
• ❌ Use Lightning with complex text animations
• ❌ Use more than 2 background effects simultaneously

---

📦 Full Component List (35 curated)

Text (6)

BlurText, GlitchText, GradientText, ShinyText, DecryptedText, TextType

Backgrounds (18)

Aurora, Silk, Grainient, Lightning, Iridescence, LiquidChrome, Particles, Galaxy, Plasma, LetterGlitch, Beams, LightRays, Dither, FaultyTerminal, DarkVeil, PixelSnow, Balatro, Prism

Effects (10)

MetaBalls, Ribbons, ShapeBlur, Antigravity, StarBorder, PixelTransition

Utility (1)

Noise

---

❌ Removed Components

Why these were removed:

• Low aesthetic value: SplitText, FadeContent, AnimatedContent
• Style overlap: ElectricBorder (covered by GlitchText), Orb (covered by Iridescence)
• Outdated aesthetics: Hyperspeed, Cubes, Squares
• Narrow use cases: CircularText, RotatingText, TrueFocus
• Functional > Aesthetic: Counter, Stepper, Carousel (UI components)

---

🎬 Recommended Combinations

Project Type	Text	Background	Effect	Mood
Luxury Brand	ShinyText	Silk	StarBorder	Premium
Tech Startup	GradientText	Iridescence	-	Innovative
Creative Studio	BlurText	Aurora	Ribbons	Artistic
Gaming	GlitchText	LetterGlitch	PixelTransition	Edgy
Documentary	BlurText	Grainient	Noise	Cinematic
Event Promo	DecryptedText	Lightning	-	Energetic