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.

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> ); };

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> );

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> );

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> );

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> );

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'

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 &#x3C; 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

react-animation

Safety Notice

Copy this and send it to your AI assistant to learn

Tech Startup GradientText Iridescence

Event Promo DecryptedText Lightning

Source Transparency

Related Skills

screenshot-analyzer

gsap-animation

feature-analyzer