Back to Details

react-animation

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

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.
当你创建需要高视觉美感视觉效果的Remotion视频合成内容时，可以使用这些组件。所有组件均为优质动态图形打造，并按视觉风格分类。

Installation

安装步骤

bash
npx shadcn@latest add https://reactbits.dev/r/<Component>-TS-CSS
bash
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.
组件按视觉风格划分。请勿在单个视频中混合超过2种风格。

1. Elegant & Soft (优雅柔和)

1. 优雅柔和风格

Smooth, cinematic, refined. Best for luxury brands, emotional storytelling.
流畅、电影级、精致。最适合奢侈品牌、情感叙事类内容。

Text

文本组件

ComponentInstallAesthetic
BlurText
npx shadcn add https://reactbits.dev/r/BlurText-TS-CSS
Blur-to-clear cinematic reveal
组件安装命令视觉效果
BlurText
npx shadcn add https://reactbits.dev/r/BlurText-TS-CSS
从模糊到清晰的电影级揭示效果

Backgrounds

背景组件

ComponentInstallAesthetic
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
组件安装命令视觉效果
Aurora
npx shadcn add https://reactbits.dev/r/Aurora-TS-CSS
流动极光效果
Silk
npx shadcn add https://reactbits.dev/r/Silk-TS-CSS
极简织物波纹效果
Grainient
npx shadcn add https://reactbits.dev/r/Grainient-TS-CSS
颗粒感艺术渐变效果

Effects

特效组件

ComponentInstallAesthetic
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:
tsx
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>
  );
};
组件安装命令视觉效果
Ribbons
npx shadcn add https://reactbits.dev/r/Ribbons-TS-CSS
流动丝缎飘带效果
ShapeBlur
npx shadcn add https://reactbits.dev/r/ShapeBlur-TS-CSS
柔和抽象几何效果
使用示例:
tsx
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 (现代科技)

2. 现代科技风格

Cutting-edge, dynamic, futuristic. Best for tech products, startups, innovation.
前沿、动感、未来感。最适合科技产品、初创企业、创新主题内容。

Text

文本组件

ComponentInstallAesthetic
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
组件安装命令视觉效果
GlitchText
npx shadcn add https://reactbits.dev/r/GlitchText-TS-CSS
数字故障失真效果
GradientText
npx shadcn add https://reactbits.dev/r/GradientText-TS-CSS
流动渐变扫过效果

Backgrounds

背景组件

ComponentInstallAestheticDisable 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}
组件安装命令视觉效果禁用鼠标交互
Iridescence
npx shadcn add https://reactbits.dev/r/Iridescence-TS-CSS
彩虹油膜效果
mouseReact={false}
LiquidChrome
npx shadcn add https://reactbits.dev/r/LiquidChrome-TS-CSS
液态金属表面效果
interactive={false}
Particles
npx shadcn add https://reactbits.dev/r/Particles-TS-CSS
悬浮数据点效果
moveParticlesOnHover={false}

Effects

特效组件

ComponentInstallAesthetic
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:
tsx
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>
);
组件安装命令视觉效果
MetaBalls
npx shadcn add https://reactbits.dev/r/MetaBalls-TS-CSS
有机液体融合效果
Antigravity
npx shadcn add https://reactbits.dev/r/Antigravity-TS-CSS
空灵粒子场效果
使用示例:
tsx
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 (奢华高端)

3. 奢华高端风格

Metallic, refined, sophisticated. Best for luxury goods, finance, high-end services.
金属质感、精致、典雅。最适合奢侈品、金融、高端服务类内容。

Text

文本组件

ComponentInstallAesthetic
ShinyText
npx shadcn add https://reactbits.dev/r/ShinyText-TS-CSS
Metallic sheen sweep
组件安装命令视觉效果
ShinyText
npx shadcn add https://reactbits.dev/r/ShinyText-TS-CSS
金属光泽扫过效果

Backgrounds

背景组件

ComponentInstallAesthetic
Silk
npx shadcn add https://reactbits.dev/r/Silk-TS-CSS
Premium fabric texture
组件安装命令视觉效果
Silk
npx shadcn add https://reactbits.dev/r/Silk-TS-CSS
高端织物纹理效果

Effects

特效组件

