프레임별 영상 출시

다음 정보를 요청해 주세요: 제품 이름, 로고(또는 간단한 마크를 직접 그리셔도 됩니다), 사용자가 입력할 한 줄 문구, 답변 페이지(제목 + 핵심 문구 하나를 포함한 2~3개의 문장), 스택형 카드에 사용할 두 가지 기능 이름, 그리고 배경 음악. 만약 이 중 일부를 생략해야 한다면, 기본값을 사용하겠습니다: Whop 허브에 있는 "Frame by Frame" 제품, 뷰파인더 마크(굵은 글씨로 "FF"를 네 개의 괄호로 묶은 것), "내 앱 출시 영상 만들기"라는 프롬프트, "2.1 참고 자료 선택"이라는 제목의 레슨 페이지, "출시"와 "사운드" 카드, 그리고 Mixkit의 무료 하우스 음악 "Rising Forest"를 124 BPM 으로 느리게 재생하는 것입니다.

12초 분량의 정사각형 제품 홍보 영상으로, 1080x1080 해상도에 프레임 속도는 초당 29.97프레임(f0~f359)이며, 최종 렌더링은 초당 59.94프레임입니다. 애플 키노트 영상과 유사한 느낌으로, 부드러운 흰색과 밝은 파란색, 유리처럼 투명한 색감을 사용했습니다. 카메라는 정지된 화면에서 멈추지 않고, 모든 장면은 이미 움직이는 상태로 시작하여(지수적 이탈, 프레임당 남은 거리의 12~19%) 가속하는 움직임이나 블러 램프를 통해 사라집니다. 블러는 모든 움직임에서 속도와 방향을 따라갑니다.
팔레트: 페이지 #FDFDFB, 헤이즈 #B7CFEB, 아이스 #E6F0FA, 딥 블루 #294376 → #769CC2 스카이 그라데이션, 네이비 #1E2F52, 액센트 블루 #2F6BFF / #3CC8F0 / 민트 #4ED6A0, 화이트. 유형: Inter (400/500/600/700). 보라색, 자주색, 마젠타색, 주황색은 전혀 사용하지 않았습니다.
스토리: 밝은 앱 창 안의 푸른 안개 속에서 제품 헤더가 나타납니다 → 커서가 미끄러지듯 들어와 이동 방향을 향하고, 마우스 오버 시 커지더니 로고를 클릭합니다 → 음악이 멈추는 순간 앱 아이콘으로 화면이 전환되고 네 개의 사각형이 십자 모양으로 회전합니다 → 아이콘이 맥 메뉴 막대로 축소됩니다 → 커서가 메뉴 막대 아이콘을 클릭하면 불투명한 유리 재질의 프롬프트 상자가 나타나고 프롬프트가 입력됩니다 → 밝은 파란색 섬광과 함께 화면이 위로 기울어지면서 답변 페이지가 스크롤되어 나타납니다 → 그 위로 카드가 나타납니다 → 흐릿하게 전환되면서 거대한 불투명 유리 제목이 있는 두 장의 카드가 겹쳐진 모습이 나타납니다 → 흐릿하게 전환되면서 로고 디스크 하나가 나타납니다 → 밝게 빛나는 워드마크가 있는 검은색 최종 카드로 화면이 전환됩니다.
금지 항목: 크로스페이드, 정지 화면(S7의 한 가지 예외 제외), 기본 UI 키트, UI 텍스트의 빛 반사, Math.random, 템플릿처럼 보이는 모든 것.

