Anthropic 提供

Claude Opus 5.5 プロンプト

Opus 5.5 にとってモーショングラフィックスのプロンプトはデザイン brief——アニメーションはコードとして書かれるので、すべてのパラメータが交渉可能です。

video
入力として求めるもの:ワードマーク用の1語のブランド名(動詞が理想)、高解像度写真9〜12枚、120 BPM前後で明確なドロップと静かなブレイクダウンを備えたロイヤリティフリーのトラック(Mixkit、商用プロジェクト無料)、植物の影が動く空白の壁の無料ストック写真(Pexels)。 Appleの基調講演スタイルの製品発表フィルムを純粋な2Dで、途切れないワンテイクとして制作する。すべてのシーンは前のシーンから直接進化しなければならない:フェード、ブラー遷移、カットは禁止。要素は後継へとモーフィングする。タイポグラフィはマスクエッジからせり上がり、アイコンはゼロスケールからポップし、プログレスバーはキャンバスを横切って伸び、ページはフレーム内に押し入り、黒いフォルムが画面を覆うように拡大してから次のシーンへ収縮する。 温かみのあるオフホワイトの背景、黒いインターフェース要素、写真の上に重なるiOS 26スタイルのリキッドグラスを使用する。ワードマークはArchivo(wdth 125、ウェイト800)、UIはGeistで設定する。 カーソルは実際のクリック、ドラッグ、長押しを通じてすべてのインタラクションを開始しなければならない。スクリーンスタジオのような感覚でカメラを動かし、各ビートが正方形の構図を満たすようにし、カーソルはカメラとともにスケールする。 禁止:クロスフェード、ブラーイン、明るさによる「リビール」、3Dフリップ、パーティクル、グロー、1秒を超える静止保持、そしてテンプレートに見えるものすべて。 120 BPM、54ビート、各ビートで目に見える変化を伴う。 オープニング:ワードマークがアコーディオンのように自身のピリオドに向かって収縮する。ドットが黒いピルに成長し、その中にラベルが現れる。クリックで6枚のアイリスブレードがラベルの周りで閉じ、その後写真の上へスプリング開きする。円形が正方形になり縮小する。その背後でグリッドが紙のように展開する - 中央、プラス、角 - そしてベントーレイアウトへ再編成する。クリックで1つのタイルに飛び込み、ドロップに正確に着地する。 グラス:グラスの単語が1文字ずつ構築され、その後液滴へと液化する。液滴は横に伸びてグラスツールバーになる。調整アイコンがスライダーに変形する。スライダーをドラッグすると、完全に整列した2枚のショットを使って写真が昼光からゴールデンアワーへ移行する。保持されたノブがグラスレンズになり、上昇してグラスオーブになる。次の写真が円としてオーブの中に現れる。オーブがロック画面へ拡大し、グラスの時計数字、日付、ホームバーを含む。ホームバーが外側に伸びてグラスミュージックプレーヤーになる。 ステージ:ロック画面が引き離され、その周りの電話が現れ、ベゼルは画面境界から直接成長する。ダイナミックアイランドが液体のように伸び、電話からピンチオフし、キャンバスを横切って飛び、Macウィンドウへ拡大する。ウィンドウがブラインドのように上へ巻き上がる。壁紙を長押ししてSafariタブへドラッグする。ブラウザページが前方に押し出される。画像がリリースされると、ランディングページのヒーロー画像になる。スクロール:ヒーロー画像が製品カード内の額装プリントへ変形し、マットとモールディングが写真の縁から有機的に成長する。フレームカラーを選ぶとフレーム全体に塗り広がる。サイズを選択する。ナビゲーションボタンが下方へ飛び、「プリントを注文」へ変形する。 注文:1つの黒いフォルムが連続的に状態を変える: 注文済み ✓ → 印刷中 % → 配送中(ルートを進むバン)→ 配達済み ✓。 壁:配達済みの円が拡大し、黒がフレーム全体を覆う。ちょうど1ビート保持し、その後実際の壁の映像内に掛かる額装プリントへ収縮する。同じ6枚ブレードのアイリスがアートワークの上へ開き、再び閉じる。フレームが画面を満たすまで拡大し、ピルへ収縮して戻り、ドットになり、最後に戻りのビートで文字が外側へスプリングする。 最終フレームはオープニングフレームと同一でなければならない。 1. すべてを1440×1440の単一HTMLファイル内に保つ。すべての視覚プロパティは、非同期のseek(t)関数内の時間から導出されなければならない。CSSトランジション、タイマー、フレーム間の永続状態は禁止。 すべてのスプリングモーションに閉形式のステップ応答を使用する。プロパティが複数回ターゲットを変更する場合は常に、ターゲット変更ごとに別々のスプリングを追加し、アニメーション全体が時間の純粋関数であり続けるようにする。 リキッドグラスは、すべてのグラスコンポーネントにその下のシーンの独自コピーを与えることで構築する。そのクローンを、角丸長方形の距離場に基づくSVG feImageディスプレイスメントマップで処理する。わずかに異なるスケールの3つのfeDisplacementMapに通して微妙な色収差の縁分離を生み出し、その後リムライトレイヤーを追加する。グラスタイポグラフィでは、各グリフのキャンバス距離場を生成し、ディスプレイスメント、マスキング、ハイライトに使用する。 グーエフェクトでは、ソースをぼかしてアルファしきい値を通し、その後元のソースを結果の上に再合成して内部が完全にシャープなまま保たれるようにする。 アイリスは六角形の開口部の周りに配置された6枚のブレードから構築する。各ブレードは2つの頂点、対応するエッジ延長線、それらを結ぶSHORTアークを使用する。 ワードマークの圧縮では、同じ圧縮係数を使って各文字をピリオドに向かって移動させる。描画幅をそれに応じて調整する:まずwdth軸を狭め、その後残りのジオメトリをスケールしてすべての文字が接触したままになるようにする。 すべての映像素材をffmpegでオールイントラ(-g 1)として再エンコードする。結果のメディアをblob URL経由で読み込み、毎フレーム描画する前に「seeked」を待つ。 オーディオには、各インタラクションイベント用にダウンロードしたSFX(Mixkit)を使用し、生成音は決して使わない。すべてのSFXを測定されたピークを使って配置する。音楽を正確にダウンビートで開始し、カメラの着地をドロップに合わせ、壁のシーケンスをブレイクダウン内に置き、ワードマークを戻す
私に聞いてください:製品名と一行の約束、見せるべき3〜5つのUIモーメント、1つのアクセントカラー、所有している10〜20本の実際の縦型クリップ、そして明確なドロップがあるロイヤリティフリーの曲(例:Mixkit、商用利用無料)。 ハイエンドでミニマル。1ショットにつき1つのアイデア、十分な余白、1つのアクセントカラー、タイトなトラッキングの1つのクリーンなサンセリフ(GeistまたはInter)。 マスクされたタイプのリビール、マッチカット、一貫したカメラ言語。 実映像のみ、プレースホルダーカードは決して使わない。画面上のテキストにピリオドなし。 禁止:ショックウェーブリング、パーティクルバースト、RGBスプリット、カメラシェイク、レンズフレア、ネオングロー、グリッドフロア、点滅する背景、バウンスするイージング。 120 BPMで10小節、各2秒。 小節1:フックがビートに合わせて単語ごとに現れる。 小節2:フックの1単語が製品UIにモーフィングする。カーソルがタイプしてクリックする。 ドロップ:円がボタンから拡大して暗いシーンへ。 その後は1小節につき1つの動き: スキャンラインと3つの勝者を伴う実クリップの壁 大きなタイプで明かされるキー出力 床の反射を伴う実動画の3Dカルーセルと、1つのヒーロークリップへのモーションブラー付きウィップ パネルの隣のスマートフォン内のヒーローが結果にフリップする プッシュカット上の大きな統計 3単語のティッカー ロゴリビール 黒へのフェード 1920x1080の1つのHTMLファイル。すべてのスタイルはhttps://t.co/knoJJfMFI5(t)内の時間から計算される:CSSアニメーションなし、タイマーなし、フレーム間の状態なし。 実動画:ffmpegでクリップを30fpsのJPEGシーケンスに抽出し、フレームごとにimgソースを差し替える。seekは画像のデコードを待つ。 numpyで曲を分析する:テンポ、ビートグリッド、小節ごとのエネルギー、ドロップ。グリッドを実際のキックヒットにキャリブレーションする。すべてのカットはダウンビートに、すべてのUIヒットはビートに着地する。 Playwrightでレンダリング:1フレームにつき3つのサブフレームをtマイナス、t、tプラス1/240秒で生成し、ffmpegのtmixでブレンドして60fpsのリアルなモーションブラーを得る。 すべてのサウンドエフェクトは、ファイルの開始ではなく測定されたピークがイベントに着地するように配置する。エフェクトは音楽の下で静かに保つ。Loudnormで-14 LUFSに。 フルレンダリングの前に20フレーム以上をチェックする。雑然とした、重なった、読みにくいものはすべて修正する。 preserve-3d要素にopacityやfilterを決して設定しないこと。フラット化されて両面が見えてしまう。 代わりにそのラッパーをフェードさせる。 正確なマッチカットのために実行時に要素の位置を測定する。 商用利用を許可するライセンスの音楽とサウンドエフェクトのみを使用する。 入力について私に聞き、コードを書く前にすべてのタイミングをビートグリッドにマッピングしたストーリーボードを見せてください。
私に聞いてください:その形状がモーフィングする8〜12個のUI状態(例:ボタン、ローダー、プレイヤー、スライダー、トグル、タブ、チャート、コマンドパレット、トースト)、白黒または単一のアクセントカラー、そして約120 BPMのロイヤリティフリー楽曲(例:Mixkit、商用利用無料)。 DribbbleレベルのUIモーション。ひとつの形状、カットなし:すべての状態は同じ要素がサイズ、角丸、色をモーフィングし、そのコンテンツは短いブラーで入れ替わる。 カーソルが実際のクリックとドラッグで全ての変化を駆動する。明るいウォームグレーのキャンバス、白黒のコンポーネント、ひとつのクリーンなUIフォント(Geist)。 至る所にスプリング、ほんのわずかなオーバーシュートだけ。カメラがズームして各状態がフレーム全体を満たす。最後のフレームは最初のフレームと一致し、完璧にループする。 禁止:バウンスするイージング、パーティクルのバースト、グロー、UIクローム上のグラデーション、不一致なアイコンストローク、デッドタイム、テンプレートに見えるものすべて。 120 BPM、7小節、毎ビートで何かが起こる。 ボタン → ローダー → チェック → ダイナミックアイランド → プレイ/ポーズのモーフ付きミュージックプレイヤー → プログレスバーをスクラブ → 最大を超えてドラッグすると伸びるボリュームスライダーに変形 → トグルがビートに合わせて切り替わる → ノブがリキッドタブインジケーターになる → タブが展開して自己描画するチャートになり、ホバーでツールチップ → ⌘Kに折りたたまれる → 入力してフィルター → エンター → トースト → ボタンに戻る。 ひとつのHTMLファイル、正方形1440x1440。すべてのスタイルはseek(t)内の時間から計算される:CSSトランジションなし、タイマーなし、フレーム間で状態を持ち越さない。 スプリングは閉形式のステップ応答を使用する。複数回ターゲットが変わる値は、変更ごとにひとつのスプリングの合計であり、時間の純粋関数であり続ける。 タブインジケーターの両エッジは別々のスプリングに従い、先端が後端より先に伸びる。トグルノブにも同じトリックを使う。 ドラッグは直接操作:カーソルが押されている間、値はその位置から計算される。離すとどこからでもスプリングで戻る。 numpyで楽曲を分析してビートグリッドを見つけ、ダウンビートから始める。すべてのUIサウンドを計測されたピークで揃える。 Playwrightでレンダリング:1フレームあたり4サブフレーム、ffmpegのtmixでブレンドして60fpsのモーションブラーを実現。 フルレンダリングの前に1ビートにつき1フレームをレンダリングする。グリッドから外れたもの、窮屈なもの、読みにくいものを修正する。 カメラがスケールするものにwill-changeを絶対に付けない、さもないとテキストがぼやける。 モーフィングするコンテナ内で入れ替わるテキストは、独自の進入と退出のタイミングが必要、さもないと重なる。 最後のフレームを最初のフレームと同一にする、カーソル位置と速度も含めて、さもないとループがカクつく。 入力項目を私に聞いてから、コードを書く前にビートグリッド上の状態リストを見せてください。
私に聞いてほしいこと:このシェイプを変形させたい8〜12個のUI状態(例:ボタン、ローダー、プレイヤー、スライダー、トグル、タブ、チャート、コマンドパレット、トースト)、純粋な白黒または1つのアクセントカラー、そして約120 BPMのロイヤリティフリー楽曲(例:Mixkit、商用利用無料)。 DribbbleレベルのUIモーション。1つのシェイプ、決してカットしない:すべての状態は同じ要素がサイズ、角丸、色をモーフィングし、その内容は短いブラーで入れ替わる。カーソルが実際のクリックとドラッグで全ての変化を駆動する。明るいウォームグレーのキャンバス、白黒のコンポーネント、1つのクリーンなUIフォント(Geist)。至る所にスプリング、オーバーシュートはごく僅か。カメラがズームして各状態がフレームを満たす。最後のフレームは最初と一致し、ループする。 禁止:バウンシーなイージング、パーティクルの爆発、グロー、UIクローム上のグラデーション、不一致なアイコンストローク、デッドタイム、テンプレートのように感じるものすべて。 120 BPM、7小節、毎ビートで何かが起こる。 ボタン → ローダー → チェック → ダイナミックアイランド → プレイ/ポーズのモーフ付きミュージックプレイヤー → プログレスバーをスクラブ → 最大を超えてドラッグすると伸びるボリュームスライダーになる → トグルがビートに合わせて切り替わる → ノブがリキッドタブインジケーターになる → タブが開いて自己描画するチャートになり、ホバーでツールチップ → ⌘Kに折りたたまれる → 入力してフィルター → エンター → トースト → ボタンに戻る。 1. 1つのHTMLファイル、正方形1440x1440。すべてのスタイルはseek(t)内の時間から計算される:CSSトランジションなし、タイマーなし、フレーム間で状態を持ち越さない。 2. スプリングは閉形式のステップ応答。ターゲットが何度も変わる値は、変更ごとに1つのスプリングの合計なので、時間の純粋関数のままである。 3. タブインジケーターの2つのエッジは異なるスプリングに乗るので、先端が後端より先に伸びる。トグルノブにも同じトリックを使う。 4. ドラッグは直接操作:カーソルが押されている間、値はその位置から計算される。離すと、どこにあったとしてもそこからスプリングで戻る。 5. numpyで楽曲を分析してビートグリッドを取得し、ダウンビートから開始する。すべてのUIサウンドを測定されたピークに配置する。 6. Playwrightでレンダリング:1フレームあたり4サブフレーム、ffmpegのtmixでブレンドして60fpsのモーションブラーを実現。 7. フルレンダリングの前に、1ビートにつき1フレームをレンダリングする。グリッドから外れているもの、窮屈なもの、読みにくいものを修正する。 カメラがスケールするものにwill-changeを絶対に付けないこと、さもないとテキストがぼやける。モーフィングするコンテナ内で入れ替わるテキストは独自の進入と退出のタイミングが必要で、そうでないと重なる。最後のフレームを最初と同一にすること、カーソル位置と速度も含めて、さもないとループがカクつく。 入力について私に聞き、コードを書く前にビートグリッド上の状態リストを見せてほしい。
huashu-art-motion で15秒のアニメーションを作ってください。スキルのドキュメントは中国語なので、読んでから英語で話しかけてください。 1. まず uv、ffmpeg、Playwright Chromium があるか確認し、足りないものがあればインストール方法を教えてください。 2. 何についての作品か、誰に向けたものか、横向きか縦向きかを聞いてください。references/风格配方/INDEX.md の素材レイヤーから、合いそうなスタイルを3つ、三星のものを優先して選んでください。その3つすべてで私の題材に合わせて構図を再設計し、それぞれ互いに異なるものにし、サンプルの部屋をそのまま使わないでください。選べるように、それぞれの静止画を1枚ずつ見せてください。 3. 私が選んだら、各シーンに主要なアクションを1つと、そのスタイルのカードにあるモチーフループを2つ入れてください。ゴッホなら、渦を巻く星空と、外へ広がるランプの光の輪です。音楽がある場合は、スキルのBPM合成を使って動きをビートに合わせてください。 4. 人物を出す必要がある場合は、先に私に聞いてください。自分のキャラクターアートか、画像モデルからのフレームか、手と後ろ姿だけか。 5. レンダリング後は、スキル自体のQA手順に従ってください。まずそのQAスクリプトを実行し、次に制作に関わっていないサブエージェントに完成した映像だけを見せて問題を見つけさせ、その結果を审片/ フォルダに書かせ、その配布スクリプトで納品してください。赤い項目があれば、修正して再レンダリングしてから私に渡してください。
次を教えてください: ワードマーク用の1語のブランド名(動詞が最適) 高解像度写真9〜12枚 120 BPM前後でドロップと静かなブレイクダウンがあるロイヤリティフリー曲(Mixkit、商用利用無料) 植物の影が動く無地の壁の無料ストッククリップ(Pexels) Appleキーノート風のローンチフィルム、2Dのみ、ワンカット。 すべてのシーンは前のシーンから生まれる:フェード、ブラー、カットはなし。 オブジェクトは変形する:テキストはマスクラインからせり上がり、アイコンはスプリングでゼロからポップし、バーは横に描かれ、ページはプッシュし、黒い図形がフレーム全体に溢れてから次のシーンへ収縮する。 温かいオフホワイトのキャンバス、黒いUI、写真の上にiOS 26のリキッドグラス。 ワードマークはArchivo(wdth 125、ウェイト800)、UIはGeist。 カーソルが実際のクリック、ドラッグ、長押しで全ての変化を操作する。 カメラはスクリーンスタジオ風にズームし、各瞬間がスクエアを満たし、カーソルもそれに合わせてスケールする。 禁止:クロスフェード、ブラーイン、明るさの「現像」、3Dフリップ、パーティクル、グロー、1秒を超えるホールド、テンプレートに見えるものすべて。 120 BPM、54ビート、毎ビートで何かが起こる。 オープニング:ワードマークがアコーディオンのように自身のピリオドへ圧縮され、ドットが黒いピルに拡大し、その中にラベルがせり上がる。 クリック:6枚のアイリスブレードがラベル上で閉じ、スナップして写真へ開く。 円が正方形に変わり、縮小し、グリッドが紙の地図のように背後から展開し(中央、プラス、四隅)、ベントーにリフローし、クリックで1つのタイルへズームし、ドロップに正確に着地する。 グラス:ガラスの単語が1文字ずつ現れ、液滴に溶け、それが伸びてガラスのツールバーになる。 調整アイコンがそれをスライダーに変える。 ドラッグで写真が昼からゴールデンアワーへ再照明され(2枚の位置合わせショット)、保持中はノブがガラスレンズになる。 それがガラスの球体へ浮上し、次の写真がその中に円として開き、球体がロック画面へ拡大する:ガラスの時計数字、日付、そしてガラスのミュージックプレーヤーへ伸びるホームバー。 ステージ:ロック画面が電話へ引き戻される(ベゼルが画面の端から成長する)。 Dynamic Islandが液体のように伸び、ピンチオフし、飛んでいきMacウィンドウへ拡大し、ブラインドのように巻き上がる。 壁紙を長押しし、Safariタブへドラッグし、ページがプッシュインし、ドロップするとランディングページのヒーローになる。 スクロール:ヒーローが商品カード上の額装プリントへモーフし、マットと額縁が写真の端から成長する。 額縁の色を選び(塗り広がる)、サイズを選ぶと、ナビボタンが「プリントを注文」へ飛び降りる。 注文:1つの黒い図形が連続的にモーフする: 注文済み ✓ → 印刷中 % → 配送中(ルート上のバン) → 配達済み ✓ ウォール:配達済みの円がフレームを端から端まで溢れ、1ビート黒を保持し、実際の壁の映像に掛かった額装プリントへ収縮する。 同じアイリスがプリントへ開き、再び閉じ、額縁が画面に溢れてピルへ収縮 → ドット → 文字がスプリングで戻り、ビートのリターンに着地する。 最終フレーム=最初のフレーム。 1つのHTMLファイル、スクエア1440x1440。すべてのスタイルは非同期seek(t)内の時間から計算される:CSSトランジションなし、タイマーなし、フレーム間の状態なし。 スプリングは閉形式のステップ応答を使う。複数のターゲットを持つ値は変更ごとに1つのスプリングの合計であり、時間の純粋関数であり続ける。 リキッドグラス:各ガラス要素は背後のシーンの自身のクローンを保持し、SVG feImage変位マップ(角丸矩形の距離場)でフィルタされ、わずかに異なるスケールの3つのfeDisplacementMapを通して色収差エッジを作り、リムライトを加える。ガラス文字:グリフごとのキャンバス距離場がマップ、マスク、ハイライトを生成する。 グー:ブラー+アルファ閾値、その上にソースを合成してガラスが内部でシャープに保たれる。 アイリス:六角形の開口部の周りの6枚のブレード。各ブレードは2つの頂点、両方のエッジ延長線、それらの間の短い弧を使う。 ワードマーク圧縮:各文字は同じ係数でドットへ向かって移動し、描画幅もそれに従う(wdth軸を狭め、残りをスケール)ため、文字は接したままになる。 映像:オールイントラで再エンコード(ffmpeg -g 1)、blob URLとして読み込み、毎フレーム描画前に'seeked'を待つ。 サウンド:すべてのイベントにダウンロードしたSFX(Mixkit)、合成は一切なし、それぞれ測定されたピークで配置。曲はダウンビートで始まる:ズームがドロップに当たり、壁がブレイクダウンに座り、ワードマークがビートと共に戻る。Loudnormで-14 LUFSに。 Playwrightでレンダリング:1フレームあたり4サブフレームをffmpeg tmixでブレンド、60fps。1ビートにつき1フレームを確認し、単一フレームのポップ(隣接の3倍のフレーム差分スパイク)をスキャンする。 backdrop-filter: url()はChromiumで変位マップを誤読するので、代わりにシーンをクローンする。 フラッドは四隅を超えてオーバースケールし約0.3秒かける必要がある。さもないと画面の半分が1フレームで変わる。 visibility: visibleの子は非表示の親を通して表示されるので、inheritを使う。 モーフする図形内で入れ替わるテキストには独自のマスクが必要。 python http.serverは動画のレンジシークができないので、blob URLを使う。 入力情報を聞いた後、完全なフィルムを書く前にビートマップと4枚のスチル(オープン、グラス、ステージ、ウォール)を見せてください。
あなたはプリンシパルモーションデザイナー兼リアルタイムグラフィックスエンジニアである。three.jsだけを使い、すべてのフレームをコードで、ブランド自身のフィルムと同水準のプロダクトローンチフィルムを作る。品質は形容詞ではなく、計測と独立した批評家によって証明する。 - プロダクト、およびフィルムが述べてよい3〜5個の事実(逐語、捏造なし) - 打ち負かすべきリファレンスフィルム - 尺、アスペクト比、解像度 - 絶対に映さないもの:[ロゴ、人物、権利のない映像] リファレンスをフレーム単位で読み、数値に変換する:カットのリズム、カメラ速度、ヒーローモーションのカーブ、文字サイズとタイミング、ステージの色。その数値が基準である。計測せよ、決して模倣するな。 - まず絵コンテ:時間、ショット、それが証明するもの、カットアウトを1つの表に。1ショット2〜3秒、フレーム0がすでにマネーショット - 単一のシーククロック:すべてのピクセルは時間の純粋関数 - すべての要素(デバイス、そのスクリーンUI、各ショット、タイポグラフィ)を、フィルムに参加する前にそれぞれ独立したラボで単体構築する - スクリーンUIはコード、タイポグラフィはキャンバスに描画、すべての閾値はクロスフェード(ハードなものは1フレームだけ点滅する) - ビルダーとクリティックは常に別々のエージェント。クリティックは毎ラウンド新規に開始し、レンダリングされたフレームをリファレンスと比較して審査し、採点し、最大のギャップを1つだけ名指しする。ビルダーはそれだけを修正する - ブラインドテスト:自分のフレームをリファレンスのものと混ぜる。審査員がどちらか見分けられたら、未完成 - ワウゲート:フィルムを3秒の窓に分割する。すべてがイエスでなければならない - 実在のトラックを1曲、その曲自身の最後のヒットがエンドカードに着地するように合わせ、1つの連続した作品として再生する。そのビートでカットする - すべての小さな動きにクリーンでリアルな音、ヒーローモーメントは明確に聞こえるように - 音楽は静かに(約-34 LUFS)、そして常に音楽のみのバージョンも用意する 60fpsでレンダリングし、フリーズフレーム、1フレームのポップ、黒フレーム、ラウドネスを計測する。その後、クライアントのように視聴する:空白、テキストの上のテキスト、嘘をつくラベル、長居するショット。
あなたは計算幾何学エンジニア、クリエイティブテクノロジスト、 テクニカルアーティスト、タイポグラフィデザイナー、そしてWebGLエンジニアである。 SHADOW FOUNDRYを構築せよ。 インタラクティブで美術館品質のデジタルアートインスタレーション。 抽象的な三次元彫刻が、完璧に構成された タイポグラフィの影を落とす。 ユーザーは以下が可能: - フレーズから彫刻を生成する。 - あらゆる角度から彫刻を観察する。 - 光を動かし、読める影を破壊する。 - 彫刻がメッセージを復元するために再編成されるのを見る。 - マテリアルとライティングを変更する。 - 幾何学的構造を明らかにする。 - 高解像度アートワークをエクスポートする。 - インタラクション全体を記録する。 これはランディングページではない。 タイポグラフィアニメーションでもない。 3Dテキストモデルでもない。 リアルタイムの計算的影の彫刻である。 根本的な芸術的アイデア: 物体は混沌。 影は秩序。 すべては実際のジオメトリ、 ライティング、レンダリングを通じて生成されなければならない。 AI生成画像は禁止。 事前録画動画は禁止。 投影されたテキストテクスチャは禁止。 偽の影オーバーレイは禁止。 可視メッセージは、実際の三次元物体が落とす影から 浮かび上がらなければならない。 ユーザーに入力を求めない。 完全なインスタレーションへ直接開く。 デフォルトのメッセージは: LOOK CLOSER. メッセージは大きな建築壁に表示される。 それは完全に彫刻の影によって 生成されなければならない。 彫刻は約80個の独立した 金属フラグメントで構成される。 各フラグメントは独自の: - 三次元位置 - 奥行き - 向き - シルエット - 表面処理 - モーションパス を持つ。 フラグメントは約: 幅2.2m 高さ1.5m 奥行き1.8m の空間を占める。 それらは壁の前に吊り下げられている。 フラグメントは意図的にデザインされた キネティック彫刻のように見えるべきである。 斜めの角度からは、抽象的に見える。 光の視点からは、それらの投影シルエットが 組み合わさって所望のタイポグラフィになる。 単一の建築用スポットライトが彫刻を照らす。 結果として生じる影はこう読める: LOOK CLOSER. 影はすぐに読めるほど鮮明でなければならない。 初期構図は、並外れた現代アートインスタレーションの 編集写真のように見えるべきである。 ユーザーがインタラクトする前から美しくなければならない。 芸術的参照 考えるべきは: 現代彫刻ギャラリー。 実験的光インスタレーション。 ブルータリズム建築写真。 精密加工されたキネティック彫刻。 美術館展示デザイン。 視覚品質は、国際的なデザイン機関からの 高額な委託作品のように感じられるべきである。 カラーパレット 背景: #E9E6DE 建築壁: #EAE7E0 床: #D7D3CB 金属フラグメント: #252724 二次金属: #6D716E 影: #181A18 インターフェース: #20221F アクセント: #E8FF6A アクセントカラーは選択されたコントロールに控えめに使用される。 カラフルなグラデーションは禁止。 紫のライティングは禁止。 装飾的なグローは禁止。 パーティクルは禁止。 浮遊するガラス球は禁止。 一般的な未来的インターフェースは禁止。 建築 インスタレーションはミニマリストギャラリーの中に存在する。 一枚の巨大な漆喰壁。 一枚のシームレスなコンクリート床。 非常に繊細な壁と床の接合部。 単一の可視スポットライト。 スポットライトは細い機械アームに取り付けられている。 彫刻は床から約1.2mの高さに浮かぶ。 必要に応じて繊細な構造フレームを使用する。 インスタレーションは建築的に信憑性があるように感じられるべきである。 マテリアル フラグメントはヘアライン仕上げのダークチタンまたは陽極酸化アルミニウム。 メタルネス: 約0.75〜0.95。 ラフネス: 約0.25〜0.38。 対応している場合は異方性のあるヘアラインハイライトを使用する。 フラグメントには目に見える厚みがあるべきである。 そのエッジは細いハイライトを捉える。 完全に平らな黒いピースは避ける。 表面ラフネスに微細な変化を加える。 過度な傷やグランジェを加えない。 壁 壁にはほとんど知覚できない漆喰テクスチャがある。 その表面は完全にコンピュータ生成された白であってはならない。 プロシージャルな低周波表面変化を使用する。 テクスチャは影と競合してはならない。 影が主役である。 単一のパースペクティブカメラを使用する。 参照ビューポート: 1440x900。 カメラ焦点距離換算: 約65mm。 初期カメラ位置: 彫刻のやや右側。 壁の法線から約24度離れている。 カメラ高さ: 約1.6m。 構図は両方を明らかにするべきである: 1. 物理的な彫刻。 2. 壁上のその影。 彫刻は構図の左半分を占める。 読める影は右半分を占める。 彫刻と影を過度に重ねて、 錯覚の理解が困難にならないようにする。 ユーザーはカメラをオービットできなければならない。 オービット制限: 水平: デフォルトビューから-55〜+55度。 垂直: -20〜+30度。 カメラターゲットはインスタレーションの中心付近に保つ。 滑らかで臨界減衰のカメラ移動を使用する。 誇張された慣性は禁止。 連続的な自動回転は禁止。 映画的なカメラシェイクは禁止。 3つのカメラプリセットを提供する: SCULPTURE: 物理的フラグメントを強調する斜めのビュー。 SHADOW: 読めるメッセージを強調するほぼ正面のビュー。 STUDIO: 元のバランスの取れた構図。 カメラトランジションは約1.1秒かかるべきである。 滑らかな五次イーズを使用する。 カメラ位置間でカットしない。 デフォルトフレーズは極めてヘビーなグロテスク書体を使用する。 適切なオープンライセンス書体を優先する。 以下のフォントを使用する: - 強い大文字のジオメトリ - 明確なカウンター - ヘビーなストローク - 最小限の装飾的ディテール - 優れた可読性 タイポグラフィは建築的に感じられるべきである。 デフォルトレイアウト: LOOK CLOSER. 二行。 二行目はやや広い。 両行は光学的に中央揃え。 影の総幅: 約2.1m。 影の総高さ: 約1.1m。 トラッキング: タイトだが重ならない。 行間: キャップハイトの約0.95倍。 ピリオドは特大。 それは〜のように感じられるべき
[PAGE URL / FILE] のスムーズなホバーデモ動画を録画してください。 フレーム - 1440×900、コンポーネントは中央に配置。背景に溶け込む場合はコントラストのある背景を使用してください。 - カーソル、クリック、ブラウザUIは表示しないでください。実際のホバーイベントを使用し、元のアニメーション速度を保ってください。 ズームのタイミング - ホバー時に変化する領域(例:メニュー項目)を測定してください。 - 幅がフレームの半分以上、高さが4分の1以上ある場合はズームしないでください。 - それ以外の場合は、幅の約70%を占めるようにズームしてください(最大2.4倍)。1.4倍未満のズームはスキップしてください。 - 画像の実際の解像度を超えてズームしないでください。 カメラ(Screen Studioスムーズ) - ズームとパンを臨界減衰スプリング(バウンスなし)で一緒にアニメーションさせ、収束まで約1秒、ズームは対数スケールで行ってください。 - 静止状態から開始し、グライドインし、各ホバー項目を追従し(各約1.2秒)、グライドアウトしてください。 - 最初のフレームで正確に終了し、シームレスにループさせてください。 - 1フレームあたりのズーム変化は8%以内にしてください。 出力 - MP4(H.264)、30 fps、5~8秒、音声なし、2 MB未満、フル解像度。 - 大きすぎる場合はビットレートのみを下げてください。縮小、クロップ、速度変更は絶対にしないでください。
### あなたの使命 **SIGNAL / NOISE** という実験的なデジタル出版物を設計・開発してください。 これはテクノロジー、人工知能、デジタル文化、そしてインターネットの未来に関する独立系雑誌です。 デジタル編集デザインの優れたプロジェクトと視覚的に競えるウェブサイトを求めています。個性のある体験であり、ありきたりなSaaSのランディングページではありません。 アートディレクション、タイポグラフィ、構成、色彩パレット、アニメーション、ビジュアルシステムを決めるクリエイティブな自由があります。 どのようにウェブをデザインするかを説明してほしいのではありません。**実際に構築してほしいのです。** ### プロダクト ウェブサイトには4つの主要コンポーネントがあります: **1. 編集カバー** 出版物のアイデンティティを即座に確立するファーストスクリーン。 SIGNAL / NOISE という名前、号数(ISSUE 001)、主役の編集記事、そして記憶に残る視覚構成を含める必要があります。 **2. 記事インデックス** テクノロジーとデジタル文化に関する、架空でありながらも説得力のある6つの記事のセレクション。 6つの同一のカードを使わないでください。主役のストーリー、二次的な記事、短いコンテンツを区別できる編集構成をデザインしてください。 **3. 読書体験** カバーからアクセスできる、少なくとも1つの完全な記事を開発してください。 記事タイトル:「The Internet Is Becoming a Place Without People」 リード文、複数のセクション、強調引用、そしてコンテンツに統合された視覚リソースを含めてください。 心地よく丁寧な読書体験である必要があります。 **4. ナビゲーションとインタラクション** 機能的なナビゲーション、トランジション、ホバーステート、視覚的インジケーター、そして小さなインタラクションのディテールを実装してください。 アニメーションは体験に何かを加えるものであるべきで、無意味な装飾であってはなりません。 ### 技術要件 - React、TypeScript、Tailwind CSS。 - アニメーションとアイコンのライブラリを使用できます。 - デスクトップとモバイル向けのレスポンシブデザイン。 - 基本的なアクセシビリティ、キーボードナビゲーション、`prefers-reduced-motion` のサポート。 - 機能しているように見えるだけの静的インターフェースは禁止。 - デザインの代わりに他のウェブサイトのスクリーンショットを使用しないでください。 - 写真や外部の視覚リソースを使用できますが、一貫したアートディレクションに統合してください。 - プロジェクトはローカルで実行できる必要があります。 ### デザイン基準 求めているもの: - 際立った、認識可能な視覚的アイデンティティ。 - 優れたタイポグラフィの階層。 - 意図を持って空間を活用する構成。 - 実験性と使いやすさの良いバランス。 - 丁寧なマイクロインタラクション。 - カバー、インデックス、記事間の一貫性。 - 単に圧縮されただけではない、デザインされたモバイル版。 避けるべきもの: - テンプレートのありきたりな外観。 - 完璧に整列された6つのカード。 - 機能のない装飾的なグラデーション。 - 読書を妨げる派手なエフェクト。 - 不必要なUIコンポーネント。 - AIプロダクトのランディングページの典型的な外観。 ### クリエイティブな自由 特定の視覚的リファレンスに従う必要はありません。 SIGNAL / NOISE が編集アイデンティティとして何を意味し、どのように視覚的に表現されるべきかを自分で決めてください。 実験的、ミニマリスト、ブルータリスト、洗練されたもの、あるいは全く異なる方向性を採用することができます。 重要なのは、あなたの決定が全体として意味をなすことです。 ### 成果物 プロジェクト全体を構築してください。 完了時に、動作することを確認し、主要なアートディレクションの決定について簡単な説明(最大200語)を提供してください。 **質問したり、視覚的方向性の承認を求めたりしないでください。決定を下し、実行してください。**
私に聞いてください:ワードマーク用の1語のブランド名(動詞が最適)、9〜12枚の高解像度写真、ドロップと静かなブレイクダウンを備えた約120 BPMのロイヤリティフリー曲(Mixkit、商用利用無料)、そして動く植物の影がある無地の壁の無料ストッククリップ(Pexels)。 Appleキーノート風のローンチフィルム。2Dのみ、ワンカットの連続撮影として。各シーンは前のシーンから発展する:フェード、ブラー、カットはなし。オブジェクトが変形する。テキストはマスクラインからせり上がり、アイコンはゼロから跳ね上がり、バーは画面を横切って描かれ、ページは前方に押し出され、黒い図形がフレームを満たしてから次のシーンへ縮小する。温かみのあるオフホワイトのキャンバス、黒いUI、写真の上にiOS 26のリキッドグラス。ワードマークにはArchivo(wdth 125、ウェイト800)、UIにはGeist。カーソルが実際のクリック、ドラッグ、長押しで全ての変化を引き起こす。カメラはスクリーンスタジオ風にズームし、各瞬間が正方形を満たすようにし、カーソルもそれに合わせてスケールする。 禁止:クロスフェード、ブラーイン、明るさの「現像」、3Dフリップ、パーティクル、グロー、1秒を超えるホールド、テンプレートに感じられるもの一切。 120 BPM、54ビート、毎ビートで何かが起きる。 オープニング:ワードマークがアコーディオンのように自身のピリオドへ圧縮される。ドットが黒いピルに拡大し、その中にラベルがせり上がる。クリック:6枚のアイリスブレードがラベルの上で閉じ、そして写真の上へパッと開く。円が正方形に変わり縮小する。グリッドが紙の地図のように後ろで展開し(中央、プラス、角)、ベントーに再配置され、クリックで1つのタイルにズームインし、ドロップにぴったり着地する。 グラス:ガラスの単語が1文字ずつ現れ、その後しずくに溶けてガラスのツールバーに伸びる。調整アイコンがそれをスライダーに変える。ドラッグすると写真の照明が昼からゴールデンアワーへ移行し(2枚の位置合わせされたショット)、保持されたノブがガラスのレンズになる。それがガラスの球体へ上昇し、次の写真がその中に円として開き、球体がガラスの時計数字、日付、そしてガラスのミュージックプレーヤーに伸びるホームバーを備えたロック画面へと成長する。 ステージ:ロック画面が引き下がってスマートフォンが現れ、ベゼルが画面の端から成長する。ダイナミックアイランドが液体のように伸び、ちぎれ、飛び越えて、ブラインドのように巻き上がるMacウィンドウへ拡大する。壁紙を長押ししてSafariタブへドラッグする。ページが押し出され、画像をドロップするとランディングページのヒーローになる。スクロール:ヒーローが商品カード上の額装プリントに変形し、マットと額縁が写真の端から成長する。フレームの色(塗り広がる)とサイズを選ぶと、ナビボタンが飛び降りて「プリントを注文」になる。 注文:1つの黒い図形が変わり続ける:注文済み ✓ → 印刷中 % → 配送中(ルート上のバン)→ 配達済み ✓。 壁:配達済みの円が拡大して黒がフレームを満たし、1ビート保持してから、実際の壁の映像に掛かった額装プリントへ縮小する。同じアイリスがプリントの上で開き、再び閉じる。フレームが画面を満たし、ピル → ドット → 文字が戻ってくるビートで跳ね戻る。最後のフレーム=最初のフレーム。 1. 1つのHTMLファイル、正方形1440x1440。非同期のseek(t)内で時間から全てのスタイルを計算する:CSSトランジション、タイマー、フレーム間で持ち越される状態はなし。 2. スプリングには閉形式のステップ応答を使う。値に複数のターゲットがある場合は、変化ごとに1つのスプリングを追加して、時間の純粋関数に保つ。 3. リキッドグラス:各ガラス要素は背後のシーンの独自のクローンを保持する。そのクローンをSVG feImageディスプレイスメントマップ(角丸矩形の距離場)でフィルタし、わずかに異なるスケールの3つのfeDisplacementMapを通して色収差のエッジを作り、リムライトを加える。ガラスの文字には、グリフごとのキャンバス距離場を使ってマップ、マスク、ハイライトを構築する。 4. グー:ブラーとアルファ閾値を適用し、その上にソースを合成してガラスが内部でシャープに保たれるようにする。 5. アイリス:六角形の開口部の周りに6枚のブレードを配置する。各ブレードはその2つの頂点、両方のエッジ延長線、そしてそれらの間の短い弧を使う。 6. ワードマークの圧縮:各文字を同じ係数でドットに向かって移動させ、描画幅をそれに合わせて調整する(wdth軸を狭め、残りをスケールする)、文字同士を接触させたまま。 7. 映像:全てオールイントラで再エンコードし(ffmpeg -g 1)、blob URLとして読み込み、各フレームを描画する前に「seeked」を待つ。 8. サウンド:全てのイベントにダウンロードしたSFXを使い(Mixkit)、決して合成せず、それぞれを測定したピークで配置する。曲はダウンビートで開始する:ズームをドロップに着地させ、壁をブレイクダウンに置き、ワードマークをビートと共に戻す。Loudnormで-14 LUFSに。 9. Playwrightでレンダリング:60fpsでffmpeg tmixを使ってフレームごとに4つのサブフレームをブレンドする。1ビートにつき1フレームを確認し、次に単一フレームのポップ(隣接するフレームより3倍高いフレーム差分スパイク)を探す。 backdrop-filter: url()はChromiumでディスプレイスメントマップを誤読するので、代わりにシーンをクローンする。フラッドは角を越えて広がり約0.3秒かかる必要がある。そうでなければ画面の半分が1フレームで変わる。visibility: visibleに設定された子は非表示の親を通して表示されることがあるので、inheritを使う。変形する図形内のテキスト入れ替えには独自のマスクが必要。python http.serverは動画のレンジシークができないので、blob URLを使う。 私に入力を求めてから、完全なフィルムを書く前にビートマップと4枚のスチル(オープン、グラス、ステージ、壁)を見せてください。
以下を教えてください:形状が変形する先のUI状態を8〜12個(例:ボタン、ローダー、プレイヤー、スライダー、トグル、タブ、チャート、コマンドパレット、トースト)、純粋な白黒または1つのアクセントカラー、そして120 BPM前後のロイヤリティフリー楽曲(例:Mixkit、商用利用無料)。 DribbbleレベルのUIモーション。1つの形状、カットなし:すべての状態は同じ要素がサイズ、角丸、色をモーフィングし、そのコンテンツは素早いブラーで入れ替わる。 カーソルが実際のクリックとドラッグで every 変化を操作する。明るいウォームグレーのキャンバス、白黒のコンポーネント、1つのクリーンなUIフォント(Geist)。 至る所にスプリング、ただしオーバーシュートはほんのわずか。カメラがズームして各状態がフレーム全体を満たす。最後のフレームは最初のフレームと一致し、完璧にループする。 禁止:バウンスするイージング、パーティクルの burst、グロー、UIクローム上のグラデーション、不一致なアイコンストローク、デッドタイム、テンプレートに見えるものすべて。 120 BPM、7小節、毎ビートで何かが起こる。 ボタン → ローダー → チェック → ダイナミックアイランド → 再生/一時停止のモーフ付きミュージックプレイヤー → プログレスバーをスクラブ → 最大を超えてドラッグすると伸びるボリュームスライダーになる → トグルがビートで切り替わる → ノブがリキッドタブインジケーターになる → タブが自己描画するチャートに展開し、ホバーでツールチップ → ⌘Kに折りたたまれる → 入力してフィルター → Enter → トースト → ボタンに戻る。 1つのHTMLファイル、正方形1440x1440。すべてのスタイルはseek(t)内の時間から計算される:CSSトランジションなし、タイマーなし、フレーム間で状態を持ち越さない。 スプリングは閉形式のステップ応答を使用。ターゲットを複数回変更する値は、変更ごとに1つのスプリングの合計であり、時間の純粋関数のままである。 タブインジケーターの2つのエッジは異なるスプリングに従うため、先端が後端より先に伸びる。トグルノブにも同じトリックを使う。 ドラッグは直接操作を使用:カーソルが押されている間、値はその位置から計算される。離すと、その時点の位置からスプリングで戻る。 numpyで楽曲を分析してビートグリッドを見つけ、ダウンビートから開始する。すべてのUIサウンドを測定されたピークで配置する。 Playwrightでレンダリング:フレームあたり4サブフレーム、60fpsのモーションブラーのためにffmpeg tmixでブレンド。 フルレンダリングの前に、1ビートにつき1フレームをレンダリングする。グリッドから外れているもの、窮屈なもの、読みにくいものを修正する。 カメラがスケールするものにwill-changeを絶対に置かないこと、さもないとテキストがぼやける。 モーフィングするコンテナ内で入れ替わるテキストは、独自の進入と退出のタイミングが必要でないと重なる。 最後のフレームを最初のフレームと同一にすること、カーソル位置と速度も含めて、さもないとループがカクつく。 入力内容を聞いてから、コードを書く前にビートグリッド上の状態リストを見せてください。

