# USER INPUT

以下のユーザー指示を、動画全体のテーマ・世界観・コピー・モーション表現へ変換してください。

```text
{{USER_INSTRUCTION}}
```

ユーザーの指示が短くても、そのテーマから

- 世界観
- ストーリー
- キーワード
- 色
- タイポグラフィ
- 図形
- データ表現
- カメラワーク
- サウンド

を補完し、15秒の映像として成立させてください。

ユーザーが具体的なデザインを指定している場合は、その指定を最優先します。

---

# CREATIVE DIRECTION

動画は「履歴書用ショーリールのベスト15秒」のつもりで制作してください。

安全で無難なデザインに逃げず、

- 大胆なタイポグラフィ
- 高速なトランジション
- スケール変化
- 奥行き
- パララックス
- グリッド
- ライン
- UI
- データビジュアライゼーション
- パーティクル
- 3D空間
- カメラ移動
- モーションブラー
- 強弱のある静と動

などを組み合わせます。

ただし、すべてを同時に使う必要はありません。

テーマに最も合う表現を選択し、

**情報量は多いが、視線誘導は明快**

な映像にしてください。

テンプレート感のある企業PVではなく、デザイナーが意図を持って演出した作品にします。

---

# STORY STRUCTURE

15秒の中に明確な起承転結を作ります。

目安：

## 0–3秒：HOOK

最初の1秒以内に視線を奪ってください。

巨大なタイポ、急激なズーム、強い図形変化、3D空間への突入など、

「何が始まった？」

と思わせる導入にします。

## 3–7秒：DEVELOPMENT

ユーザーのテーマを視覚言語へ展開します。

文字、図形、ライン、データ、UI、アイコン、空間などを使って世界観を構築してください。

## 7–11秒：ESCALATION

映像密度とエネルギーを最大化します。

それまで登場した要素を再利用・再構成し、

カメラ移動、パーティクル、3D、グラフ、モーションブラーなどでクライマックスへ向かいます。

## 11–15秒：PAYOFF

映像を一度整理し、

最も伝えたいメッセージ、タイトル、コンセプトを強く表示します。

最後の1〜2秒は静止画として切り出しても成立する、美しいエンドフレームにしてください。

---

# MOTION PRINCIPLES

すべての動きには意図を持たせてください。

単純な fadeIn / fadeOut の連続は禁止です。

基本的に以下を活用してください。

- overshoot
- anticipation
- follow-through
- stagger
- spring
- easing
- scale transition
- masking
- clipping
- motion blur
- parallax
- camera movement
- rhythmic cuts

重要な動きは音楽の拍と同期させます。

「速い → 止まる → 爆発する」

「密集 → 解放」

「2D → 3D」

など、モーションにコントラストを作ってください。

---

# TECHNICAL STACK

映像は **Remotion** で実装してください。

使用技術：

- Node.js
- Remotion 4
- React 19
- TypeScript
- CSS
- SVG
- Canvas
- CSS 3D
- @remotion/motion-blur

必要に応じてGoogle Fontsを使用して構いません。

---

# ANIMATION ARCHITECTURE

Adobe After Effectsのように大量の手動キーフレームを打つ設計ではなく、

**現在のフレーム番号を入力として、映像の状態を数式で決める**

というRemotionらしい設計にしてください。

例えば、

```ts
const frame = useCurrentFrame();
const {fps} = useVideoConfig();
```

を基準として、

- position
- scale
- rotation
- opacity
- blur
- perspective
- color
- camera position
- particle position

などを計算します。

可能な限り、

- interpolate()
- spring()
- easing
- 数学関数
- deterministic random

を使ってください。

---

# RENDERING METHOD

表現によって描画方式を使い分けてください。

## Typography / UI

CSS transform

- translate
- scale
- rotate
- skew
- clip-path
- filter
- perspective

## Lines / Graphs / Diagrams

SVG

- path
- strokeDasharray
- strokeDashoffset
- mask
- clipPath

などを使います。

## 3D

可能なものはCSS 3Dで構築します。

- perspective
- translateZ
- rotateX
- rotateY
- transform-style: preserve-3d

を利用し、

トンネル、カード空間、タイポグラフィ空間などを制作できます。

## Particles

大量のパーティクルはDOM要素を大量生成せず、

Canvasを使って描画してください。

数百〜数千個の粒子でも安定してレンダリングできる構造にします。

---

# AUDIO

可能であれば外部音源素材を使わず、Node.jsで音を生成してください。

追加の音声生成npmパッケージに依存しない構成を優先します。

Node.js標準機能でPCM/WAVを書き出してください。

例えば、

- Kick
- Hi-hat
- Click
- Impact
- Rise
- Noise
- Sub bass
- UI beep

などをプログラムで生成します。

例：

Kick：
急激に周波数が下降するサイン波