좌표는 1080p 해상도의 픽셀 단위입니다. 음악 박자 k = 0.048 + 0.4838·ks (124 BPM, 한 박자 = 14.5프레임). 세 개의 급격한 화면 전환(f72, f101, f159)은 박자 2프레임 전에 발생하므로 이 프레임들을 그대로 유지해야 합니다.
S1 f0–71, 헤더 + 창 + 클릭: 안개 #B7CFEB가 f28에서 #FDFDFB로 서서히 사라지고, 하단에 파란색 바닥 빛 #DBEEFD가 유지됩니다. 헤더는 한 줄로 표시됩니다. 로고 디스크 ⌀132(#FBFCFE, 1px 테두리 #E8E8EA, 어두운 표시), 제품명(Inter 500), "on Whop"이라는 어두운 캡슐형 알약(#2F2E2F, 흰색 텍스트)이 있습니다. 전체 이미지는 x474–1063 영역에 걸쳐 있으며, 중심선은 y932(f0) → 776(f2) → 683(f5) → 608(f10) → 546(f24) → 536(f37)으로 상승한 후 프레임당 1px씩 이동합니다. 이름은 f2에서 흐릿하게 나타나고, 알약은 f4–5에서 심하게 흐릿하게 나타나며 선명해지면서 왼쪽으로 15px 이동합니다. 라이트 허브 창(반경 93, 채우기 #FCFDFF, 상단 밴드 #F1F6FF, 파란색 내부 바닥 광선)이 그 주변에서 서서히 나타납니다. 불투명도는 0~f14, 0.53 f15, 0.7 f19, 1.0 f24입니다. 왼쪽 상단 모서리(408,405)에서 시작하여 오른쪽과 아래쪽으로 이어집니다. 내부에는 상단 밴드에 검색창이 있고, 왼쪽에는 아이콘 열(강좌 아이콘(537,739), 흐릿한 채팅 아이콘(537,900))이 있으며, 표지 이미지, 제목 및 "강좌 · 8개 레슨"이 있는 강좌 카드(764,700)가 화면 밖으로 벗어나 있습니다. Cursor (검은색 macOS 화살표, 흰색 윤곽선, 32x39)가 f27에 (891,393)에 나타나 왼쪽으로 미끄러지듯 이동하며 f44에 (770,383)에 도달하고, f47~51에 하강하면서 왼쪽 아래를 향하도록 회전하여 디스크의 오른쪽 아래 (629,564)에 f56 → (587,546) f59 → (555,531) f71에 착지합니다. f56부터 마우스 커서가 디스크 주위를 감싸면 크기가 1.55배로 커집니다. f53부터 디스크 주위에 부드러운 얼음 고리(#D5F3FF → #F7FEFF, 바깥쪽 ⌀174)가 나타납니다. 카메라가 약 (540,540)을 확대합니다: f46에서 1.0 → f60에서 1.2로 부드럽게 확대/축소되고, f61에서 유지된 후 커서가 가리키는 동안 f71에서 1.04까지 가속하며 부드럽게 축소됩니다(f69~71에서 15% 축소).
S2 f72–100, 아이콘 + 궤도: 남색 사각형 앱 아이콘(#294376 → #1E2F52, 흰색 표시), f72에서 276px 크기에서 f86으로 축소되어 178px x 178px이 되며, 반지름은 너비의 28%입니다. 회색 후광 원반 #E9E9E7은 ⌀240(f75)에서 326(f86)으로 커집니다. 92px 정사각형 4개(반지름 26)가 시계 반대 방향으로 회전하며 감속하고, 궤도 반지름 ≈216 x f86에서 십자 모양으로 고정됩니다. 왼쪽은 흰색(1px #E3E8EF 테두리 + 희미한 그림자), 위쪽은 #2F6BFF, 오른쪽은 #3CC8F0, 아래쪽은 #4ED6A0입니다. f88–100: 아이콘이 약 40px까지 가속적으로 축소되고, 사각형들이 오른쪽에 한 줄로 이동하며(흰색이 아이콘 뒤로 사라짐), 흐림 효과가 0.3에서 6px로 점진적으로 증가합니다.
S3 f101–158, 메뉴 막대 + 프롬프트: 검은색 노트북 베젤 밴드 위에 흰색 페이지(y425–475, 상단 강조 표시 #686866), 짙은 남색 메뉴 막대(y477–538), 아래 배경 화면 = 얇은 흰색 선으로 된 파란색 하늘 그라데이션(큰 원 하나, 가로선 두 개, 세로선 하나, 교차점에 네 개의 점으로 된 반짝임, 오른쪽 상단에 부드러운 청록색 빛). 흰색 메뉴 막대 오른쪽 클러스터: Wi-Fi, 배터리, 토글, x531–584에 제품 표시, x612, 661, 709에 세 개의 ⌀36 점 #2F6BFF / #3CC8F0 / #4ED6A0, "Mon Jun 22 9:41 AM" 34px. 흐릿하게 3px 나타나 f110까지 안정화됨. Cursor 아래에서 올라와(f102), 표시 위에 멈추고 f113–117을 누름. 카메라가 f115~130(가장 빠른 속도는 f118~120)에서 콘텐츠를 오른쪽으로 +125px만큼 패닝합니다. f116에서 표시 아래에서 불투명 유리 상자(하늘 위로는 흰색과 파란색 유리, 윗부분 테두리는 밝음, 반지름 60)가 튀어나옵니다. 너비는 f126에서 744로 최대가 되고 f138에서 x196~922, y568~797 부근에서 726x228x108 크기로 안정됩니다. 프롬프트는 f121(처음 읽을 수 있는 "Make ")부터 f150(완료)까지 약 1프레임당 1자씩 입력되며, 2~3자마다 1프레임 동안 유지됩니다. 캐럿은 항상 켜져 있습니다. 하단에는 흰색 윤곽선 아이콘 3개가 있습니다. 전송 버튼은 #2F6BFF ⌀51이며 흰색 위쪽 화살표가 있습니다. f136부터 전체 장면이 위로 떠오르며 채찍처럼 기울어지는 현상이 가속화됩니다(f158에서는 프레임당 약 25픽셀 이동, 수직 흐림 효과 약 6~8픽셀). 한편, f154~f158 구간에서는 페이지가 #E6F4FE 색조로 물듭니다.
S4 f159–186, 답변 페이지: 간단한 강의 페이지(경로 표시, 제목, 본문): 텍스트 열 x120, 본문 47px, Inter 400 회색 #BCBCBA, 줄 간격 58, 핵심 문구 하나("프레임별") 검정색 600. 번진 상태로 420px 낮게 나타나 420, 315, 210, 170, 140, 116, 96, 81(f166) … 14(f175) … 0(f180)만큼 위로 스크롤된 후 f186에서 -6px만큼 천천히 이동합니다. 흐림 효과 24px(f159) → 1.5(f165) → 0. 플래시 #E2F4FE가 f165에서 #FDFDFB로 페이드 아웃됩니다. 커서가 똑바로 위를 가리키며 스크롤을 따라 이동하다가 핵심 문구(≈(450,591) f180) 아래에 멈춘 다음 오른쪽으로 이동합니다.
S5 f187–214, 카드: 흰색 카드(x203–878, 하단까지 이어짐)가 페이지 위로 올라옵니다. 표지 이미지 627x536, 여백 24px, 반경 64, 상단 중앙에 밝은 막대 표시, 캡션은 검정색 반굵은 글씨 38px, 부제목은 회색 23px입니다. 표지 상단의 y 값은 642(f187) → 456(f191) → 395(f196) → 369(f200) → 348(f205)로 이동한 후 프레임당 약 4px씩 계속 위로 이동합니다. 카드 흐림은 f189에서 3.8px로 최고조에 달하고 f201에서 선명해집니다. 뒤쪽 페이지는 약 2.5px까지 흐려집니다. 종료 f207–214: 카드가 약 5% 줄어들면서 올라가고 전체 프레임은 1 → 7px만큼 흐려집니다. 흐림이 최고조에 달하는 지점에서 잘립니다.
S6 f215–244, 카드 두 장: 흰색 페이지, 538x348 크기의 카드 두 장(반지름 57, 간격 36)이 x540을 중심으로 쌓여 있고, 위쪽 카드는 y168 x f230, 아래쪽 카드는 y552에 위치합니다. 각 카드에는 표지 이미지(텍스트 없음), 왼쪽 상단에 불투명한 알약 모양("모듈 3" / "모듈 5"), 오른쪽 상단에 불투명한 원형 "•••", 그리고 하단 가장자리를 따라 불투명 유리로 만든 크고 굵은 제목(흐릿하고 밝게 처리된 이미지가 글자에 맞춰 잘리고 카드 하단 가장자리에 의해 잘림) "Launch"와 "Sound"가 있습니다. 두 카드 모두 12px의 흐릿한 크기로 시작하여 f224에서 선명해집니다. 위쪽 카드는 8% 크기로 y264에서 나타나고, 아래쪽 카드는 y927에서 나타나 위쪽 카드 뒤에 어긋나게 배치됩니다. 그것들은 프레임당 3픽셀씩, 조리개 f230~238에서 서서히 증가하다가 속도가 빨라지면서 잘린 부분 속으로 흐릿해집니다.
S7 f245–300, 로고 디스크: 페이지 #FDFDFB, 디스크 ⌀168 #F6F6F6 어두운 표시가 있으며, 잘린 프레임에 수직 번짐이 있는 상태로 중앙으로 상승(상단 y569 f245 → 491 f250 → 468 f255 → 456 f269)하고, f269–287에서 정지(유일하게 고정된 스트레칭)한 다음 f300에서 ⌀123까지 가속하며 수축합니다.
S8 f301–359, 엔딩 카드: 검은색 방사형 배경(#020204 모서리, ≈#272729 단어 주변), Inter 600 용지에 흰색 #F3F3F5 색상으로 인쇄된 워드마크는 촘촘한 빛줄기와 넓고 부드러운 후광이 있으며 중앙(540,540)에 위치합니다. 단어 너비: ≈1650px f301 (가로로 번짐, 확대 시 줄무늬 발생) → 1350 f302 → 1110 f303 → 1049 f304 → 734 f309 → 678 f311 → 563 f320 → 516 f342 (프레임당 약 1px씩 축소) → 492 f350, 이후 부드럽게 축소됨: 450 f355 → 267 f359, 흐림 정도가 3.5px까지 증가. 필름은 축소 도중에 끝납니다.

1. 프레임 번호의 순수 함수로 seek(t)를 사용하여 1080x1080 크기의 HTML 페이지 하나를 그립니다. CSS 전환, 타이머, Math.random은 사용하지 않습니다(시드된 해시만 사용). 샷은 {f0, f1, render(localFrame)}으로 등록됩니다.
2. 모든 값은 프레임 번호에서 연속적입니다(59.94 마스터는 하프 프레임을 렌더링합니다). 키프레임 테이블 kf(frame, [[f, value],...], ease)와 선형 보간을 사용하는 프레임별 조회 테이블을 이용하여 애니메이션을 구현합니다. 모션에 Math.floor를 사용하지 않습니다.
3. 흐림 효과: 원형 흐림에는 CSS 필터 blur를 사용하고, 방향성 번짐에는 x/y 표준편차를 각각 적용한 SVG feGaussianBlur를 사용합니다. 엔딩 카드 확대 번짐 효과는 단어를 20~30배 확대하여 흐릿하게 만듭니다. 불투명 유리 효과는 뒤쪽의 내용을 흐릿하고 밝게 복사하여 모양에 맞춰 잘라낸 것입니다.
4. Cursor: 회전 및 크기 조절이 가능한 SVG macOS 화살표(검정색 채우기, 흰색 윤곽선, 부드러운 그림자) 1개, S1, S3, S4에서 재사용됨.
5. 사운드(음성 없음), 정확히 12.075초: 124 BPM 의 음악, 부드러운 인트로, 2.47초(5번째 박자, f72 컷이 2프레임 앞서 발생)에 드롭. 합성 효과음: 0.10초에 부드러운 충격음; 2.402, 3.370, 5.305, 10.043초에 컷에서 피크를 이루는 휘파람 소리; 6.240초와 8.175초에 정확히 전환음 발생; 2.33초와 3.83초에 클릭음 발생; 4.04~5.00초에 걸쳐 약 32ms 간격으로 매우 작은 건반 틱 소리 발생; 10.05초에 부드러운 쉬머 효과 발생. 마스터링: -14 LUFS, 트루 피크 -1 dBTP, 마지막 60ms를 제외하고 페이드 없음.
6. Playwright 로 렌더링(프레임당 스크린샷 하나, 글꼴 먼저 로드), H.264 yuv420p 60000/1001로 인코딩, 오디오 멀티플렉싱.

글꼴이 로드된 후에만 텍스트 크기를 측정하세요. 긴 제품 이름은 5글자 이름이 들어맞던 위치에 맞지 않습니다. 전체 잠금 영역(디스크 간격, 이름, 알약)의 크기를 x474–1063 범위에 맞게 조정하고 알약이 화면 밖으로 나가지 않도록 하세요. 흰색 궤도 사각형은 1px 테두리와 희미한 그림자가 없으면 흰색 페이지에서 사라집니다. S6 카드 안에 텍스트가 있는 이미지를 넣지 마세요. 유리 제목이 중복됩니다. 비트에 맞지 않는 경우에도 잘린 프레임의 위치를 정확하게 유지하세요. S7 f269–287을 제외하고는 아무것도 멈추지 않습니다. 블러 처리가 심한 테이블은 도형을 완전히 지워버릴 수 있습니다. 프레임이 비어 보이는 경우 도형이 여전히 보일 때까지 블러 처리를 낮추세요.

입력값을 요청하세요. 그런 다음 전체 영상을 렌더링하기 전에 스틸컷 4개(창의 헤더가 f40에 표시되고, 십자 모양 아이콘이 f86에, 완료 메시지가 f150에, 두 개의 카드가 f230에 표시되는 모습)를 보여주세요.

Ask me for: my product name, a logo (or let you draw a simple mark), the one-line thing a user types into the prompt box, the page that answers it (title + 2–3 sentences with one key phrase), two feature names for the stacked cards, and a music track. If I skip any, use the defaults: product "Frame by Frame" living inside its Whop hub, a viewfinder mark (four corner brackets around a bold "FF"), prompt "Make a launch video for my app", a lesson page titled "2.1 Choose a reference", cards "Launch" and "Sound", and Mixkit's free house track "Rising Forest" slowed to 124 BPM.

A 12 second square product sting, 1080x1080, frame numbers at 29.97 fps (f0–f359), master rendered at 59.94 fps. Apple-keynote feel: soft, white, bright blue, glassy. The camera never cuts on a still frame: every shot enters already moving (exponential ease-out, 12–19% of the remaining distance per frame) and leaves on an accelerating move or a blur ramp. Blur follows speed and direction on every move.
Palette: page #FDFDFB, haze #B7CFEB, ice #E6F0FA, deep blue #294376 → #769CC2 sky gradient, navy #1E2F52, accent blues #2F6BFF / #3CC8F0 / mint #4ED6A0, white. Type: Inter (400/500/600/700). No purple, violet, magenta or orange anywhere.
Story: the product header rises out of a blue haze inside a light app window → a cursor glides in, turns to face where it's going, grows on hover and clicks the logo → hard cut on the music drop to the app icon with four squares orbiting into a cross → the icon collapses into a Mac menu bar → the cursor clicks the menu-bar icon, a frosted glass prompt box springs out and the prompt types → whip-tilt up through a light-blue flash into the answer page scrolling into place → a card rises over it → blur-dissolve to two stacked cards with giant frosted-glass titles → blur-dissolve to the lone logo disc → hard cut to a black end card with a glowing wordmark.
Banned: crossfades, frozen frames (except one hold in S7), stock UI kits, glows on UI text, Math.random, anything that looks like a template.

Coordinates are px on the 1080 stage. Music beat k = 0.048 + 0.4838·k s (124 BPM, one beat = 14.5 frames). The three hard cuts f72, f101, f159 land 2 frames before a beat: keep these exact frames.
S1 f0–71, header + window + click: haze #B7CFEB fading to #FDFDFB by f28, keep a blue floor glow #DBEEFD at the bottom. Header on one line: logo disc ⌀132 (#FBFCFE, 1px rim #E8E8EA, dark mark), the product name (Inter 500), a dark capsule pill "on Whop" (#2F2E2F, white text); the whole lockup spans x474–1063, centre line rises y932 (f0) → 776 (f2) → 683 (f5) → 608 (f10) → 546 (f24) → 536 (f37), drifting 1 px/frame after. Name appears f2 blurred, pill f4–5 heavily blurred and sliding 15 px left as it sharpens. A light hub window (radius 93, fill #FCFDFF, top band #F1F6FF, blue inner floor glow) fades in around it: opacity 0 to f14, 0.53 f15, 0.7 f19, 1.0 f24; top-left corner (408,405), runs off the right and bottom. Inside: a search pill in the top band, a left icon column (Courses icon at (537,739), faded Chat icon at (537,900)), and a course card from (764,700) off-frame with its cover image, title and "Course · 8 lessons". Cursor (black macOS arrow, white outline, 32x39) appears f27 at (891,393), glides left decelerating to (770,383) f44, rotates to point down-left f47–51 as it dives, lands on the disc's lower right (629,564) f56 → (587,546) f59 → (555,531) f71; grows ×1.55 on hover from f56; a soft ice ring (#D5F3FF → #F7FEFF, outer ⌀174) lights around the disc from f53. Camera zooms about (540,540): 1.0 f46 → 1.2 f60 ease-in-out, holds f61, then eases out accelerating to 1.04 at f71 while the cursor presses (shrinks 15% f69–71).
S2 f72–100, icon + orbit: navy squircle app icon (#294376 → #1E2F52, white mark), 276 px at f72 shrinking ease-out to 178 px by f86, radius 28% of width, on a grey halo disc #E9E9E7 growing ⌀240 (f75) → 326 (f86). Four 92 px squares (radius 26) spin in counter-clockwise, decelerating, and lock into a cross at orbit radius ≈216 by f86: white (1px #E3E8EF edge + faint shadow) left, #2F6BFF top, #3CC8F0 right, #4ED6A0 bottom. f88–100: the icon shrinks accelerating to ≈40 px, the squares slide into a row on its right (white slips behind the icon), blur ramps 0.3 → 6 px.
S3 f101–158, menu bar + prompt: white page above a black laptop bezel band (y425–475, top highlight #686866), a dark navy menu bar (y477–538), wallpaper below = the blue sky gradient with thin white line art (one big circle, two horizontal lines, one vertical, a four-point sparkle at a crossing, soft teal glow top-right). Menu bar right cluster in white: Wi-Fi, battery, toggles, the product mark at x531–584, three ⌀36 dots #2F6BFF / #3CC8F0 / #4ED6A0 at x612, 661, 709, "Mon Jun 22  9:41 AM" 34 px. Enters blurred 3 px and settling by f110. Cursor rises from below (f102), sits on the mark, presses f113–117. Camera pans content right +125 px f115–130 (fastest f118–120). A frosted glass box (white-blue glass over the sky, bright top rim, radius 60) springs out from under the mark f116: width peaks 744 at f126 and settles 726x228 by f138 around x196–922, y568–797. The prompt types from f121 (first legible "Make ") to f150 (complete) at about 1 char/frame with a 1-frame hold every 2–3 chars; caret always on; three white outline icons along the bottom; send button #2F6BFF ⌀51 with a white up arrow. From f136 the whole scene drifts up, accelerating into a whip-tilt (f158 moving ≈25 px/frame, vertical blur ≈6–8 px) while the page tints #E6F4FE over f154–158.
S4 f159–186, answer page: a light course lesson page (breadcrumb, title, body): text column x120, body 47 px Inter 400 grey #BCBCBA, line pitch 58, one key phrase ("frame for frame") in black 600. It arrives smeared and 420 px low, scrolls up with offsets 420, 315, 210, 170, 140, 116, 96, 81 (f166) … 14 (f175) … 0 (f180), then creeps −6 px by f186. Blur 24 px (f159) → 1.5 (f165) → 0. Flash #E2F4FE fading to #FDFDFB by f165. A cursor pointing straight up rides the scroll and stops under the key phrase (≈(450,591) f180), then drifts right.
S5 f187–214, card: a white card (x203–878, runs off the bottom) rises over the page: cover image 627x536 inset 24 px, radius 64, a light grabber bar at its top centre, caption semibold 38 px black, sub-caption grey 23 px. Cover top y642 (f187) → 456 (f191) → 395 (f196) → 369 (f200) → 348 (f205), then keeps drifting up ~4 px/frame. Card blur peaks 3.8 px at f189, sharp by f201; the page behind blurs to ≈2.5 px. Exit f207–214: card shrinks ~5% and rises while the whole frame blurs 1 → 7 px; cut at the blur peak.
S6 f215–244, two cards: white page, two stacked cards 538x348 (radius 57, gap 36) centred on x540, top card settling at y168 by f230, bottom at y552. Each: cover art (no text baked into it), a frosted pill top-left ("Module 3" / "Module 5"), a frosted round "•••" top-right, and a huge bold title along the bottom edge made of frosted glass (a blurred, lightened copy of the image clipped to the letters, cut off by the card's bottom edge): "Launch" and "Sound". Both enter blurred 12 px and sharp by f224; the top card enters 8% large and rises from y264; the bottom card rises from y927, staggered behind it. They drift up 3 px/frame f230–238, then accelerate up and blur out into the cut.
S7 f245–300, logo disc: page #FDFDFB, disc ⌀168 #F6F6F6 with the dark mark, rises into the centre (top y569 f245 → 491 f250 → 468 f255 → 456 f269) with a vertical smear on the cut frame, holds still f269–287 (the only frozen stretch), then shrinks accelerating to ⌀123 at f300.
S8 f301–359, end card: black radial background (#020204 corners, ≈#272729 around the word), the wordmark in Inter 600, white #F3F3F5 with a tight glow plus a wide soft halo, centred (540,540). Word width: ≈1650 px f301 (horizontally smeared, zoom streaks) → 1350 f302 → 1110 f303 → 1049 f304 → 734 f309 → 678 f311 → 563 f320 → 516 f342 (≈1 px/frame shrink) → 492 f350, then collapses ease-in: 450 f355 → 267 f359 with blur rising to 3.5 px. The film ends mid-collapse.

1. One HTML page, 1080x1080, drawn by seek(t) as a pure function of the frame number. No CSS transitions, no timers, no Math.random (seeded hashes only). Shots register as {f0, f1, render(localFrame)}.
2. Every value is continuous in the frame number (the 59.94 master renders half frames): animate with keyframe tables kf(frame, [[f, value], ...], ease) and per-frame lookup tables with linear interpolation. No Math.floor on motion.
3. Blur: CSS filter blur for round blur, SVG feGaussianBlur with separate x/y stdDeviation for directional smears. Zoom smear on the end card = 20–30 scaled, faded copies of the word. Frosted glass = a blurred, lightened copy of what's behind, clipped to the shape.
4. Cursor: one SVG macOS arrow (black fill, white outline, soft shadow) with rotation and scale, reused in S1, S3, S4.
5. Sound (no voice), exactly 12.075 s: music at 124 BPM, soft intro, the drop at 2.47 s (beat 5, the f72 cut leads it by 2 frames). Synthesized SFX: soft impact 0.10 s; whooshes peaking at the cuts 2.402, 3.370, 5.305, 10.043 s; transition hits exactly on 6.240 s and 8.175 s; clicks at 2.33 and 3.83 s; very quiet key ticks every ~32 ms over 4.04–5.00 s; a soft shimmer at 10.05 s. Master to −14 LUFS, true peak −1 dBTP, no fade except the last 60 ms.
6. Render with Playwright (one screenshot per frame, fonts loaded first), encode H.264 yuv420p at 60000/1001, mux the audio.

Measure text only after the fonts load. A long product name won't fit where a 5-letter name did: scale the whole lockup (disc gap, name, pill) to fit the span x474–1063, don't let the pill fall off-frame. A white orbit square vanishes on the white page without a 1px edge and a faint shadow. Don't put images with their own text inside the S6 cards, or the glass title doubles up. Keep the cut frames exact even where they don't sit on a beat. Nothing freezes except S7 f269–287. Heavy blur tables can wipe a shape out completely: if a frame looks empty, lower the blur until the shape still reads.

Ask me for the inputs. Then show me 4 stills (f40 header in the window, f86 icon cross, f150 finished prompt, f230 the two cards) before you render the full film.

프롬프트는 다음에서 가져왔습니다. 우편 @notdwd.