<inputs>
Ask me for: a one-word brand name for the wordmark (a verb works best), 9 to 12 high-res photos, a royalty-free song around 120 BPM with a drop and a quiet breakdown (Mixkit, free for commercial use), and a free stock clip of a plain wall with moving plant shadows (Pexels).
</inputs>
<direction>
An Apple-keynote launch film, 2D only, one continuous take. Every scene is made out of the previous one: nothing fades, blurs or cuts. Objects change shape instead: text rises out of a mask line, icons pop from zero on a spring, bars draw across, pages push, and a black shape floods the whole frame and contracts into the next scene. Warm off-white canvas, black UI, iOS 26 liquid glass over the photos. Archivo (wdth 125, weight 800) for the wordmark, Geist for UI. A cursor drives every change with real clicks, drags and long-presses. The camera zooms screen-studio style so each moment fills the square, and the cursor scales with it.
Banned: crossfades, blur-ins, brightness "developing", 3D flips, particles, glows, holds longer than 1s, anything that looks like a template.
</direction>
<structure>
120 BPM, 54 beats, something happens on every beat.
Open: the wordmark squeezes into its own period like an accordion, the dot grows into a black pill, a label rises inside it. Click: six iris blades close over the label and snap open onto a photo. The circle becomes a square, shrinks, the grid unfolds from behind it like a paper map (center, plus, corners), reflows into a bento, and a click zooms into one tile, landing exactly on the drop.
Glass: a glass word pops in letter by letter, melts into a droplet that stretches into a glass toolbar. The adjust icon turns it into a slider. Dragging relights the photo from day to golden hour (two aligned shots), and the knob turns into a glass lens while held. It lifts into a glass orb, the next photo opens inside it as a circle, and the orb expands into a lock screen: glass clock digits, date, and a home bar that stretches into a glass music player.
Stage: the lock screen pulls back into a phone (the bezel grows out of the screen edge). The Dynamic Island stretches like liquid, pinches off, flies over and grows into a Mac window that rolls up like a blind. Long-press the wallpaper, drag it onto a Safari tab, the page pushes in, drop it and it becomes the hero of a landing page. Scroll: the hero morphs into a framed print on a product card, with the mat and molding growing out of the photo's edge. Pick a frame color (it paints across) and a size, then the nav button flies down into "Order print".
Order: one black shape keeps morphing: Ordered ✓ → Printing % → On its way (a van on a route) → Delivered ✓.
Wall: the delivered circle floods the frame edge to edge, holds black for a beat, and contracts into the framed print hanging on the real wall footage. The same iris opens onto the print, closes again, the frame floods the screen and contracts into the pill → the dot → the letters spring back out, landing on the beat return. Last frame = first frame.
</structure>
<build>
1. One HTML file, square 1440x1440. Every style is computed from time inside an async seek(t): no CSS transitions, no timers, no state between frames.
2. Springs are closed-form step responses. A value with many targets is the sum of one spring per change, so it stays a pure function of time.
3. Liquid glass: each glass element holds its own clone of the scene behind it, filtered with an SVG feImage displacement map (a rounded-rect distance field) through three feDisplacementMaps at slightly different scales for chromatic edges, plus a rim light. Glass letters: a canvas distance field per glyph gives the map, mask and highlights.
4. Goo: blur + alpha threshold, then composite the source atop it so the glass stays sharp inside.
5. Iris: 6 blades around a hexagonal aperture. Each blade is its two vertices, both edge extensions and the SHORT arc between them.
6. Wordmark squeeze: every letter moves toward the dot by the same factor and its drawn width follows (narrow the wdth axis, scale the rest), so the letters stay touching.
7. Footage: re-encode all-intra (ffmpeg -g 1), load it as a blob URL, await 'seeked' before drawing each frame.
8. Sound: a downloaded SFX for every event (Mixkit), never synthesized, each placed by its measured peak. The song starts on a downbeat: the zoom lands on the drop, the wall sits in the breakdown, the wordmark returns with the beat. Loudnorm to -14 LUFS.
9. Render with Playwright: 4 subframes per frame blended with ffmpeg tmix, 60fps. Check one frame per beat, then scan for single-frame pops (frame-difference spikes 3x their neighbours).
</build>
<gotchas>
backdrop-filter: url() misreads displacement maps in Chromium, so clone the scene instead. A flood must overscale past the corners and take about 0.3s, or half the screen changes in one frame. A child with visibility: visible shows through a hidden parent, so use inherit. Text that swaps inside a morphing shape needs its own mask. python http.server can't range-seek video, so use the blob URL.
</gotchas>
<start>
Ask me for the inputs, then show me the beat map and 4 stills (open, glass, stage, wall) before you write the full film.
</start>
한국어 번역
<inputs>
제게 다음을 요청하세요: 워드마크로 쓸 한 단어 브랜드 이름(동사가 가장 좋습니다), 고해상도 사진 9~12장, 드롭과 조용한 브레이크다운이 있는 120 BPM 전후의 로열티 프리 곡(Mixkit, 상업적 사용 무료), 그리고 식물 그림자가 움직이는 민벽의 무료 스톡 클립(Pexels).
</inputs>
<direction>
애플 키노트 스타일의 런칭 필름, 2D만, 하나의 연속 테이크. 모든 장면은 이전 장면으로부터 만들어진다. 어떤 것도 페이드, 블러, 컷되지 않는다. 대신 사물이 형태를 바꾼다: 텍스트는 마스크 라인에서 솟아오르고, 아이콘은 스프링을 타고 0에서 튀어나오며, 바는 가로질러 그려지고, 페이지는 밀려 들어오고, 검은 도형이 프레임 전체를 뒤덮었다가 다음 장면으로 수축한다. 따뜻한 오프화이트 캔버스, 검은 UI, 사진 위의 iOS 26 리퀴드 글래스. 워드마크에는 Archivo(wdth 125, weight 800), UI에는 Geist. 커서가 실제 클릭, 드래그, 롱프레스로 모든 변화를 이끈다. 카메라는 스크린 스튜디오 스타일로 줌해서 매 순간이 정사각형을 채우고, 커서도 그에 맞춰 스케일된다.
금지: 크로스페이드, 블러 인, 밝기가 "현상"되는 효과, 3D 플립, 파티클, 글로우, 1초를 넘는 홀드, 템플릿처럼 보이는 모든 것.
</direction>
<structure>
120 BPM, 54비트, 매 비트마다 무언가가 일어난다.
오픈: 워드마크가 아코디언처럼 자기 자신의 마침표 속으로 조여들고, 그 점이 커져 검은 알약이 되며, 그 안에서 라벨이 솟아오른다. 클릭: 여섯 개의 아이리스 블레이드가 라벨 위로 닫혔다가 사진 위로 탁 열린다. 원이 사각형이 되고, 줄어들고, 그리드가 그 뒤에서 종이 지도처럼 펼쳐지고(중앙, 플러스, 코너), 벤토로 재배치되고, 클릭이 한 타일로 줌인해서 정확히 드롭에 착지한다.
글래스: 유리 질감의 단어가 한 글자씩 팝인하고, 물방울로 녹아내렸다가 늘어나 글래스 툴바가 된다. 조정 아이콘이 그것을 슬라이더로 바꾼다. 드래그하면 사진의 조명이 낮에서 골든아워로 다시 밝아지고(정렬된 두 샷), 노브는 잡고 있는 동안 글래스 렌즈로 변한다. 그것이 글래스 오브로 떠오르고, 다음 사진이 그 안에서 원형으로 열리며, 오브가 잠금 화면으로 확장된다: 글래스 시계 숫자, 날짜, 그리고 글래스 뮤직 플레이어로 늘어나는 홈 바.
스테이지: 잠금 화면이 폰 안으로 물러난다(베젤이 화면 가장자리에서 자라난다). 다이내믹 아일랜드가 액체처럼 늘어나고, 집혀 떨어져 나와 날아가고, 블라인드처럼 말려 올라가는 Mac 창으로 자라난다. 배경화면을 롱프레스하고 Safari 탭 위로 드래그하면 페이지가 밀려 들어오고, 놓으면 랜딩 페이지의 히어로가 된다. 스크롤: 히어로가 제품 카드 위의 액자 인화로 모프되고, 매트와 몰딩이 사진 가장자리에서 자라난다. 액자 색상(가로질러 칠해진다)과 사이즈를 고르면, 내비 버튼이 "Order print"로 날아 내려간다.
주문: 하나의 검은 도형이 계속 모프한다: Ordered ✓ → Printing % → On its way(경로 위의 밴) → Delivered ✓.
벽: 배송 완료 원이 프레임을 가장자리까지 가득 채우고, 한 박자 동안 검은 상태를 유지하다가, 실제 벽 푸티지에 걸린 액자 인화로 수축한다. 같은 아이리스가 인화 위로 열리고 다시 닫히며, 액자가 화면을 뒤덮었다가 알약 → 점으로 수축하고, 글자들이 스프링으로 다시 튀어나와 비트 리턴에 착지한다. 마지막 프레임 = 첫 프레임.
</structure>
<build>
1. HTML 파일 하나, 정사각형 1440x1440. 모든 스타일은 async seek(t) 안에서 시간으로부터 계산된다: CSS 트랜지션 없음, 타이머 없음, 프레임 간 상태 없음.
2. 스프링은 닫힌 형태의 계단 응답이다. 여러 타깃을 가진 값은 변경마다의 스프링 하나를 합한 것이므로, 시간의 순수 함수로 유지된다.
3. 리퀴드 글래스: 각 글래스 요소는 뒤 장면의 자체 클론을 보유하고, 그것을 SVG feImage 변위 맵(둥근 사각형 거리장)으로 필터링한다. 색수차 가장자리를 위해 조금씩 다른 스케일의 세 개 feDisplacementMaps를 통과시키고, 림 라이트를 더한다. 글래스 글자: 글리프별 캔버스 거리장이 맵, 마스크, 하이라이트를 제공한다.
4. 구(goo): 블러 + 알파 임계값, 그런 다음 소스를 그 위에 합성해서 글래스가 내부에서 선명하게 유지되게 한다.
5. 아이리스: 육각형 조리개 주위의 6개 블레이드. 각 블레이드는 두 꼭짓점, 두 가장자리 연장선, 그리고 그 사이의 SHORT 호다.
6. 워드마크 조이기: 모든 글자가 같은 계수만큼 점을 향해 이동하고 그려진 폭이 그에 따른다(wdth 축을 좁히고 나머지를 스케일), 그래서 글자들이 붙어 있는 상태로 유지된다.
7. 푸티지: 올인트라로 재인코딩하고(ffmpeg -g 1), blob URL로 로드하며, 각 프레임을 그리기 전에 'seeked'를 기다린다.
8. 사운드: 모든 이벤트마다 다운로드한 SFX(Mixkit), 절대 합성하지 않으며, 각각은 측정된 피크에 배치한다. 곡은 다운비트에서 시작한다: 줌은 드롭에 착지하고, 벽은 브레이크다운에 머물고, 워드마크는 비트와 함께 돌아온다. Loudnorm으로 -14 LUFS에 맞춘다.
9. Playwright로 렌더링: 프레임당 4개의 서브프레임을 ffmpeg tmix로 블렌딩, 60fps. 비트마다 프레임 하나를 확인한 다음, 단일 프레임 팝(이웃 대비 3배로 튀는 프레임 차이)을 스캔한다.
</build>
<gotchas>
backdrop-filter: url()은 Chromium에서 변위 맵을 잘못 읽으므로, 대신 장면을 클론하세요. 플러드는 코너를 넘어 과대 스케일되어야 하고 약 0.3s가 걸려야 합니다. 그렇지 않으면 화면의 절반이 한 프레임에 바뀝니다. visibility: visible인 자식은 숨겨진 부모를 통해 보이므로 inherit을 사용하세요. 모프하는 도형 안에서 교체되는 텍스트는 자체 마스크가 필요합니다. python http.server는 영상 range-seek을 못 하므로 blob URL을 사용하세요.
</gotchas>
<start>
제게 입력을 요청하고, 전체 필름을 작성하기 전에 비트 맵과 4개의 스틸(오픈, 글래스, 스테이지, 벽)을 보여주세요.
</start>