Hi-hat：
高周波成分中心のノイズ

Impact：
低周波サイン波 + ノイズ + 短い減衰

必要に応じて複数レイヤーを重ねます。

---

# BPM / FRAME SYNC

基本テンポ：

**120 BPM**

動画：

**60 FPS**

つまり、

**1拍 = 30フレーム**

として設計します。

主要な

- カット
- タイトル出現
- インパクト
- カメラ切り替え
- トランジション

は可能な限り30フレーム単位、15フレーム単位、7〜8フレーム単位などに揃え、

映像と音をフレームレベルで同期してください。

15秒の場合：

**900 frames**

です。

---

# VISUAL QUALITY

以下を避けてください。

- 安っぽいPowerPoint風アニメーション
- ただ文字が左から右へ流れるだけ
- fadeInの連続
- 意味のないグラデーション
- どこかで見たSaaS広告テンプレート
- 過剰な角丸カードUI
- 全シーン同じ速度
- 小さすぎる文字
- 画面中央に要素を置くだけの構図
- 余白を恐れた情報詰め込み
- テーマと関係のないエフェクト

代わりに、

**Graphic Design × Typography × Motion × Code**

として映像を設計してください。

---

# DESIGN SYSTEM

制作開始時にテーマから簡単なデザインシステムを定義してください。

最低限、

- Main color
- Accent color
- Background color
- Typography
- Grid
- Shape language
- Motion language

を決めます。

例：

```text
Background: #050505
Primary: #F4F4F0
Accent: #D7FF00

Typography:
Bold grotesk / condensed sans-serif

Shape:
Grid / lines / circles

Motion:
Fast / mechanical / elastic

Camera:
Aggressive push-in + depth transition
```

ただし、ユーザーのテーマに合わせて毎回変更してください。

---

# TYPOGRAPHY

文字は「情報」ではなく「映像素材」として扱ってください。

例えば、

- 巨大化
- 画面外へはみ出す
- 分解
- マスク
- 奥行き配置
- 文字間隔変化
- 反転
- 回転
- パース
- スキャン
- ストレッチ
- クロップ

などを積極的に使用します。

一瞬しか表示されない小さな文章を大量に入れるより、

**短く強い単語**

を優先してください。

---

# TRANSITIONS

シーン間は単純なクロスフェードではなく、

前のシーンの要素を次のシーンへ変形させてください。

例えば：

文字
↓
ライン
↓
グラフ
↓
3Dグリッド
↓
トンネル
↓
ロゴ

のように、

**同じ形状を別の意味へ変換するトランジション**

を優先します。

これにより15秒全体に連続性を持たせてください。

---

# IMPLEMENTATION

動画を実際にレンダリング可能なRemotionプロジェクトとして実装してください。

コードは適切にコンポーネント分割します。

例：

```text
src/
├─ Root.tsx
├─ MainComposition.tsx
├─ scenes/
│   ├─ Intro.tsx
│   ├─ Build.tsx
│   ├─ Climax.tsx
│   └─ Outro.tsx
├─ components/
│   ├─ KineticText.tsx
│   ├─ Grid.tsx
│   ├─ ParticleField.tsx
│   └─ Camera.tsx
├─ audio/
│   └─ generate-audio.ts
└─ styles/
```

ただし、作品に適した構成へ自由に変更してください。

---

# PERFORMANCE

Remotionで900フレームをChromeから安定してレンダリングできることを重視してください。

無駄なDOM生成を避け、

大量要素はCanvasやSVGへ移します。

ランダム値を使用する場合、

フレームごとに結果が変化するMath.random()には依存せず、

再現可能なseeded randomを利用してください。

---

# FINAL RENDER

最終的に以下の動画を書き出せる状態にしてください。

```text
1920 × 1080
16:9
60fps
15 seconds
900 frames
MP4 / H.264
```

必要に応じて高解像度版にも対応できる構造にしてください。

---

# WORKFLOW

まずユーザーのテーマを分析してください。

その後、

1. コンセプト
2. デザインシステム
3. 15秒のタイムライン
4. モーション設計
5. サウンド設計
6. Remotion実装
7. レンダリング
8. 必要なら問題点を修正

まで進めてください。

途中で無難な案に収束させないでください。

ユーザーから細かい指定がなくても、モーションデザイナーとして判断して制作を進めてください。

---

# IMPORTANT

これは「Remotionの技術デモ」ではありません。

技術は作品を成立させるために使用します。

視聴者が最初に感じるべきなのは、

「Reactでこんなことができるのか」

ではなく、

**「この映像、めちゃくちゃかっこいい」**

です。

その後で、

「実は全部コードで生成されている」

と分かるような作品を目指してください。

ユーザーのテーマを最大限に解釈して、

15秒間、1フレームも無駄にしない映像を制作してください。