Kinetic typography spoken-word HTML film "BUILD THE FLOOR" made with Opus 5.5: Claude Opus launch video

Originally posted by @gdgtify on X · posted Sep 25, 2026 · curated by MotionHunt, updated Oct 15, 2026

In short

A 20-second kinetic typography film titled "BUILD THE FLOOR," specified as a single 1080×1080 HTML file. The post shares the full prompt and says the author generated the video with Opus 5.5 from it, inspired by another creator's post.

Prompt

Reconstructed

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.

How it was made

The author says the video was generated with Opus 5.5 using the prompt shared in the post, and that the approach was inspired by another creator's post. The prompt asks for one self-contained HTML file using SVG and/or Canvas, with a deterministic seek(t) renderer and a 20-second periodic timeline. The author did not share further details on rendering, editing, time, or cost.

Tools: Claude Opus
Effort: Generated from a single prompt with Opus 5.5; no time or iteration count stated.

Shot breakdown

0:00-0:03The line "We were told to wait." sits in a narrow horizontal opening beneath a massive WAIT lintel. The opening slowly compresses while the sentence stays readable.
0:03-0:06.5"So we learned the weight of waiting." appears in phrase groups. WAITING lowers on two fine vertical rules that act as suspension cables, and a baseline bends under the load.
0:06.5-0:10"Then one voice made room." VOICE rotates vertically into a support that lifts one end of the baseline. The counter of the O in ROOM becomes an aperture that reveals the next composition.
0:10-0:12.5"Then another." A second support arrives and the tilted structure levels, with a brief stillness at the moment of perfect horizontal alignment.
0:12.5-0:16"Now the floor belongs to us." Earlier structural words assemble into a platform, and the final sentence settles onto it. US is emphasized through shared alignment and scale.
0:16-0:18The complete declaration holds with no new text. A slight release of tension travels through the supporting rules.
0:18-0:20The camera tracks beneath the completed platform. Its underside fills the frame and becomes the opening WAIT lintel, returning the film to its starting composition.

Breakdown written by AI from the prompt and post, reviewed by MotionHunt.

Why it works

Each word takes an architectural role (lintel, suspended load, support, opening, platform), so the structure of the frame carries the speech's meaning.
Phrases are revealed in spoken reading order, so the audience can read each line before it becomes architecture.
A planned 400ms stillness at the moment of levelling makes the alignment feel earned.
The closing platform is built from the earlier structural words, so the final declaration rests on what was constructed before it.
Restrained palette and type roles (serif for speech, heavy grotesque for load-bearing words, monospace for timing marks) keep the monument-like tone consistent.

Remix it for your product

Create a 20.00-second kinetic spoken-word film titled “[PRODUCT].” 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: Write five short lines in exact order, built only from [FEATURES]. Do not attribute the words to any real person. No extra slogans. The complete speech must be understandable without audio.

CENTRAL VISUAL RULE: Assign each key word an architectural role: a lintel, a suspended load, a support, an opening, and a platform. These roles must emerge from the actual letterforms, not from separate illustrations placed behind text.

STORYBOARD:
0.00–3.00: The first line sits in a narrow opening beneath a massive lintel word. The opening slowly compresses while the line stays readable. Pressure comes from layout, not camera shake.
3.00–6.50: Reveal the second line in phrase groups. The suspended-load word lowers on two fine vertical rules that become cables. A baseline bends under the load using controlled vector deformation.
6.50–10.00: A support word enters vertically and rotates into place, lifting one end of the baseline. A counter in a letter becomes an aperture that reveals the next composition.
10.00–12.50: A second support arrives and the tilted structure levels. Use a brief stillness at the moment of perfect horizontal alignment.
12.50–16.00: Earlier structural words assemble into a platform. The final line settles onto it. Emphasis comes through shared alignment and scale, never 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 motion.
18.00–20.00: The camera tracks beneath the completed platform. Its underside fills the frame and becomes the opening lintel. Under full occlusion, return hidden elements to their initial positions and reveal the exact opening composition.

CHOREOGRAPHY: Do not force the speech onto a dance beat. Build a cue sheet from phrases, pauses, and emphasis. Phrase reveals follow reading order. Include at least one 400ms moment of absolute stillness. Use critically damped motion for settling loads. Use controlled elastic deformation for the baseline only.

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, that no structure destroys a line before it can be read, and that the final platform is visibly assembled from earlier elements. Return the complete HTML implementation.