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.
中文译文
创作一支 20.00 秒的动态口语影像,标题为“BUILD THE FLOOR.” 把它当作一场完全通过字体排版来调度的原创微型演讲。每一行都改变画面的建筑结构。最后的宣言必须立在早先那些词句实际构造出来的东西之上。 交付一个自包含的 HTML 文件,1080×1080,目标 60fps,使用 SVG 和/或 Canvas。嵌入所有必需资源。 艺术指导 背景 #102820。纸张 # F4E9D5。结构强调色 # F2B544。一个文学编辑式的世界,具有公共纪念碑般的尺度与自信。演讲用高对比衬线体,承重词用厚重的 grotesque,小幅时间标记用克制的等宽字体。不要做旧式抗议海报的陈词滥调、扩音器、旗帜、人群、麦克风或素材画面。 原创演讲——精确的词句,精确的顺序 “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 沿两条细竖线下降。这两条线变成悬索。基线在视觉荷载下弯曲,使用受控的矢量变形。 6.50–10.00 “Then one voice made room.” VOICE 竖直进入,并旋转成一根结构支撑。它抬起基线的一端。ROOM 中 O 的字腔变成一个光圈。下一个构图通过那个光圈显露。 10.00–12.50 “Then another.” 第二根支撑抵达。倾斜的结构变平。这是整支影片中第一次完美的水平对齐。用一段短暂的静止让这一变化显得是挣来的。 12.50–16.00 “Now the floor belongs to us.” 先前的结构词句组装成一个平台。最后的句子落在其上。US 通过共享的对齐与尺度获得强调,绝不通过单独的炫目效果。 16.00–18.00 保持完整的宣言。一点轻微的张力释放沿着支撑线传递。没有新文字。没有躁动的装饰性运动。 18.00–20.00 镜头在完成的平台下方跟拍。它的底面填满画面并变成开场那根 WAIT 过梁。在完全遮蔽下,把隐藏元素归回初始位置。揭示与开场完全相同的构图。 编排 不要把演讲硬压到舞曲节拍上。使用基于短语、停顿和强调的提示表。短语的揭示应遵循阅读顺序。至少留出一个 400ms 的绝对静止时刻。对沉降荷载使用临界阻尼运动。只对基线使用受控的弹性变形。让可用空间中的变化承载情绪推进。 字体实现 结构词使用真实的字形路径。在变形过程中保留字腔与可读性。对于不相关词之间的过渡,使用遮蔽或匹配的结构边缘;不要对任意路径点做插值。在当前正在说出的短语变成建筑结构之前,保持它可读。 工程实现 实现 window.seek(t) 作为确定性的场景渲染器。没有累积物理、自主的 CSS 过渡或变化的随机值。使用时间重映射曲线与解析变换。使用 20 秒的周期时间轴,render(0)=render(20)。为 1200 个导出帧提供 n/60 的固定步长访问。音频可选且默认关闭;不依赖浏览器语音合成或自动播放。 质量关卡 检查八个代表性帧。检查演讲按正确顺序读出。检查结构变换绝不会在观众读到某一行之前将其摧毁。检查最终平台明显是由先前的元素组装而成。返回完整的 HTML 实现。