Create a 20.00-second kinetic spoken-word film titled “BUILD THE FLOOR.” Treat this as an original miniature speech staged entirely through typography. Every line changes the architecture of the frame. The final declaration must stand on something the earlier words physically constructed. Deliver one self-contained HTML file, 1080×1080, targeting 60fps, using SVG and/or Canvas. Embed all required assets. ART DIRECTION Background #102820. Paper # F4E9D5. Structural accent # F2B544. A literary editorial world with the scale and confidence of a public monument. Use a high-contrast serif for the speech, a heavy grotesque for load-bearing words, and a restrained monospace for small timing marks. No distressed protest-poster clichés, megaphones, flags, crowds, microphones, or stock footage. ORIGINAL SPEECH — EXACT WORDS, EXACT ORDER “We were told to wait.” “So we learned the weight of waiting.” “Then one voice made room.” “Then another.” “Now the floor belongs to us.” Do not attribute these words to any real person. No extra slogans. The complete speech must be understandable without audio. CENTRAL VISUAL RULE Words have assigned architectural roles. WAIT is a lintel. WAITING is a suspended load. VOICE is a support. ROOM is an opening. FLOOR is a platform. These roles must emerge from the actual letterforms, not from separate illustrations placed behind text. STORYBOARD 0.00–3.00 “We were told to wait.” The sentence occupies a narrow horizontal opening beneath a massive WAIT. The opening slowly compresses while the sentence remains readable. The pressure comes from the layout, not camera shake. 3.00–6.50 “So we learned the weight of waiting.” Reveal the sentence in spoken phrase groups. WAITING lowers on two fine vertical rules. Those rules become suspension cables. A baseline bends under the visual load using a controlled vector deformation. 6.50–10.00 “Then one voice made room.” VOICE enters vertically and rotates into a structural support. It lifts one end of the baseline. The counter of the O in ROOM becomes an aperture. The next composition is revealed through that aperture. 10.00–12.50 “Then another.” A second support arrives. The tilted structure levels. This is the first moment of perfect horizontal alignment in the film. Use a brief stillness to make the change feel earned. 12.50–16.00 “Now the floor belongs to us.” Earlier structural words assemble into a platform. The final sentence settles onto it. US receives emphasis through shared alignment and scale, never through a separate flashy effect. 16.00–18.00 Hold the complete declaration. A slight release of tension travels through the supporting rules. No new text. No restless decorative motion. 18.00–20.00 The camera tracks beneath the completed platform. Its underside fills the frame and becomes the opening WAIT lintel. Under full occlusion, return hidden elements to their initial positions. Reveal the exact opening composition. CHOREOGRAPHY Do not force the speech onto a dance beat. Use a cue sheet based on phrases, pauses, and emphasis. Phrase reveals should follow reading order. Allow at least one 400ms moment of absolute stillness. Use critically damped motion for settling loads. Use controlled elastic deformation for the baseline only. Make the changes in available space carry the emotional progression. TYPE IMPLEMENTATION Use actual glyph paths for structural words. Preserve counters and legibility during deformation. For transitions between unrelated words, use occlusion or matched structural edges; do not interpolate arbitrary path points. Keep the currently spoken phrase readable before it becomes architecture. ENGINEERING Implement window. seek(t) as a deterministic scene renderer. No accumulated physics, autonomous CSS transitions, or changing random values. Use time-remapping curves and analytic transforms. Use a 20-second periodic timeline with render(0)=render(20). Provide fixed-step access at n/60 for 1200 export frames. Audio is optional and off by default; no browser speech synthesis or autoplay dependency. QUALITY GATE Inspect eight representative frames. Check that the speech reads in the correct order. Check that structural transformations never destroy a line before the audience can read it. Check the final platform is visibly assembled from earlier elements. Return the complete HTML implementation.
日本語訳
“BUILD THE FLOOR.” というタイトルの20.00秒のキネティック・スポークンワード映像を制作してください。これは、すべてをタイポグラフィだけで演出するオリジナルのミニチュア・スピーチとして扱ってください。一行ごとにフレームの構造が変わります。最後の宣言は、それ以前の言葉が物理的に築いた何かの上に立たなければなりません。1080×1080、60fps を目標とし、SVG および／または Canvas を使って、自己完結型の HTML ファイルを1つ納品してください。必要なアセットはすべて埋め込んでください。 【アートディレクション】背景 #102820。紙 # F4E9D5。構造のアクセント # F2B544。公共モニュメントのようなスケールと自信を持つ、文学的なエディトリアルの世界。スピーチにはハイコントラストのセリフ、荷重を支える語にはヘヴィなグロテスク、小さなタイミング・マークには抑制の効いたモノスペースを使ってください。使い古されたプロテスト・ポスターのクリシェ、メガホン、旗、群衆、マイク、ストック映像は禁止です。 【オリジナル・スピーチ — 正確な言葉、正確な順序】“We were told to wait.” “So we learned the weight of waiting.” “Then one voice made room.” “Then another.” “Now the floor belongs to us.” これらの言葉を実在の人物に帰属させないでください。追加のスローガンはなし。スピーチ全体は音声なしでも理解できなければなりません。 【中心となる視覚ルール】各語には建築的な役割が割り当てられています。WAIT はまぐさ（リンテル）。WAITING は吊り荷。VOICE は支持体。ROOM は開口部。FLOOR はプラットフォーム。これらの役割は、実際の字形から生まれなければならず、テキストの背後に置かれた別個のイラストから生じてはなりません。 【ストーリーボード】0.00–3.00 “We were told to wait.” 巨大な WAIT の下にある細い横長の開口部に、この文が収まります。文が読める状態を保ちながら、開口部はゆっくりと圧縮されます。圧力はレイアウトから生まれるものであり、カメラの揺れからではありません。 3.00–6.50 “So we learned the weight of waiting.” 発話のフレーズ単位で文を現してください。WAITING は2本の細い垂直罫線の上に降りてきます。その罫線は吊りケーブルになります。ベースラインは、制御されたベクター変形によって、視覚的な荷重の下でしなります。 6.50–10.00 “Then one voice made room.” VOICE は垂直に入り、回転して構造支持体になります。それがベースラインの片端を持ち上げます。ROOM の O のカウンターがアパーチャー（開口部）になります。次の構図はそのアパーチャーを通して現れます。 10.00–12.50 “Then another.” 2本目の支持体が到着します。傾いていた構造が水平になります。これは映像内で最初の完全な水平アラインメントの瞬間です。短い静止を入れて、その変化が当然のものに感じられるようにしてください。 12.50–16.00 “Now the floor belongs to us.” それ以前の構造的な語が集まってプラットフォームを組み上げます。最後の文はその上に落ち着きます。US は共通のアラインメントとスケールによって強調され、決して別個の派手なエフェクトによってではありません。 16.00–18.00 宣言全体を保持してください。わずかな緊張の解放が支持罫線を伝っていきます。新しいテキストはなし。落ち着かない装飾的な動きもなし。 18.00–20.00 カメラは完成したプラットフォームの下をトラッキングします。その下面がフレームを満たし、冒頭の WAIT のまぐさになります。完全な遮蔽の下で、隠れていた要素を初期位置に戻してください。冒頭とまったく同じ構図を現してください。 【振付】スピーチをダンスビートに無理やり合わせないでください。フレーズ、間、強調に基づくキューシートを使ってください。フレーズの出現は読み順に従うべきです。少なくとも1回、400ms の完全な静止の瞬間を設けてください。荷重の収束には臨界減衰のモーションを使ってください。弾性変形はベースラインにのみ、制御された形で使ってください。利用可能な空間の変化に感情の進行を担わせてください。 【タイプ実装】構造的な語には実際のグリフ・パスを使ってください。変形中もカウンターと可読性を保ってください。無関係な語同士のトランジションには、遮蔽か一致した構造エッジを使ってください。任意のパス点を補間してはなりません。その時点で発話されているフレーズは、建築になる前に読める状態を保ってください。 【エンジニアリング】window. seek(t) を決定論的なシーン・レンダラーとして実装してください。物理の累積、自律的な CSS トランジション、変化する乱数値は禁止です。タイム・リマッピング・カーブと解析的トランスフォームを使ってください。render(0)=render(20) となる20秒周期のタイムラインを使ってください。1200 フレームの書き出しのために n/60 の固定ステップでアクセスできるようにしてください。音声はオプションでデフォルトはオフです。ブラウザの音声合成や自動再生に依存してはなりません。 【品質ゲート】代表的な8フレームを検査してください。スピーチが正しい順序で読めることを確認してください。構造的な変形が、観客が読む前に一行を壊していないことを確認してください。最終的なプラットフォームが以前の要素から目に見えて組み上げられていることを確認してください。完全な HTML 実装を返してください。
