react-animation

适用场景

创建需要精致美观视觉效果的 Remotion 视频合成时，使用此技能。组件经过精心挑选，旨在打造出色的动态图形，并按视觉风格分类。

安装

npx shadcn@latest add https://reactbits.dev/r/<Component>-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="Elegant Title" 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}>
      FUTURE IS NOW
    </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="PREMIUM" 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>SYSTEM OVERRIDE</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="THUNDER STRIKE" />
  </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';

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

带种子的随机性

确保渲染结果确定：

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

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

着色器 Uniform

用于 WebGL/OGL 组件：

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

---

⚠️ 风格一致性指南

应该：

• ✅ 混搭优雅与奢华风格（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 组件）

---

🎬 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