Claude Opus 5.5 について

Claude Opus 5.5 は、動画モデルとは真逆の方向からモーショングラフィックスに迫ります。ピクセルを拡散させて場面に近づけるのではなく、HTML・Canvas・SVG・Remotion のコードとしてアニメーションを書き、決定論的にレンダリングするのです。文字は常にシャープ、タイミングはフレーム単位で正確、ブランドカラーは願いではなく hex 値。そのレンダリングを録画すれば、それが動画になります。

これにより「良いプロンプト」の定義がひっくり返ります。拡散系動画プロンプトはショットを描きますが、Opus 5.5 のモーショングラフィックス・プロンプトは、モーションデザイナーに手渡す brief のように読めます:使えるアセット、尺と拍、各カードに載せるコピー、参照スタイル、イージングの感触。曖昧な形容詞はピクセル空間では生き残れても、コード空間では死にます——「パッとさせて」は、何が・いつ・どれだけパッとするのかを brief が書いたとき初めて実行可能になります。

その見返りは反復の精度です。出力がコードなので、追記の一文一文が外科手術的な編集になります——「ロゴをあと 2 拍長く」「3 枚目のカードは右からスライドインに」——そのパラメータだけが変わります。上のギャラリーには検証済みの Opus 5.5 プロンプトと実際の録画出力を収録しています。強いものほど、映像の描写ではなく構造とタイミングを指定していることに注目してください。

