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초 키네틱 스포큰 워드 필름을 제작하라. 전적으로 타이포그래피로 연출되는 독창적인 미니어처 연설로 다뤄라. 모든 행은 프레임의 구조를 바꾼다. 마지막 선언은 앞선 단어들이 물리적으로 구축한 무언가 위에 서 있어야 한다. 자체 완결형 HTML 파일 하나를 납품하라, 1080×1080, 60fps 목표, SVG 및/또는 Canvas 사용. 필요한 모든 에셋을 임베드하라. 아트 디렉션: 배경 #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은 두 개의 가는 수직 규칙선 위로 내려온다. 그 규칙선은 서스펜션 케이블이 된다. 베이스라인은 통제된 벡터 변형을 사용해 시각적 하중 아래에서 휘어진다. 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 전환, 변화하는 난수 값은 금지한다. 시간 재매핑 곡선과 해석적 변환을 사용하라. render(0)=render(20)인 20초 주기 타임라인을 사용하라. 1200개의 익스포트 프레임에 대해 n/60 단위의 고정 스텝 접근을 제공하라. 오디오는 선택 사항이며 기본적으로 꺼져 있다; 브라우저 음성 합성이나 자동 재생 의존성은 금지한다. 품질 게이트: 대표 프레임 8개를 검사하라. 연설이 올바른 순서로 읽히는지 확인하라. 구조 변형이 관객이 읽기 전에 한 행을 파괴하지 않는지 확인하라. 최종 플랫폼이 앞선 요소들로 눈에 띄게 조립되었는지 확인하라. 완전한 HTML 구현을 반환하라.
