<inputs>
Ask me for: my product's name (one lowercase word, it becomes a black wordmark with a period), the one job a user hands it before bed, the three results it reports by morning, two photos of the same place at night and by day (aligned, so a crossfade reads as a real sunrise), one sunny daytime photo for outside the logo, and a song with a big hit near its start. If I skip any, use the defaults: "nightshift", "book 10 sales calls this week", 200 leads found / 200 emails sent / 10 calls booked.
</inputs>
<direction>
A 24 second square product launch video, 1440x1440 at 60fps, 2D only, one continuous take that loops. The whole video happens inside the period of the wordmark. Outside it's daytime (the sunny photo behind a black wordmark). Inside it's the night photo under iOS-style glass panels (the blurred photo behind each panel, a tint, a rim light). Nothing cuts: every scene grows out of the last, shapes morph, dots fly, colours change under floods. Every morph glides 0.8s on cubic-bezier(.45,0,.15,1) and the camera zoom rides the same curve. Geist, the real macOS pointer, soft shadows that grow with each shape's height.
Banned: flat or gradient backgrounds made in code, camera zooms into tiny points, hard cuts, crossfades between scenes, bouncy springs, particles, glows, holds longer than 1s, cropped type.
</direction>
<structure>
Beats are the song's. The song enters on its big hit as the first pill appears.
Open: the letters slide into the period and vanish into it while it glides to the middle. The period opens like an iris onto the night inside it, and "you log off at 6", then "[product] doesn't", roll through one mask line over the night photo.
Ask: a glass "Ask [product]" pill springs in. The cursor clicks it, it glides into an input and the job types out.
Find: send shrinks the input to a dot that ripples into a 23x15 grid. A scan line sweeps it, 200 dots light up and a counter counts them.
Write: the lit dots pour into a glass email composer. A second, purple cursor labelled "[product]" types a personal opener and presses Send, and the counter runs to 200/200.
Night: the composer becomes a glass orb with a progress ring. A clock chip swaps 11:42 PM, 3:17 AM, 5:02 AM, 6:59 AM while the sky relights from night to dawn and "while you sleep" rolls in.
Results (beat 20): the orb turns black and goo-splits into the three result pills. The checks pop green.
Morning: the pills merge into a Dynamic Island that grows into a phone lock screen: the day photo, the date, a big 7:00, the bezel growing out of the screen edge. Three glass notifications stack in, and the cursor taps the first, which opens like iOS.
Proof: a week calendar (10 meetings pop in, a hover shows one's time), then a pipeline chart ($48,200 counts up, the line draws, a hover follows it). A black flood from the line's end becomes "Start your night shift →" and the cursor clicks it.
Out: the button shrinks into a dot, the whole scene closes down into it like an iris, and the letters slide back out of the period. The tagline rises. Last frame = first frame.
</structure>
<build>
1. One HTML canvas. Everything is a pure function of time inside seek(t): no timers, no state between frames.
2. One element morphs through every state (size, radius, colour, material) from a table of beat times, so retiming is one edit.
3. Render the inside world into an offscreen canvas and reveal it through the period with a circular mask. Never zoom the camera into the dot.
4. Glass: a pre-blurred copy of the photo clipped to the shape, then a tint and a gradient rim.
5. Goo: blur + alpha threshold on an offscreen layer for the split and the merge.
6. Sound: a downloaded SFX for every event, each placed by its measured peak. The song enters on its hit. Loudnorm to -14 LUFS.
7. Render with Playwright at 60fps with 4 motion-blur subframes. Scan every frame for single-frame jumps and fix each one.
</build>
<gotchas>
A camera zoom into an off-centre dot swings sideways and spikes, so open the dot instead. Ease a closing iris by area, not radius, or its first frames jump. A helper that sets globalAlpha must restore the caller's, or fading cards pop. Counters read the frame's time, not the subframe's, or the digits smear.
</gotchas>
<start>
Ask me for the inputs, then show me the beat map and 6 stills (open, find, write, results, phone, out) before you render.
</start>
한국어 번역
<inputs>
저에게 다음을 물어보세요: 제 제품 이름(소문자 한 단어, 마침표가 붙은 검은 워드마크가 됩니다), 사용자가 잠들기 전에 이것에 맡기는 단 하나의 작업, 아침까지 이것이 보고하는 세 가지 결과, 같은 장소를 밤과 낮에 찍은 사진 두 장(정렬되어 있어 크로스페이드가 실제 일출처럼 읽힙니다), 로고 바깥에 쓸 화창한 낮 사진 한 장, 시작 부분에 큰 히트가 있는 노래. 제가 어느 하나라도 건너뛰면 기본값을 사용하세요: "nightshift", "book 10 sales calls this week", 200 leads found / 200 emails sent / 10 calls booked.
</inputs>
<direction>
24초 길이의 정사각형 제품 출시 영상, 1440x1440, 60fps, 2D만, 루프되는 하나의 연속 테이크. 영상 전체가 워드마크의 마침표 안에서 일어납니다. 바깥은 낮입니다(검은 워드마크 뒤의 화창한 사진). 안쪽은 iOS 스타일 유리 패널 아래의 밤 사진입니다(각 패널 뒤의 흐린 사진, 틴트, 림 라이트). 아무것도 컷되지 않습니다: 모든 장면이 직전 장면에서 자라나고, 도형이 변형되고, 점들이 날아다니고, 색이 플러드 아래에서 바뀝니다. 모든 변형은 cubic-bezier(.45,0,.15,1)로 0.8초 동안 미끄러지고, 카메라 줌도 같은 곡선을 탑니다. Geist, 실제 macOS 포인터, 각 도형의 높이에 따라 커지는 부드러운 그림자.
금지: 코드로 만든 평면 또는 그라디언트 배경, 아주 작은 점으로의 카메라 줌, 하드 컷, 장면 간 크로스페이드, 튀는 스프링, 파티클, 글로우, 1초를 넘는 정지, 잘린 글자.
</direction>
<structure>
비트는 노래의 것입니다. 첫 번째 필이 나타날 때 노래가 큰 히트에서 들어옵니다.
오픈: 글자들이 마침표 속으로 미끄러져 들어가 그 안에서 사라지고, 마침표는 가운데로 미끄러집니다. 마침표가 조리개처럼 열리며 그 안의 밤이 드러나고, "you log off at 6"에 이어 "[product] doesn't"가 밤 사진 위의 하나의 마스크 라인을 타고 흘러갑니다.
묻기: 유리로 된 "Ask [product]" 필이 스프링처럼 들어옵니다. 커서가 그것을 클릭하면 필이 입력창으로 미끄러져 들어가고, 작업 내용이 타이핑됩니다.
찾기: 전송이 입력창을 하나의 점으로 줄이고, 그 점이 파문을 일으키며 23x15 그리드로 퍼집니다. 스캔 라인이 그것을 훑고, 200개의 점이 켜지며 카운터가 그것들을 셉니다.
쓰기: 켜진 점들이 유리 이메일 작성창으로 쏟아져 들어갑니다. "[product]"라고 표시된 두 번째 보라색 커서가 개인화된 도입 문장을 타이핑하고 전송을 누르면, 카운터가 200/200까지 올라갑니다.
밤: 작성창이 진행 링이 있는 유리 구체가 됩니다. 시계 칩이 11:42 PM, 3:17 AM, 5:02 AM, 6:59 AM을 차례로 바꾸고, 하늘이 밤에서 새벽으로 다시 밝아지는 동안 "while you sleep"이 흘러 들어옵니다.
결과(비트 20): 구체가 검게 변하고 구(goo)처럼 갈라져 세 개의 결과 필이 됩니다. 체크 표시가 초록색으로 톡 나타납니다.
아침: 필들이 하나의 다이나믹 아일랜드로 합쳐지고, 그것이 폰 잠금 화면으로 자라납니다: 낮 사진, 날짜, 큼직한 7:00, 화면 가장자리에서 자라나는 베젤. 세 개의 유리 알림이 차례로 쌓이고, 커서가 첫 번째를 탭하면 그것이 iOS처럼 열립니다.
증명: 주간 캘린더(10개의 미팅이 톡톡 나타나고, 호버하면 하나의 시간이 보입니다), 그다음 파이프라인 차트($48,200이 카운트업되고, 선이 그려지고, 호버가 그 선을 따라갑니다). 선 끝에서 시작된 검은 플러드가 "Start your night shift →"가 되고, 커서가 그것을 클릭합니다.
아웃: 버튼이 점으로 줄어들고, 장면 전체가 조리개처럼 그 안으로 닫히며, 글자들이 마침표 밖으로 다시 미끄러져 나옵니다. 태그라인이 떠오릅니다. 마지막 프레임 = 첫 프레임.
</structure>
<build>
1. 하나의 HTML canvas. 모든 것은 seek(t) 안에서 시간의 순수 함수입니다: 타이머 없음, 프레임 사이 상태 없음.
2. 하나의 요소가 비트 시간 표에서 모든 상태(크기, 반경, 색, 재질)를 거치며 변형되므로, 타이밍 재조정은 한 번의 수정입니다.
3. 안쪽 세계를 오프스크린 canvas에 렌더링하고, 원형 마스크로 마침표를 통해 드러내세요. 카메라를 점 속으로 줌하지 마세요.
4. 유리: 미리 흐리게 만든 사진 복사본을 도형에 클리핑한 뒤 틴트와 그라디언트 림을 적용합니다.
5. 구(goo): 분할과 병합을 위해 오프스크린 레이어에 블러 + 알파 임계값을 적용합니다.
6. 사운드: 모든 이벤트마다 다운로드한 SFX를 사용하고, 각각 측정된 피크에 배치합니다. 노래는 히트에서 들어옵니다. -14 LUFS로 Loudnorm합니다.
7. Playwright로 60fps, 4개의 모션 블러 서브프레임으로 렌더링하세요. 모든 프레임을 스캔해 단일 프레임 점프를 찾아 각각 수정하세요.
</build>
<gotchas>
중심에서 벗어난 점으로의 카메라 줌은 옆으로 휘어지며 튀므로, 대신 점을 여세요. 닫히는 조리개는 반지름이 아니라 면적으로 이징하세요. 그렇지 않으면 첫 프레임들이 튑니다. globalAlpha를 설정하는 헬퍼는 호출자의 값을 복원해야 합니다. 그렇지 않으면 페이드되는 카드가 톡 튀어 보입니다. 카운터는 서브프레임이 아니라 프레임의 시간을 읽어야 합니다. 그렇지 않으면 숫자가 번집니다.
</gotchas>
<start>
저에게 입력값을 물어본 뒤, 렌더링 전에 비트 맵과 6장의 스틸(오픈, 찾기, 쓰기, 결과, 폰, 아웃)을 보여주세요.
</start>
