Motion Skills
← Skills
Premium解説

マイルストーン・タイムライン

タイムラインが描かれ、その上にマイルストーンが現れます。

Claude Code、Codex、Cursor など Skill に対応したエージェントに貼り付けてください。

必要なもの: Node.js 22+、FFmpeg、Chrome。API キー不要。

ほかのテーマと画面比率

マイルストーン・タイムライン · エレクトリック · 9:16
テーマ: エレクトリック · 9:16
マイルストーン・タイムライン · インク · 1:1
テーマ: インク · 1:1

同じテンプレートをテーマと画面比率を変えてレンダリングした最終フレームです。

5つのテーマ

  • インク
    ink
  • ペーパー
    paper
  • エレクトリック
    electric
  • ノワール
    noir
  • サンド · デフォルト
    sand

プロンプトでテーマ名を指定するだけで切り替わります。アクセント色・背景色・文字色を自分で指定することもできます。

インストール用プロンプト
https://claude-motion.com/skills/milestone-timeline/install.md を読んで手順どおりに「milestone-timeline」スキルをインストールし、それを使って最初の動画を作ってください。

Claude Code、Codex、Cursor など Skill に対応したエージェントに貼り付けてください。

プロンプト例
Use the milestone-timeline skill: title "Product history", milestones "v1: Text only | v2: Images | v3: Video | v4: Motion skills", now "Now". Ink theme, 9:16.
スタイルプロンプト(Claude Motion または Opus 5.5)
Make an 8-second 16:9 timeline for [who will watch, e.g. new hires and investors], playing [where, e.g. the about page and the onboarding deck]. Use only the years and milestones below; don't change a date. Sand background.

A serif title appears. A thin dark line draws from left to right. As it reaches each point, a hollow dot pops and a milestone appears, alternating above and below the line. End frame: the final milestone with an orange dot and a small orange "Today" pill that pulses.

Title: [e.g. "How we got here"]
Milestones: [year — one line each, 4 to 5] (e.g. "2022 — Two founders, one laptop" … "2026 — 1M creators")

インストール不要:Claude Motion(Team または Enterprise)に貼り付けるか、Opus 5.5 に渡すと近い雰囲気になります。結果は実行ごとに変わります。Skill なら毎回同じ結果です。

このシリーズの他の Skill

チャプター →