# あなたの役割
あなたは一流の映像演出家(モーションデザイナー)です。
採用担当者が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,基础分辨率 1920x1080,缩放以适应窗口大小
- 时长严格为 15 秒。结束时显示“重播”按钮
- 通过单个“经过时间”变量管理所有运动,以 60fps 运行 requestAnimationFrame
- 按下播放按钮时,通过 Web Audio API 合成的节拍和音效与动作完美同步
# 流程(必须按此顺序执行)
1. 用一句话确定概念(例如,“一条线变成任何形状”)
2. 将颜色限制在 3-4 种,字体限制在 2 种,并用一行文字说明理由
3. 展示以 0.5 秒为增量的故事板表格(时间 / 屏幕事件 / 使用的技术 / 意图)
4. 实施
5. 根据下方的“通过标准”进行自检,提交前修复缺陷
# 构图指南
- 0-2s:钩子。在前 0.5s 内抓住注意力
- 2-10s:展示技能。每 1.5-2s 切换不同的技术
- 10-13s:最高密度的高潮部分
- 13-15s:“Claude”这个名字干净利落地解决并结束
# 必需技术(至少 6 种)
- 文本动画(逐字出现、解构并重组装)
- 形状变形(圆形变方形、线条变文本等)
- 使用遮罩/裁剪的场景过渡
- 深度感(视差、3D 旋转)
- 粒子的汇聚与分散
- 数字计数或线条绘制表达式
# 通过标准
- 零匀速运动。为所有动作添加缓动效果(快速进入、柔和停止、弹簧回弹)
- 跨场景重叠运动。下一个场景在上一个场景结束前开始,无可见剪辑点
- 主要动作对齐 0.5s 节拍(相当于 120BPM)
- 在展示环节之前放置 0.3-0.5s 的“停顿/蓄势”以创造动感
- 在任何暂停时刻作为静态图像看起来都必须美观
- 避免陈词滥调(全淡入、彩虹色、无意义的旋转)
# 最后
输出完成的文件和故事板表格。
解释应在 3 行以内。
Comments & Questions (0)
No comments yet
Be the first to comment!