react-animation

使用する場面

美しく洗練された視覚効果が必要な Remotion の動画コンポジションを作成するときに、このスキルを使用します。モーショングラフィックスの品質を高めるコンポーネントを、ビジュアルスタイル別に分類しています。

インストール

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

---

🎨 美的カテゴリ

ビジュアルスタイル別に整理されたコンポーネントです。1 本の動画で 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);

シェーダーのユニフォーム

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 を組み合わせる
• ❌ 背景エフェクトを同時に3つ以上使用する

---

📦 コンポーネント一覧（厳選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