Kinetic Typography Speech Visualization
A prompt for creating a 20-second kinetic typography video titled "BUILD THE FLOOR" using HTML/CSS/JS to visualize a speech.
Create a 20.00-second kinetic spoken-word film titled “BUILD THE FLOOR.” Treat this as an original miniature speech staged inside a typographic field. Every line reorganizes the field of the frame. The final declaration must stand on a field that finally lies flat. Deliver one self-contained HTML file, 1080×1080, targeting 60fps, using SVG and/or Canvas. Embed all required assets. ART DIRECTION Background #102820. Letterforms # F4E9D5. Field lines and filings # F2B544. A magnetic-monument world: streamlines, flux, stillness at the null. Typography stays crisp; particles are atmosphere only. High-contrast serif for the speech, heavy grotesque for load-bearing words, restrained monospace for flux gauges. No horseshoe magnets, lightning, electron diagrams, or sci-fi arcs. 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 field roles. WAIT is a repelling plate; letterforms lean away from it, kerning compressed. WAITING is field lines sagging under load while filings stream toward the low side. VOICE is one pole reversed; the field reorganizes and letters stand upright along it. ROOM is a null point, a still eye inside the field. FLOOR is the field flattened into a horizontal plane. These roles must emerge from the actual letterforms responding to the field, not from illustrations. STORYBOARD 0.00–3.00 — “We were told to wait.” The sentence leans away from the WAIT plate; streamlines compress against it. Available space pinches on the plate side; the sentence remains readable, pressed but intact. 3.00–6.50 — “So we learned the weight of waiting.” Reveal in phrase groups. Field lines sag deeper with each phrase. Filings — deterministic, hash-seeded per id and time — drift along the streamlines toward the low side and gather. The WAITING glyph hangs tilted inside the field as a suspended load. 6.50–10.00 — “Then one voice made room.” VOICE enters; one pole reverses. The field reorganizes: old streamlines retract by dash-offset while new ones draw in. Letters rotate upright along the new field — analytic rotation of whole glyphs, never path morphing. ROOM opens as a null point, a still eye; the counter of the O in ROOM is its center, and the next composition sits calm inside it. 10.00–12.50 — “Then another.” A second pole turns. The field becomes symmetric; every letter stands vertical. The baseline levels into the first perfect horizontal in the film. Hold absolute stillness for at least 400ms — even the filings pause. 12.50–16.00 — “Now the floor belongs to us.” The field flattens into a horizontal plane. All text aligns to this new ground. The final word 'us' settles firmly. Ensure the transition from dynamic field to flat plane is smooth and visually impactful.