オレンジドットモーションシステム

私に依頼したいのは、オープニングのトグルボタンの短いラベル、ヒーローワード1つ、グラフのパーセンテージ、最後のカードのテキスト、アクセントカラー1色、そして明確なビートのあるトラックです。

16:9のアスペクト比で制作された2Dモーションデザインフィルム。温かみのあるオフホワイトのキャンバス、ほぼ黒に近い背景、大胆なタイポグラフィ、そして鮮やかなオレンジのアクセントカラーを使用します。オレンジ色のドットはすべてのシーンを繋ぎます。UIから始まり、文字上のドットになり、バネグラフを描き、形状へと成長し、エンドカードで再び現れます。カーソルによって、冒頭のクリックがリアルに感じられます。動きはシャープかつ制御された状態を保ち、バネのオーバーシュートは最小限に抑え、デッドタイムは排除します。
禁止事項：ストック映像、グラデーション、グロー効果、パーティクルバースト、ランダムなトランジション、および画面上に既に表示されている要素と関連付けられていない動き。

約15秒間、主要な拍ごとに視覚的な変化がある。
開く：カーソルが「Reduce Motion」の横にあるオレンジ色のトグルをクリックします。文字が曲がって所定の位置に移動し、「Motion」だけが残り、「i」の上にオレンジ色の点が表示されます。
スプリング：ドットが単語から飛び出し、グラフ上に着地します。その軌跡はバネのような動きを示し、目標を通り過ぎて「+22%」という表示の横に落ち着きます。
形状：点が線を横切って飛び出し、オレンジ色の円に成長して画面全体を埋め尽くします。その中で黒い丸みを帯びた四角形が回転し、その後、錠剤のように伸びます。画面は縮小し、黒地にオレンジ色の点が一つだけ残ります。
タイプ：「SPRINGS」「EASING」「KINETIC TYPE」「3D」「SOUND」といった単語がドットの周りを回ります。文字の円は、小さなドットのフィールドへと広がっていきます。
表示：ハーフトーンのフィールドが拡大して黒に反転し、最後のカード「 Opus 5.5 」、「モーションデザイナー」、「0キーフレーム」が表示されます。
戻り：オレンジ色の点がハーフトーン、グラフ、トグルを通って戻ります。最後のフレームを最初のフレームに合わせることで、ビデオがスムーズにループします。

1. HTMLファイル1つ、解像度1920x1080 CSSフレームレート60fps。seek(t)関数内で時間からすべてのビジュアルを計算します。CSSトランジション、タイマー、フレーム間で引き継がれる状態は使用しません。
2. トグル、跳ね返る点、およびグラフには、閉形式のバネ関数を使用してください。点を動かすのと同じバネ関数からグラフを描画してください。
3. 「Reduce Motion」から「Motion」への変換時に、文字を個別にアニメーション化します。オレンジ色の点は、「i」がジャンプを開始するまで「i」に付けたままにしておきます。
4. オレンジ色の円、回転する四角形、錠剤を、同じ形状の異なる状態に変化させます。それぞれの変形を通して、位置と動きを維持してください。
5. 円を描くように配置した単語を円形の経路に沿って配置し、次に文字を外側に移動させて、フレームをハーフトーングリッドに渡します。
6. オレンジ色の点に合わせて大きさが変化するドットのグリッドとしてハーフトーンを描画します。エンドカードが表示される前に、フレームの端を超えて拡大させてください。
7. クリック音、ドットの着地位置、グラフのピーク、形状の変化、最終タイトルを計測した拍子に同期させます。完全なエクスポートを行う前に、拍子ごとに1フレームをレンダリングしてペースを確認します。

グラフとドットは同じ動きをしないと、バネの動きが不自然に感じられます。オレンジ色のアクセントは、すべてのシーンで一貫してください。送信テキストと受信テキストにはそれぞれ異なるタイミングを設定し、文字が重ならないようにしてください。図形が画面いっぱいに広がった場合は、四隅すべてを超えて拡大してください。ループの途切れを防ぐため、最初と最後のフレームでカーソル、ドット、タイポグラフィを一致させてください。

入力内容を尋ねてから、ビートマップと4つの静止画（トグル、グラフ、キネティックタイプ、エンドカード）を見せて、それからフルビデオを作成してください。

Ask me for: a short label for the opening toggle, one hero word, a percentage for the graph, the text for the final card, one accent color, and a track with a clear beat.

A 2D motion design film in 16:9. Use a warm off-white canvas, near-black backgrounds, bold typography and one vivid orange accent. The orange dot connects every scene: it starts in the UI, becomes the dot over a letter, traces a spring graph, grows into a shape and returns on the end card. A cursor makes the opening click feel real. Keep the motion sharp and controlled, with small spring overshoots and no dead time.
Banned: stock footage, gradients, glows, particle bursts, random transitions and motion that isn't connected to an element already on screen.

Around 15 seconds, with a visual change on every major beat.
Open: a cursor clicks the orange toggle beside "Reduce Motion". The letters bend and move into place until only "Motion" remains, with the orange dot above the "i".
Spring: the dot jumps away from the word and lands on a graph. Its path draws a spring response, overshoots the target and settles beside a "+22%" callout.
Shape: the dot shoots across a line, grows into an orange circle and fills the frame. A black rounded square rotates inside it, then stretches into a pill. The scene contracts to a single orange dot on black.
Type: words like "SPRINGS", "EASING", "KINETIC TYPE", "3D" and "SOUND" orbit the dot. The circle of type opens out into a field of tiny dots.
Reveal: the halftone field expands and flips to black, revealing the final card: "Opus 5.5", "Motion designer." and "0 keyframes".
Return: the orange dot moves back through the halftone, graph and toggle. Match the final frame to the first so the video loops cleanly.

1. One HTML file, 1920x1080 at 60fps. Compute every visual from time inside seek(t): no CSS transitions, timers or state carried between frames.
2. Use closed-form springs for the toggle, bouncing dot and graph. Draw the graph from the same spring function that moves the dot.
3. Animate letters individually for the "Reduce Motion" to "Motion" transformation. Keep the orange dot attached to the "i" until it begins its jump.
4. Make the orange circle, rotating square and pill different states of the same shape. Preserve its position and motion through each transformation.
5. Place the orbiting words along a circular path, then move their letters outward to hand the frame over to the halftone grid.
6. Draw the halftone as a grid of dots whose sizes respond to the orange dot. Let it grow past the frame edges before revealing the end card.
7. Sync the click, dot landing, graph peak, shape changes and final title to measured beats. Render one frame per beat to check the pacing before the full export.

The graph and dot must follow the same motion or the spring will feel fake. Keep the orange accent consistent across every scene. Give outgoing and incoming text separate timing so letters don't overlap. When a shape fills the screen, scale it past all four corners. Match the cursor, dot and typography in the first and last frames to avoid a loop stutter.

Ask me for the inputs, then show me the beat map and four stills (toggle, graph, kinetic type, end card) before building the full video.

プロンプトは以下から取得 役職 @ultimaxbt.