React动画组件库：Remotion视频合成美学组件，优雅/现代/奢华风格

效果

使用模式：

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. 现代科技

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

文本

背景

效果

使用模式：

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. 奢华高端

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

文本

背景

效果

使用模式：

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. 复古像素

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

文本

转场

背景

使用模式：

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

5. 能量戏剧

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

背景

使用模式：

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

6. 抽象艺术

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

文本

背景

7. 通用工具

增强任何场景。

叠加层

使用模式：

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

着色器 Uniform

对于 WebGL/OGL 组件：

// 时间 uniform
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 组件)

🎬 推荐组合

每周安装次数

78

代码仓库

notedit/happy-skills

GitHub 星标数

325

首次出现

Feb 12, 2026

安全审计

Gen Agent Trust HubPassSocketPassSnykPass

已安装于

opencode77

kimi-cli76

gemini-cli76

codex76

github-copilot75

amp75