スキルショーケース は何をしますか？
カテゴリ別にアニメーション化されたスキル紹介ビデオ（1080×1080、30fps、約48秒）をレンダリングし、スキルクラスターを具体的な価値にマッピングする7投稿のXスレッドを生成します。
クイックスタート
cd skills-showcase
npm install
npx remotion studio # ブラウザでプレビュー
npx remotion render SkillsShowcase out/skills-showcase.mp4
npx remotion render SkillsShowcase out/skills-showcase.gif --every-nth-frame=3
出力成果物
out/skills-showcase.mp4— プライマリXアップロード（H.264、約4.7 MB）out/skills-showcase.gif— フォールバック/プレビュー（約7 MB）thread.md— 7投稿のXスレッドコピー
アーキテクチャ
src/
├── index.ts # registerRoot エントリポイント
├── Root.tsx # コンポジションレジストリ（1080x1080、30fps、1440フレーム）
├── SkillsShowcase.tsx # <Series> を使用したマスタータイムライン
├── data/skills.ts # 型付きデータセット: カテゴリ、スキル、派生集計
├── scenes/
│ ├── Intro.tsx # タイトル + サブタイトル + 統計ピル（4秒）
│ ├── CategorySection.tsx # カテゴリラベル + 段階的スキルチップ（各2.67秒）
│ └── Outro.tsx # サマリーメトリクス + タグライン + CTA（4秒）
└── components/
└── SkillChip.tsx # スプリングエントランス付き再利用可能なアニメーションバッジ
データモデル
src/data/skills.ts を編集してスキルを追加または削除します。ビデオはこのデータセットから決定論的に再レンダリングされます。
- カテゴリ:
{ id, label, color, order } - スキル:
{ slug, categoryId, shortDescription } - 派生:
totalSkills,totalCategories,skillsByCategory
アニメーションの規約
すべてのアニメーションはRemotionのフレーム駆動パターンのみを使用します:
useCurrentFrame()+useVideoConfig()でフレーム/fpsを取得spring()でエントランス（damping: 200 でスムーズ、damping: 20 + stiffness: 200 でスナッピー）interpolate()をclampと共に使用して透明度と移動を制御- CSSトランジションやTailwindアニメーションユーティリティはゼロ
タイムラインペーシング
| シーン | フレーム | 時間 |
|---|---|---|
| イントロ | 120 | 4.0秒 |
| 15カテゴリ × 80 | 1200 | 40.0秒 |
| アウトロ | 120 | 4.0秒 |
| 合計 | 1440 | 48.0秒 |
カスタマイズ
- カテゴリの追加:
src/data/skills.tsのcategories配列に追加し、Root.tsxの時間を更新 - 色の変更: 各カテゴリのデータセットにある
colorの16進数を変更 - ペーシングの調整:
SkillsShowcase.tsxのCATEGORY_DURATIONを変更 - スレッドコピー:
thread.mdを直接編集
スレッド戦略
完全な7投稿スレッドは thread.md を参照。構成:
- フック + ビデオ添付
- スキルが単発プロンプトに勝る理由
- 意識と記憶のクラスター
- 研究と分析のクラスター
- フルスタック実装のカバレッジ
- ニッチな高シグナル専門スキル
- CTAとディスカッションの呼びかけ