Kev teeb tsa: Daim duab luam tawm app tso tawm zaj duab xis

Nug kuv txog: ib lo lus rau lub npe lag luam (cov lus qhia ua haujlwm zoo tshaj plaws), 9 txog 12 daim duab siab-res, ib zaj nkauj royalty-free li ntawm 120 BPM nrog ib qho poob thiab lub suab nrov ntsiag to (Mixkit, pub dawb rau kev siv lag luam), thiab ib daim clip dawb ntawm phab ntsa tiaj tus nrog cov duab ntxoov ntxoo txav mus los (Pexels).

Ib zaj yeeb yaj kiab tshaj tawm Apple-keynote, tsuas yog 2D xwb, ib zaug thaij tas mus li. Txhua qhov xwm txheej yog ua los ntawm qhov dhau los: tsis muaj dab tsi ploj mus, tsis meej lossis txiav. Cov khoom hloov pauv cov duab: cov ntawv nyeem tawm ntawm kab npog ntsej muag, cov cim tawm ntawm xoom ntawm lub caij nplooj ntoo hlav, cov kab kos hla, nplooj ntawv thawb, thiab cov duab dub ntws tag nrho cov thav duab thiab cog rau hauv qhov xwm txheej tom ntej. Cov ntaub pua plag dawb sov so, UI dub, iOS 26 kua iav hla cov duab. Archivo (wdth 125, hnyav 800) rau lub cim lo lus, Geist rau UI. Tus cursor tsav txhua qhov kev hloov pauv nrog kev nyem tiag tiag, rub thiab nias ntev. Lub koob yees duab zooms screen-studio style yog li txhua lub sijhawm puv lub square, thiab tus cursor scales nrog nws.
Txwv tsis pub: crossfades, blur-ins, brightness "developing", 3D flips, particles, glows, tuav ntev dua 1s, txhua yam uas zoo li ib tug template.

120 BPM, 54 tus neeg ntaus, muaj qee yam tshwm sim rau txhua tus neeg ntaus.
Qhib: lub cim lo lus nias rau hauv nws lub sijhawm zoo li lub accordion, lub cim loj hlob mus ua ib lub tshuaj dub, daim ntawv lo nce mus rau hauv nws. Nyem: rau lub iris hniav kaw rau ntawm daim ntawv lo thiab qhib rau ntawm daim duab. Lub voj voog ua ib lub plaub fab, me me, lub grid nthuav tawm los ntawm tom qab nws zoo li daim ntawv qhia ntawv (nruab nrab, ntxiv rau, ces kaum), rov qab mus rau hauv lub bento, thiab ib qho nyem zooms mus rau hauv ib lub pobzeb, tsaws rau ntawm qhov poob.
Iav: ib lo lus iav tshwm sim ua ntawv zuj zus, yaj mus ua ib tee dej uas nthuav mus rau hauv ib lub cuab yeej iav. Lub cim kho kom zoo hloov nws mus ua ib lub slider. Kev rub rov qab teeb duab los ntawm hnub mus rau lub sijhawm kub (ob daim duab sib dhos), thiab lub pob qhov rooj hloov mus ua lub iav iav thaum tuav. Nws tsa mus ua lub pob iav, daim duab tom ntej qhib sab hauv nws ua lub voj voog, thiab lub pob nthuav mus ua lub vijtsam xauv: cov lej moos iav, hnub tim, thiab lub tsev bar uas nthuav mus ua lub tshuab ua suab paj nruag iav.
Theem: lub vijtsam xauv rub rov qab mus rau hauv lub xov tooj (lub bezel loj hlob tawm ntawm ntug ntawm lub vijtsam). Lub Dynamic Island ncab zoo li kua, ntswj tawm, ya hla thiab loj hlob mus rau hauv lub qhov rais Mac uas dov zoo li lub qhov muag tsis pom kev. Nias lub wallpaper ntev, rub nws mus rau ntawm Safari tab, nplooj ntawv thawb rau hauv, tso nws thiab nws dhau los ua tus phab ej ntawm nplooj ntawv tsaws. Scroll: tus phab ej hloov mus rau hauv daim ntawv luam tawm ntawm daim npav khoom, nrog rau daim lev thiab molding loj hlob tawm ntawm ntug ntawm daim duab. Xaiv xim thav duab (nws pleev xim hla) thiab qhov loj me, tom qab ntawd lub pob nav ya mus rau hauv "Txiav txim luam tawm".
Kev txiav txim: ib daim duab dub pheej hloov pauv: Kev txiav txim ✓ → Luam tawm % → Tab tom mus (lub tsheb thauj khoom ntawm txoj kev) → Xa tuaj ✓.
Phab ntsa: lub voj voog uas xa tuaj puv nkaus ntug ntawm tus ncej, tuav cov xim dub ib pliag, thiab sib zog rau hauv daim duab luam uas dai rau ntawm cov yeeb yaj kiab phab ntsa tiag tiag. Tib lub iris qhib rau ntawm daim duab luam, kaw dua, tus ncej puv nkaus lub vijtsam thiab sib zog rau hauv lub ntsiav tshuaj → lub cim → cov ntawv tawm rov qab, tsaws rau ntawm qhov rov qab. Daim duab kawg = daim duab thawj.