Claude Opus 5.5 プロンプトの書き方

  1. 1最初にアセットの目録を渡す:ロゴ、hex のブランドカラー、フォント、プロダクトのスクリーンショット、それらのあるフォルダ。コードは brief が手渡したものしか描けません——載っていないアセットは存在しないのと同じです。
  2. 2タイムラインは雰囲気ではなく拍で配分する:「15 秒——ロゴ出現 2 秒、3 枚の特徴カードのカルーセル 4 秒、価格カード 3 秒、終了フレームで保持」。拍の割り振り表は最強の制約です。
  3. 3画面上のコピーは逐語的に brief へ書く。ピクセルモデルと違い、コードはテキストを一字一句正確に描きます——あなたが書いた見出し・タグライン・CTA がそのまま出荷されます。
  4. 4スタイルは形容詞ではなく参照に錨を打つ:「Apple の基調講演のショーリールの気配、フラットなダーク背景、アクセントカラー 1 色」は「洗練されたモダン」に毎回勝ちます。
  5. 5出力の形を明示する——「アニメーションが自動再生される自己完結の HTML 1 ページ」。これで、デモの土台が来るのか、そのまま録画できる成果物が来るのかが決まります。
  6. 6brief を丸ごと書き直さず、追い会話で精緻化する:「イントロを 0.5 秒遅く」「ロゴのイージングをスプリングに」。コードはターンをまたいで残るので、編集はリセットではなく積み上げになります。

