React动画技能（用于Remotion视频制作） react-animation

---

名称: react-animation 描述: 用于Remotion的ReactBits动画 - 专为视频制作中的美学卓越而策划 元数据: 标签: react-animation, reactbits, remotion, animation, video, effects, text, backgrounds, motion-graphics

何时使用

使用此技能时，创建需要 美学精致 视觉特效的Remotion视频合成。组件按视觉风格分类，专为卓越的运动图形而策划。

安装

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

---

🎨 美学类别

组件按视觉风格组织。避免在一个视频中混合超过2种风格。

---

1. 优雅与柔和（优雅柔和）

平滑、电影感、精致。最适合奢侈品牌、情感故事讲述。

文本

组件	安装	美学
BlurText	npx shadcn add https://reactbits.dev/r/BlurText-TS-CSS	模糊到清晰的电影感揭示

背景

组件	安装	美学
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	颗粒艺术渐变

效果

组件	安装	美学
Ribbons	npx shadcn add https://reactbits.dev/r/Ribbons-TS-CSS	流动丝带
ShapeBlur	npx shadcn add https://reactbits.dev/r/ShapeBlur-TS-CSS	柔和抽象几何

使用模式：

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

---

2. 现代与科技（现代科技）

尖端、动态、未来感。最适合科技产品、初创公司、创新。

文本

组件	安装	美学
GlitchText	npx shadcn add https://reactbits.dev/r/GlitchText-TS-CSS	数字故障伪影
GradientText	npx shadcn add https://reactbits.dev/r/GradientText-TS-CSS	流动渐变扫掠

背景

组件	安装	美学	禁用鼠标
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}

效果

组件	安装	美学
MetaBalls	npx shadcn add https://reactbits.dev/r/MetaBalls-TS-CSS	有机液体融合
Antigravity	npx shadcn add https://reactbits.dev/r/Antigravity-TS-CSS	空灵粒子场

使用模式：

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}>
      未来即现在
    </GlitchText>
  </AbsoluteFill>
);

---

3. 奢华与高端（奢华高端）

金属感、精致、复杂。最适合奢侈商品、金融、高端服务。

文本

组件	安装	美学
ShinyText	npx shadcn add https://reactbits.dev/r/ShinyText-TS-CSS	金属光泽扫掠

背景

组件	安装	美学
Silk	npx shadcn add https://reactbits.dev/r/Silk-TS-CSS	优质织物纹理

效果

组件	安装	美学
StarBorder	npx shadcn add https://reactbits.dev/r/StarBorder-TS-CSS	动画渐变边框

使用模式：

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

---

4. 复古与像素（复古像素）

怀旧、数字、低保真。最适合游戏、复古科技、蒸汽波美学。

文本

组件	安装	美学
TextType	npx shadcn add https://reactbits.dev/r/TextType-TS-CSS	终端打字机效果
DecryptedText	npx shadcn add https://reactbits.dev/r/DecryptedText-TS-CSS	数据解密效果

过渡

组件	安装	美学
PixelTransition	npx shadcn add https://reactbits.dev/r/PixelTransition-TS-CSS	像素网格溶解

背景

组件	安装	美学
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监视器效果

使用模式：

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

---

5. 能量与戏剧（能量戏剧）

高冲击、动态、强大。最适合动作、体育、公告。

背景

组件	安装	美学	禁用鼠标
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}

使用模式：

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

---

6. 抽象与艺术（抽象艺术）

实验性、艺术性、独特。最适合创意项目、音乐视频。

文本

组件	安装	美学
DecryptedText	npx shadcn add https://reactbits.dev/r/DecryptedText-TS-CSS	神秘揭示

背景

组件	安装	美学	禁用鼠标
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. 实用工具（通用工具）

增强任何场景。

覆盖

组件	安装	目的
Noise	npx shadcn add https://reactbits.dev/r/Noise-TS-CSS	胶片颗粒纹理覆盖

使用模式：

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

---

🔧 核心适配模式

基于帧的动画

用 useCurrentFrame() 替换所有时间驱动的动画：

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

// 之前：时间累积
// 之后：基于帧的确定性
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
const progress = interpolate(frame, [0, 30], [0, 1], {
  easing: Easing.out(Easing.cubic),
  extrapolateLeft: 'clamp',
  extrapolateRight: 'clamp',
});

种子随机性

确保确定性渲染：

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

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

着色器统一变量

对于WebGL/OGL组件：

// 时间统一变量
uniforms.iTime.value = frame / fps;

// 脚本鼠标路径（可选）
uniforms.iMouse.value.set(
  0.5 + 0.3 * Math.sin(frame / fps),
  0.5 + 0.2 * Math.cos(frame / fps * 0.7)
);

---

⚠️ 风格一致性指南

应做：

• ✅ 混合优雅 + 奢华风格（BlurText + ShinyText + Silk）
• ✅ 混合现代 + 复古风格（GlitchText + LetterGlitch）
• ✅ 在任何场景使用Noise覆盖
• ✅ 当文本突出时保持背景微妙

不应做：

• ❌ 混合优雅 + 复古（BlurText + PixelTransition）
• ❌ 混合奢华 + 故障（ShinyText + GlitchText）
• ❌ 使用Lightning与复杂文本动画
• ❌ 同时使用超过2个背景效果

---

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

文本（6）

BlurText, GlitchText, GradientText, ShinyText, DecryptedText, TextType

背景（18）

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

效果（10）

MetaBalls, Ribbons, ShapeBlur, Antigravity, StarBorder, PixelTransition

实用工具（1）

Noise

---

❌ 移除的组件

移除原因：

• 美学价值低：SplitText, FadeContent, AnimatedContent
• 风格重叠：ElectricBorder（由GlitchText覆盖）, Orb（由Iridescence覆盖）
• 过时美学：Hyperspeed, Cubes, Squares
• 使用场景窄：CircularText, RotatingText, TrueFocus
• 功能性大于美学：Counter, Stepper, Carousel（UI组件）

---

🎬 推荐组合

项目类型	文本	背景	效果	氛围
奢侈品牌	ShinyText	Silk	StarBorder	高端
科技初创公司	GradientText	Iridescence	-	创新
创意工作室	BlurText	Aurora	Ribbons	艺术性
游戏	GlitchText	LetterGlitch	PixelTransition	前卫
纪录片	BlurText	Grainient	Noise	电影感
活动推广	DecryptedText	Lightning	-	充满活力