1. Ib daim ntawv HTML, plaub fab 1440x1440. Txhua tus qauv yog suav los ntawm lub sijhawm hauv ib qho async seek(t): tsis muaj CSS hloov, tsis muaj timers, tsis muaj state ntawm cov thav duab.
2. Cov caij nplooj ntoos hlav yog cov lus teb kaw-daim ntawv. Tus nqi nrog ntau lub hom phiaj yog qhov sib npaug ntawm ib lub caij nplooj ntoos hlav rau ib qho kev hloov pauv, yog li nws tseem yog lub luag haujlwm dawb huv ntawm lub sijhawm.
3. Cov iav ua kua: txhua lub iav tuav nws tus kheej clone ntawm qhov chaw tom qab nws, lim nrog SVG feImage displacement map (lub teb nrug puag ncig-dav) los ntawm peb feDisplacementMaps ntawm qhov sib txawv me ntsis rau cov npoo chromatic, ntxiv rau lub teeb ntug. Cov ntawv iav: daim teb nrug canvas ib glyph muab daim ntawv qhia, lub ntsej muag thiab cov ntsiab lus tseem ceeb.
4. Goo: blur + alpha threshold, ces composite qhov chaw saum toj ntawm nws kom lub iav tseem ntse sab hauv.
5. Iris: 6 daim hniav ncig lub qhov qhib hexagonal. Txhua daim hniav yog nws ob lub vertices, ob qho tib si ntug txuas ntxiv thiab SHORT arc ntawm lawv.
6. Kev nias lub cim lo lus: txhua tsab ntawv txav mus rau lub cim los ntawm tib qho thiab nws qhov dav kos ua raws (ua kom lub wdth axis nqaim dua, ntsuas qhov seem), yog li cov ntawv tseem kov.
7. Cov Duab: rov encode all-intra (ffmpeg -g 1), thauj nws ua ib qho URL blob, tos 'nrhiav' ua ntej kos txhua lub thav duab.
8. Suab: ib qho SFX rub tawm rau txhua qhov xwm txheej (Mixkit), yeej tsis tau synthesized, txhua qhov muab tso rau los ntawm nws qhov ntsuas siab tshaj plaws. Zaj nkauj pib ntawm lub suab qis qis: lub zoom tsaws rau ntawm qhov poob, phab ntsa zaum hauv qhov tawg, lub cim lo lus rov qab los nrog lub suab ntaus. Loudnorm rau -14 LUFS.
9. Render nrog Playwright: 4 subframes ib thav duab sib xyaw nrog ffmpeg tmix, 60fps. Xyuas ib thav duab ib lub suab nrov, tom qab ntawd luam theej duab rau ib-ncej pops (ncej-qhov sib txawv spikes 3x lawv cov neeg nyob ze).

backdrop-filter: url() nyeem cov ntawv qhia kev hloov chaw hauv Chromium tsis raug, yog li clone qhov xwm txheej hloov chaw. Ib qho dej nyab yuav tsum overscale dhau cov ces kaum thiab siv li 0.3s, lossis ib nrab ntawm qhov screen hloov pauv hauv ib lub thav duab. Ib tug menyuam nrog visibility: visible qhia los ntawm ib tug niam txiv zais, yog li siv inherit. Cov ntawv nyeem uas swaps sab hauv ib tug morphing duab xav tau nws tus kheej lub ntsej muag. python http.server tsis tuaj yeem nrhiav ntau yam video, yog li siv lub blob URL.

Nug kuv txog cov tswv yim, tom qab ntawd qhia kuv daim ntawv qhia suab paj nruag thiab 4 daim duab (qhib, iav, theem, phab ntsa) ua ntej koj sau tag nrho zaj yeeb yaj kiab.

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).

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.

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.

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).

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.

Ask me for the inputs, then show me the beat map and 4 stills (open, glass, stage, wall) before you write the full film.

Cov lus qhia tau los ntawm tus ncej @twoclipping.