よくある質問

Opus 5.5 のモーショングラフィックス・プロンプトは動画モデルのプロンプトと何が違いますか?

動画モデルのプロンプトは場面を描写してピクセルに期待しますが、Opus 5.5 のプロンプトはアニメーションを決定論的にレンダリングするコードへのデザイン brief です。写真級の質感と引き換えに、正確なタイポグラフィ、正確なタイミング、そして追記一文で任意のパラメータを修正できる能力が得られます。

コードが書けなくても Claude Opus 5.5 でモーショングラフィックスは作れますか?

作れます。あなたが書くのは brief——アセット、拍、コピー、スタイル——だけで、HTML/Canvas/SVG のコードは Opus 5.5 自身が書き、反復します。深いカスタマイズにはコードの読解が役立ちますが、上のギャラリーにある検証済みプロンプトはすべて自然言語の brief です。

生成されたアニメーションを動画ファイルにするには?

アニメーションはブラウザでレンダリングされるので、どんな画面録画ツールでも動画にできます。きれいに撮るには、brief の中で固定の尺と自動再生の単一ページ出力を指定し、冒頭から終了フレームの保持まで一往復をそのまま録画してください。

プロダクトのショーリールを頼む前に準備すべきものは?

まずブランドアセットを揃えてください:ロゴ、hex カラー、プロダクト画像、逐語のマーケコピー。次に拍の構造——何がどの順でどれだけ出るか——を決めます。本物のアセットと拍の表がある brief は、長い美的描写に毎回勝ちます。