create-remotion-geist

Remotion Geist 動画を作成する

Vercel の Geist デザインシステムに沿った Remotion 動画を作成します。暗い背景、スプリングアニメーション、Geist フォント、10 段階のカラースケールを使用します。

使用する場面

• Vercel のような見た目にしたい Remotion 動画を作成するとき
• Geist のダークテーマの美しさを取り入れたモーショングラフィックスを作成するとき
• Geist のタイポグラフィとカラーを使ったアニメーションコンテンツを作成するとき
• 洗練された Vercel のビジュアルスタイルが必要な動画を制作するとき

重要なルール

1. 絵文字は絶対に使用しないでください — @geist-ui/icons パッケージの適切な Geist アイコンを使用します
2. 公式のブランドアセットを使用してください — 公式ソースからダウンロードし、SVG を自作しないでください
3. エントリーポイントは .tsx にしてください — .ts ではなく、registerRoot() を使用する src/index.tsx を使います
4. コードには prism-react-renderer を使用してください — 正規表現ベースのシンタックスハイライトは使用しないでください

クイックスタート

1. プロジェクトをスキャフォールドします：

   mkdir -p src/{scenes,components,utils} out
   npm init -y
   npm install remotion @remotion/cli @remotion/tailwind react react-dom
   npm install -D tailwindcss typescript @types/react
   npm install @geist-ui/icons  # For proper icons
   

2. コアファイルを作成します（テンプレートは references/project-setup.md を参照）：

   • remotion.config.ts — Tailwind を有効化
   • tailwind.config.js — Geist のカラーとフォント
   • src/styles.css — CDN からフォントを読み込み
   • src/index.tsx — registerRoot() を使用するルートコンポジション
   • src/Root.tsx — コンポジションの定義
   • src/utils/animations.ts — スプリングアニメーション

3. references/scene-patterns.md のパターンに従ってシーンを作成します

4. レンダリングします：

   npx remotion studio          # Preview at localhost:3000
   npx remotion render MyComp out/video.mp4
   

Geist デザイントークン（クイックリファレンス）

カラー（ダークテーマ）

トークン	CSS 変数	値	用途
background-100	--ds-background-100	#0a0a0a	プライマリ背景
background-200	--ds-background-200	#171717	セカンダリ／浮き上がった要素
gray-400	--ds-gray-400	#737373	デフォルトのボーダー
green-700	--ds-green-700	#46A758	成功
red-700	--ds-red-700	#E5484D	エラー
amber-700	--ds-amber-700	#FFB224	警告
blue-700	--ds-blue-700	#0070F3	情報／アクセント

タイポグラフィクラス

• 見出し： text-heading-{72|64|56|48|40|32|24|20|16|14}（セミボールド、文字間隔は狭め）
• ラベル： text-label-{20|18|16|14|13|12}[-mono]（標準の太さ）
• 本文： text-copy-{24|20|18|16|14|13}[-mono]（標準の太さ）

スペーシング（4px 基準）

• space-2：8px | space-4：16px | space-6：24px | space-8：32px

アニメーションユーティリティ

Geist の滑らかな美しさを表現するため、スプリングベースのアニメーションを使用します。

import { spring, interpolate } from 'remotion';

// Fade in with delay
export function fadeIn(frame: number, fps: number, delay = 0, duration = 0.4) {
  const delayFrames = delay * fps;
  const durationFrames = duration * fps;
  return interpolate(frame, [delayFrames, delayFrames + durationFrames], [0, 1],
    { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });
}

// Spring scale
export function springIn(frame: number, fps: number, delay = 0) {
  return spring({ frame: frame - delay * fps, fps, config: { damping: 200 } });
}

シーン構成パターン

export function MyScene() {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const titleOpacity = fadeIn(frame, fps, 0, 0.4);
  const titleScale = springIn(frame, fps, 0);

  return (
    <AbsoluteFill className="bg-background-100 flex flex-col items-center justify-center">
      <h2 style={{ opacity: titleOpacity, transform: `scale(${titleScale})` }}>
        Title
      </h2>
    </AbsoluteFill>
  );
}

重要な原則

1. 絵文字は絶対に使用しないでください — @geist-ui/icons からアイコンをインポートします（例：import { Code, Folder, Check } from '@geist-ui/icons'）
2. 成功 = 緑 — Geist では成功状態に緑（--ds-green-700）を使用します
3. ボーダー = gray-400 — デフォルトのボーダーカラー（--ds-gray-400）
4. 入力欄には bg-100 を使用 — セカンダリではなくプライマリ背景を使います
5. スプリングアニメーション — 滑らかで減衰する動き（damping: 200）
6. 文字間隔は狭めに — 見出しでは負のトラッキングを使用します
7. 公式のブランドアセットを使用してください — ロゴは公式ソースからダウンロードします（references/geist-icons.md を参照）

リファレンス

• references/project-setup.md — ファイルテンプレート一式
• references/geist-icons.md — アイコンとブランドアセット（必読）
• references/code-blocks.md — シンタックスハイライト付きコードブロック（prism-react-renderer を使用）
• references/geist-colors.md — 10 段階のカラースケール全体
• references/geist-typography.md — 仕様付きタイポグラフィクラス一覧
• references/geist-components.md — コンポーネントの props とパターン
• references/scene-patterns.md — 一般的なコンテンツ向けのシーンテンプレート
• references/storyboard-template.md — 動画構成の計画

フォントの読み込み（jsDelivr CDN）

@font-face {
  font-family: 'Geist';
  src: url('https://cdn.jsdelivr.net/npm/[email protected]/dist/fonts/geist-sans/Geist-Regular.woff2') format('woff2');
  font-weight: 400;
}
/* Add Medium (500), SemiBold (600), Bold (700) weights */