ComponentInstallAesthetic
StarBorder
npx shadcn add https://reactbits.dev/r/StarBorder-TS-CSS
Animated gradient border
Usage Pattern:
tsx
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>
);
组件安装命令视觉效果
StarBorder
npx shadcn add https://reactbits.dev/r/StarBorder-TS-CSS
渐变动画边框效果
使用示例:
tsx
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 (复古像素)

4. 复古像素风格

Nostalgic, digital, lo-fi. Best for gaming, retro tech, vaporwave aesthetics.
怀旧、数字化、低保真。最适合游戏、复古科技、蒸汽波美学内容。

Text

文本组件

ComponentInstallAesthetic
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
组件安装命令视觉效果
TextType
npx shadcn add https://reactbits.dev/r/TextType-TS-CSS
终端打字机效果
DecryptedText
npx shadcn add https://reactbits.dev/r/DecryptedText-TS-CSS
数据解密效果

Transitions

转场组件

ComponentInstallAesthetic
PixelTransition
npx shadcn add https://reactbits.dev/r/PixelTransition-TS-CSS
Pixel grid dissolve
组件安装命令视觉效果
PixelTransition
npx shadcn add https://reactbits.dev/r/PixelTransition-TS-CSS
像素网格溶解效果

Backgrounds

背景组件

ComponentInstallAesthetic
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:
tsx
const RetroScene: React.FC = () => (
  <AbsoluteFill style={{ background: '#000' }}>
    <LetterGlitch glitchSpeed={100} glitchColors={['#0f0', '#00ff41']} />
    <GlitchText>SYSTEM OVERRIDE</GlitchText>
  </AbsoluteFill>
);
组件安装命令视觉效果
LetterGlitch
npx shadcn add https://reactbits.dev/r/LetterGlitch-TS-CSS
矩阵代码雨效果
Dither
npx shadcn add https://reactbits.dev/r/Dither-TS-CSS
复古抖动效果
FaultyTerminal
npx shadcn add https://reactbits.dev/r/FaultyTerminal-TS-CSS
CRT显示器效果
使用示例:
tsx
const RetroScene: React.FC = () => (
  <AbsoluteFill style={{ background: '#000' }}>
    <LetterGlitch glitchSpeed={100} glitchColors={['#0f0', '#00ff41']} />
    <GlitchText>SYSTEM OVERRIDE</GlitchText>
  </AbsoluteFill>
);

5. Energy & Dramatic (能量戏剧)

5. 能量戏剧风格

High-impact, dynamic, powerful. Best for action, sports, announcements.
高冲击力、动感、强劲。最适合动作、体育、公告类内容。

Backgrounds

背景组件

ComponentInstallAestheticDisable Mouse
Lightning
npx shadcn add https://reactbits.dev/r/Lightning-TS-CSS
Electric stormNone
Beams
npx shadcn add https://reactbits.dev/r/Beams-TS-CSS
Volumetric light columnsNone
LightRays
npx shadcn add https://reactbits.dev/r/LightRays-TS-CSS
God rays, dramatic
followMouse={false}
Usage Pattern:
tsx
const DramaticScene: React.FC = () => (
  <AbsoluteFill>
    <Lightning hue={45} intensity={0.8} speed={2} />
    <BlurText text="THUNDER STRIKE" />
  </AbsoluteFill>
);
组件安装命令视觉效果禁用鼠标交互
Lightning
npx shadcn add https://reactbits.dev/r/Lightning-TS-CSS
电闪雷鸣效果无
Beams
npx shadcn add https://reactbits.dev/r/Beams-TS-CSS
体积光柱效果无
LightRays
npx shadcn add https://reactbits.dev/r/LightRays-TS-CSS
上帝之光、戏剧化效果
followMouse={false}
使用示例:
tsx
const DramaticScene: React.FC = () => (
  <AbsoluteFill>
    <Lightning hue={45} intensity={0.8} speed={2} />
    <BlurText text="THUNDER STRIKE" />
  </AbsoluteFill>
);

6. Abstract & Artistic (抽象艺术)

6. 抽象艺术风格

Experimental, artistic, unique. Best for creative projects, music videos.
实验性、艺术性、独特。最适合创意项目、音乐视频。

Text

文本组件

