Create a 20.00-second kinetic typography film titled “ESCAPE THE ORBIT,” based on John F. Kennedy’s Rice University address, September 12, 1962.
The central experience: a sentence discovers that it can change its own trajectory.
Deliver one complete, self-contained HTML file. Composition: 1080×1080. Target: 60fps. Use Canvas, SVG, or embedded WebGL. Embed required assets and libraries. The film must work without audio.
EXACT DISPLAY TEXT
“We choose to go to the moon”
“[…]”
“not because they are easy,”
“but because they are hard”
Preserve this order. The bracketed ellipsis explicitly indicates omitted speech. Attribution is separate from the excerpt. No additional slogans.
ART DIRECTION
Background: midnight # 080D23.
Primary type: warm white # FFF4DD.
Trajectory: electric coral # FF654F.
Secondary orbital geometry: blue # 6685FF.
Use a broad, confident grotesque for the speech and a sharply drawn italic for the final emphatic word. Avoid the appearance of a spacecraft dashboard. No rockets, astronaut illustrations, starfield wallpaper, lens flares, or decorative telemetry.
The frame should resemble an exceptionally refined astronomical instrument that has become expressive.
CENTRAL VISUAL RULE
The baseline of the sentence is a trajectory.
At first it is trapped in a closed orbit. A rhetorical decision changes that orbit into an open path. The letters remain the same travelers throughout.
Use an abstract orbital metaphor; do not present invented mission data or imply a physically accurate flight simulation.
STORYBOARD
0.00–3.50
The opening excerpt appears across the center, large and horizontal. Reveal it in three meaningful phrase groups.
A single hairline ellipse passes behind the baseline. A small circular lunar mark occupies its distant focus.
Hold the completed phrase motionless for 700ms.
3.50–6.00
The camera pulls back. The previously straight baseline reveals a shallow curvature.
The phrase travels along the ellipse as a coherent unit. Keep its glyphs upright during the initial movement. Only after the reading hold may they progressively adopt the tangent of the path.
The viewer realizes the sentence is circling rather than advancing.
6.00–7.00
Show the bracketed omission in an uncluttered central opening. The orbital movement decelerates.
7.00–10.50
Reveal the next clause on the near side of the orbit. Its final word travels through one smooth, effortless arc and returns toward where it started.
This ease should feel elegant but unproductive. Avoid comic bouncing.
10.50–14.50
Reveal the final clause horizontally before transforming it.
At its emphasis, the ellipse opens at one precise point. The same tracked letter group takes the new tangent and departs.
Perform one deliberate 70-degree camera roll. Counter-rotate the active phrase so it remains readable while the orbital field changes orientation around it.
The trajectory sweeps from lower left to upper right. Acceleration is conveyed by expanding spacing between its trailing marks, not by shaking the camera.
14.50–17.00
The camera matches the departing phrase’s velocity. The phrase becomes visually still while the old orbit recedes beneath it.
The lunar mark enlarges into a restrained crescent through geometric overlap. The crescent brackets the destination without becoming a cartoon illustration.
17.00–20.00
Resolve into a spacious editorial composition containing the selected excerpt in reading order, including its omission marker.
The open trajectory runs through the margins and exits the frame. Hold the entire image completely still for the final 1.2 seconds.
CHOREOGRAPHY
Use only three camera operations: pullback, roll, velocity match.
Give each operation a rhetorical purpose.
Keep the currently read phrase at least 64px high in the 1080px composition.
Motion blur may affect trailing geometry, never the active text.
No word may begin its ornamental travel before its reading hold finishes.
IMPLEMENTATION
Represent the ellipse and departure path analytically. Blend position and tangent continuously at the departure point; no teleportation.
Use arc-length sampling for consistent spacing along curves.
Separate camera transforms from glyph orientation.
Cache glyph rendering and static geometry.
Expose window.ready and window. seek(t). Seeking must pause playback and render any time from 0 through 20 deterministically, including out-of-order calls.
Provide window.frame(n) for n=0…1199 at t=n/60.
Render t=20 as the final held composition.
Use no accumulated physics or runtime randomness.
QUALITY GATE
Inspect frames at 0, 3, 5, 7.5, 10.5, 13, 16, and 19 seconds.
Verify that the same tracked phrase visibly follows its own trajectory.
한국어 번역
존 F. 케네디의 1962년 9월 12일 라이스 대학교 연설을 바탕으로 “ESCAPE THE ORBIT,”이라는 제목의 20.00초 키네틱 타이포그래피 필름을 제작하라.
핵심 경험: 한 문장이 스스로 자신의 궤적을 바꿀 수 있음을 발견한다.
완전하고 자체 포함된 HTML 파일 하나를 납품하라. 컴포지션: 1080×1080. 목표: 60fps. Canvas, SVG 또는 내장 WebGL을 사용하라. 필요한 에셋과 라이브러리를 임베드하라. 이 필름은 오디오 없이도 작동해야 한다.
정확한 표시 텍스트
“We choose to go to the moon”
“[…]”
“not because they are easy,”
“but because they are hard”
이 순서를 유지하라. 대괄호 말줄임표는 생략된 발언을 명시적으로 나타낸다. 출처 표기는 발췌문과 분리된다. 추가 슬로건은 없다.
아트 디렉션
배경: 미드나이트 # 080D23.
주요 활자: 웜 화이트 # FFF4DD.
궤적: 일렉트릭 코럴 # FF654F.
보조 궤도 형상: 블루 # 6685FF.
연설문에는 넓고 자신감 있는 그로테스크를, 마지막 강조 단어에는 날카롭게 그려진 이탤릭을 사용하라. 우주선 대시보드처럼 보이는 것은 피하라. 로켓, 우주비행사 일러스트, 별밭 배경, 렌즈 플레어, 장식적 텔레메트리는 없다.
프레임은 표현력을 얻은, 유례없이 정교한 천문 기구를 닮아야 한다.
핵심 시각 규칙
문장의 베이스라인은 궤적이다.
처음에는 닫힌 궤도에 갇혀 있다. 수사적 결정이 그 궤도를 열린 경로로 바꾼다. 글자들은 처음부터 끝까지 같은 여행자로 남는다.
추상적인 궤도 은유를 사용하라; 지어낸 임무 데이터를 제시하거나 물리적으로 정확한 비행 시뮬레이션을 암시하지 마라.
스토리보드
0.00–3.50
도입 발췌문이 중앙을 가로질러 크고 수평으로 나타난다. 세 개의 의미 있는 구절 그룹으로 드러내라.
가느다란 타원 하나가 베이스라인 뒤를 지나간다. 작은 원형 달 표시가 그 먼 초점을 차지한다.
완성된 구절을 700ms 동안 움직이지 않고 유지하라.
3.50–6.00
카메라가 뒤로 물러난다. 이전에 곧았던 베이스라인이 얕은 곡률을 드러낸다.
구절은 하나의 응집된 단위로 타원을 따라 이동한다. 초기 움직임 동안 글리프는 수직을 유지하라. 읽기 유지가 끝난 뒤에만 글리프가 점진적으로 경로의 접선을 받아들일 수 있다.
관람자는 문장이 나아가는 것이 아니라 선회하고 있음을 깨닫는다.
6.00–7.00
대괄호 생략 표시를 복잡하지 않은 중앙 오프닝에 보여라. 궤도 움직임이 감속한다.
7.00–10.50
다음 절을 궤도의 가까운 쪽에서 드러내라. 그 마지막 단어는 매끄럽고 힘들이지 않는 하나의 호를 지나 시작한 곳을 향해 돌아온다.
이 용이함은 우아하지만 성과가 없게 느껴져야 한다. 코믹한 튕김은 피하라.
10.50–14.50
마지막 절을 변형하기 전에 수평으로 드러내라.
강조 지점에서 타원이 정확한 한 지점에서 열린다. 동일하게 트래킹된 글자 그룹이 새로운 접선을 받아 떠난다.
의도적인 70도 카메라 롤을 한 번 수행하라. 궤도 장이 주위에서 방향을 바꾸는 동안에도 활성 구절이 읽을 수 있도록 역회전시켜라.
궤적은 왼쪽 아래에서 오른쪽 위로 휩쓸고 지나간다. 가속은 카메라 흔들림이 아니라 뒤따르는 표시들 사이의 간격이 벌어지는 것으로 전달된다.
14.50–17.00
카메라가 떠나는 구절의 속도에 맞춘다. 구절은 시각적으로 정지되고 옛 궤도는 그 아래로 물러난다.
달 표시는 기하학적 겹침을 통해 절제된 초승달로 확대된다. 초승달은 만화 같은 일러스트가 되지 않으면서 목적지를 감싼다.
17.00–20.00
선택된 발췌문을 읽기 순서대로, 생략 표시를 포함하여 담은 여유 있는 편집적 구성으로 해소하라.
열린 궤적은 여백을 가로질러 프레임 밖으로 나간다. 마지막 1.2초 동안 전체 화면을 완전히 정지시켜라.
안무
세 가지 카메라 동작만 사용하라: 풀백, 롤, 속도 매칭.
각 동작에 수사적 목적을 부여하라.
현재 읽히는 구절은 1080px 컴포지션에서 최소 64px 높이를 유지하라.
모션 블러는 뒤따르는 형상에는 영향을 줄 수 있지만, 활성 텍스트에는 절대 영향을 주지 않는다.
어떤 단어도 읽기 유지가 끝나기 전에 장식적 이동을 시작할 수 없다.
구현
타원과 출발 경로를 해석적으로 표현하라. 출발 지점에서 위치와 접선을 연속적으로 블렌딩하라; 순간이동은 없다.
곡선을 따라 일관된 간격을 위해 호 길이 샘플링을 사용하라.
카메라 변환을 글리프 방향과 분리하라.
글리프 렌더링과 정적 형상을 캐시하라.
window.ready와 window. seek(t)를 노출하라. 시킹은 재생을 일시정지해야 하며, 순서가 뒤바뀐 호출을 포함해 0에서 20까지 임의의 시점을 결정론적으로 렌더해야 한다.
t=n/60에서 n=0…1199에 대해 window.frame(n)을 제공하라.
t=20을 최종 유지 구성으로 렌더하라.
누적 물리나 런타임 무작위성을 사용하지 마라.
품질 게이트
0, 3, 5, 7.5, 10.5, 13, 16, 19초의 프레임을 검사하라.
동일하게 트래킹된 구절이 자신의 궤적을 눈에 보이게 따라가는지 확인하라.
