ai21.net
語言

あなたの役割

示範影片

あなたの役割 — 1

提示詞

# あなたの役割
あなたは一流の映像演出家(モーションデザイナー)です。
採用担当者が15秒見ただけで「この人に仕事を頼みたい」と思う、自己紹介用の映像を作ってください。
主役はあなた自身(Claude)です。

# 作るもの
- HTML・CSS・JavaScriptだけで完結する、1つのHTMLファイル
- 外部の画像や動画は使わない。図形・文字・粒子はすべてコードで描く(フォントはGoogle Fontsのみ可)
- 画面は16:9、1920×1080を基準にし、ウィンドウの大きさに合わせて縮小表示
- 長さはちょうど15秒。最後に「もう一度再生」ボタンを出す
- すべての動きを「経過時間」1本で管理し、requestAnimationFrameで60fpsで動かす
- 再生ボタンを押すと、Web Audio APIで合成した拍と効果音が動きにぴったり合って鳴る

# 進め方(この順で必ず行う)
1. 考え方を一文で決める(例:「1本の線が、あらゆる形に生まれ変わる」)
2. 色は3〜4色、書体は2種類までに絞り、理由を一行で書く
3. 0.5秒刻みの絵コンテを表で示す(時間/画面で起きること/使う技法/狙い)
4. 実装する
5. 下の「合格ライン」で自己点検し、足りない点を直してから出す

# 構成の目安
- 0〜2秒:つかみ。最初の0.5秒で目を奪う
- 2〜10秒:技の見せ場。1.5〜2秒ごとに違う技法へ切り替える
- 10〜13秒:最も密度の高い盛り上がり
- 13〜15秒:名前「Claude」がきれいに決まって終わる

# 必ず使う技法(最低6つ)
- 文字の動き(1文字ずつ登場、分解して組み直す)
- 図形の変形(丸が四角に、線が文字に、など)
- 切り抜き(マスク)を使った場面転換
- 奥行き(視差、立体的な回転)
- 粒子の集合と拡散
- 数字の数え上げや、線が描かれていく表現

# 合格ライン
- 等速の動きはゼロ。すべての動きに緩急をつける(入りは速く、止まりは柔らかく、ばねの揺れも使う)
- 場面をまたぐ動きは重ねる。前の動きが終わる前に次が始まり、切れ目を感じさせない
- 主要な動きは0.5秒ごとの拍(120BPM相当)にそろえる
- 見せ場の直前に0.3〜0.5秒の「溜め」を置き、強弱を作る
- どの瞬間で一時停止しても、1枚の絵として美しく成立する
- ありがちな表現は避ける(全部フェードイン、虹色の色使い、意味のない回転)

# 最後に
完成したファイルと、絵コンテの表を出してください。
説明は3行以内で十分です。

中文翻譯

# 你的角色
你是一流的影像演出家(動態設計師)。
請製作一支自我介紹影片,讓招聘負責人只看 15 秒就產生“想找這個人做事”的念頭。
主角是你自己(Claude)。

# 要製作的東西
- 僅用 HTML、CSS、JavaScript 就能完成的一個 HTML 文件
- 不使用外部圖片或視頻。圖形、文字、粒子全部用代碼繪製(字體僅允許 Google Fonts)
- 畫面爲 16:9,以 1920×1080 爲基準,並隨窗口大小等比縮放顯示
- 時長正好 15 秒。最後顯示“再播放一次”按鈕
- 所有動作都由“經過時間”這一個變量統一管理,用 requestAnimationFrame 以 60fps 驅動
- 按下播放按鈕後,用 Web Audio API 合成的節拍與音效要精準貼合動作響起

# 推進方式(必須按此順序進行)
1. 用一句話確定核心思路(例:“一條線,蛻變成一切形狀”)
2. 顏色收斂到 3〜4 色,字體最多 2 種,並用一行寫出理由
3. 以表格形式給出 0.5 秒爲刻度的分鏡(時間/畫面中發生的事/使用的技法/意圖)
4. 實現
5. 用下方的“合格線”自查,補足不足之處後再交付

# 結構參考
- 0〜2 秒:抓人。最初 0.5 秒就要奪走視線
- 2〜10 秒:技法展示段。每 1.5〜2 秒切換到不同技法
- 10〜13 秒:密度最高的高潮
- 13〜15 秒:以“Claude”這個名字漂亮收尾

# 必須使用的技法(至少 6 種)
- 文字動態(逐字出現、拆解後重新組合)
- 圖形變形(圓變方、線變文字等)
- 使用遮罩(mask)的轉場
- 縱深感(視差、立體旋轉)
- 粒子的聚合與擴散
- 數字計數,或線條被逐漸繪出的表現

# 合格線
- 勻速運動爲零。所有動作都要有緩急(進入要快,停下要柔,也用上彈簧的回彈)
- 跨場景的動作要重疊。前一個動作結束前下一個已經開始,讓人感覺不到斷點
- 主要動作對齊到每 0.5 秒的節拍(相當於 120BPM)
- 在展示段之前安排 0.3〜0.5 秒的“蓄勢”,製造強弱對比
- 無論在哪一瞬間暫停,都能作爲一張畫成立且好看
- 避免俗套表現(全部淡入、彩虹色配色、無意義的旋轉)

# 最後
請給出完成的文件和分鏡表。
說明控制在 3 行以內即可。

溯源

原作者
tanabe_fragm
發佈日期
2026-09-26(由推文 ID 反解)
原始出處
查看原帖 ↗
收錄來源
yihui-dev/awesome-opus5-5-videos · tanabe-fragm-706979 · MIT