ComponentInstallAesthetic
DecryptedText
npx shadcn add https://reactbits.dev/r/DecryptedText-TS-CSS
Cryptic reveal
组件安装命令视觉效果
DecryptedText
npx shadcn add https://reactbits.dev/r/DecryptedText-TS-CSS
神秘揭示效果

Backgrounds

背景组件

ComponentInstallAestheticDisable 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'
组件安装命令视觉效果禁用鼠标交互
Plasma
npx shadcn add https://reactbits.dev/r/Plasma-TS-CSS
有机流动色彩效果
mouseInteractive={false}
Prism
npx shadcn add https://reactbits.dev/r/Prism-TS-CSS
光线折射效果
animationType='rotate'

7. Utility (通用工具)

7. 通用工具组件

Enhance any scene.
可增强任意场景效果。

Overlay

叠加层

ComponentInstallPurpose
Noise
npx shadcn add https://reactbits.dev/r/Noise-TS-CSS
Film grain texture overlay
Usage Pattern:
tsx
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' }} />
    </>
  );
};
组件安装命令用途
Noise
npx shadcn add https://reactbits.dev/r/Noise-TS-CSS
胶片颗粒纹理叠加层
使用示例:
tsx
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()
:
tsx
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',
});
将所有时间驱动的动画替换为
useCurrentFrame()
:
tsx
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:
tsx
function seededRandom(seed: number): number {
  const x = Math.sin(seed) * 10000;
  return x - Math.floor(x);
}

const rand = seededRandom(frame * 1000 + index);
确保渲染结果可预测:
tsx
function seededRandom(seed: number): number {
  const x = Math.sin(seed) * 10000;
  return x - Math.floor(x);
}

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

Shader Uniforms

着色器Uniform变量

For WebGL/OGL components:
tsx
// 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)
);
适用于WebGL/OGL组件:
tsx
// 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
建议做法:
  • ✅ 混合优雅+奢华风格（BlurText + ShinyText + Silk）
  • ✅ 混合现代+复古风格（GlitchText + LetterGlitch）
  • ✅ 在任意场景中使用Noise叠加层
  • ✅ 当文本为视觉焦点时，保持背景简洁
禁止做法:
  • ❌ 混合优雅+复古风格（BlurText + PixelTransition）
  • ❌ 混合奢华+故障风格（ShinyText + GlitchText）
  • ❌ 将Lightning与复杂文本动画搭配使用
  • ❌ 同时使用超过2种背景效果

📦 Full Component List (35 curated)

📦 完整组件列表（35个精选组件）

Text (6)

文本组件（6个）

BlurText, GlitchText, GradientText, ShinyText, DecryptedText, TextType
BlurText, GlitchText, GradientText, ShinyText, DecryptedText, TextType

Backgrounds (18)

背景组件（18个）

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

Effects (10)

特效组件（10个）

MetaBalls, Ribbons, ShapeBlur, Antigravity, StarBorder, PixelTransition
MetaBalls, Ribbons, ShapeBlur, Antigravity, StarBorder, PixelTransition

Utility (1)

工具组件（1个）

Noise
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)
移除原因:
  • 视觉美感不足: SplitText, FadeContent, AnimatedContent
  • 风格重叠: ElectricBorder（已被GlitchText覆盖）, Orb（已被Iridescence覆盖）
  • 审美过时: Hyperspeed, Cubes, Squares
  • 使用场景狭窄: CircularText, RotatingText, TrueFocus
  • 功能性大于审美性: Counter, Stepper, Carousel（UI组件）

🎬 Recommended Combinations

🎬 推荐组件组合

Project TypeTextBackgroundEffectMood
Luxury BrandShinyTextSilkStarBorderPremium
Tech StartupGradientTextIridescence-Innovative
Creative StudioBlurTextAuroraRibbonsArtistic
GamingGlitchTextLetterGlitchPixelTransitionEdgy
DocumentaryBlurTextGrainientNoiseCinematic
Event PromoDecryptedTextLightning-Energetic
项目类型文本组件背景组件特效组件氛围
奢侈品牌ShinyTextSilkStarBorder高端质感
科技初创企业GradientTextIridescence-创新感
创意工作室BlurTextAuroraRibbons艺术感
游戏项目GlitchTextLetterGlitchPixelTransition前卫感
纪录片BlurTextGrainientNoise电影质感
活动宣传DecryptedTextLightning-充满能量