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

Backgrounds

Effects

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

Backgrounds

Effects

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

Backgrounds

Effects

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

Transitions

Backgrounds

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

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

Backgrounds

7. Utility (通用工具)

Enhance any scene.

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