Bekendstellingsfilm vir fotodruk-app

Vra my vir: 'n eenwoord-handelsmerknaam vir die woordmerk (’n werkwoord werk die beste), 9 tot 12 hoëresolusiefoto's, 'n tantième-vrye liedjie van ongeveer 120 BPM met 'n "drop" en 'n stil afbreekpunt (Mixkit, gratis vir kommersiële gebruik), en 'n gratis voorraadklip van 'n gewone muur met bewegende plantskaduwees (Pexels).

'n Apple-hooftoespraakbekendstellingsfilm, slegs 2D, een deurlopende opname. Elke toneel is gemaak uit die vorige een: niks vervaag, vervaag of sny nie. Voorwerpe verander eerder van vorm: teks rys uit 'n maskerlyn, ikone spring van nul op 'n veer af, stawe teken oor, bladsye stoot, en 'n swart vorm oorstroom die hele raam en trek saam in die volgende toneel. Warm, gebroke wit doek, swart gebruikerskoppelvlak, iOS 26 vloeibare glas oor die foto's. Archivo (breedte 125, gewig 800) vir die woordmerk, Geist vir gebruikerskoppelvlak. 'n Wysertjie dryf elke verandering aan met regte klikke, sleep en langdrukke. Die kamera zoem in die styl van die skerm op die skerm sodat elke oomblik die vierkant vul, en die wyser skaal daarmee.
Verbode: kruisvervagings, vervaagde aksies, helderheid wat "ontwikkel", 3D-omslae, deeltjies, gloei, hou langer as 1 sekonde, enigiets wat soos 'n sjabloon lyk.

120 BPM, 54 slae, iets gebeur op elke maat.
Oop: die woordmerk druk in sy eie periode in soos 'n trekklavier, die kolletjie groei in 'n swart pil, 'n etiket styg binne-in. Klik: ses irislemme sluit oor die etiket en klik oop op 'n foto. Die sirkel word 'n vierkant, krimp, die rooster ontvou van agter dit soos 'n papierkaart (middel, plus, hoeke), vloei weer in 'n bento, en 'n klik zoem in op een teël en land presies op die druppel.
Glas: 'n glaswoord verskyn letter vir letter, smelt in 'n druppel wat in 'n glasnutsbalk rek. Die aanpassingsikoon verander dit in 'n skuifbalk. Deur te sleep, word die foto weer van dag na goue uur (twee gerigte skote) verlig, en die knoppie verander in 'n glaslens terwyl dit gehou word. Dit lig in 'n glasbol, die volgende foto maak binne-in as 'n sirkel oop, en die bol brei uit in 'n sluitskerm: glashorlosiesyfers, datum en 'n tuisbalk wat in 'n glasmusiekspeler rek.
Stadium: die sluitskerm trek terug in 'n foon (die rand groei uit die skermrand). Die Dinamiese Eiland strek soos vloeistof, knyp af, vlieg oor en groei in 'n Mac-venster wat soos 'n blind oprol. Druk die agtergrond lank, sleep dit na 'n Safari-oortjie, die bladsy druk in, laat dit val en dit word die held van 'n bestemmingsblad. Blaai: die held verander in 'n geraamde afdruk op 'n produkkaart, met die mat en gietvorm wat uit die foto se rand groei. Kies 'n raamkleur (dit verf oor) en 'n grootte, dan vlieg die navigasieknoppie af na "Bestel afdruk".
Orde: een swart vorm bly morfeer: Bestel ✓ → Druk % → Op pad (’n wa op ’n roete) → Afgelewer ✓.
Muur: die afgelewerde sirkel oorstroom die raam van rand tot rand, hou swart vir 'n maatslag en trek saam in die geraamde afdruk wat aan die werklike muurbeeldmateriaal hang. Dieselfde iris maak oop op die afdruk, maak weer toe, die raam oorstroom die skerm en trek saam in die pil → die kolletjie → die letters spring terug uit en land op die maatslag-terugkeer. Laaste raam = eerste raam.

1. Een HTML lêer, vierkantig 1440x1440. Elke styl word bereken vanaf tyd binne 'n asynchrone seek(t): geen CSS oorgange, geen tydtellers, geen toestand tussen rame nie.
2. Vere is geslote stapresponse. 'n Waarde met baie teikens is die som van een veer per verandering, dus bly dit 'n suiwer funksie van tyd.
3. Vloeibare glas: elke glaselement bevat sy eie kloon van die toneel daaragter, gefiltreer met 'n SVG feImage-verplasingskaart (’n afgeronde-reghoekige afstandsveld) deur drie feDisplacementMaps op effens verskillende skale vir chromatiese rande, plus 'n randlig. Glasletters: 'n doekafstandsveld per glief gee die kaart, masker en hoogtepunte.
4. Goo: vervaag + alfa-drempel, kombineer dan die bron bo-op sodat die glas binne skerp bly.
5. Iris: 6 lemme rondom 'n seshoekige opening. Elke lem is sy twee hoekpunte, beide randverlengings en die KORT boog tussen hulle.
6. Woordmerk-druk: elke letter beweeg na die punt met dieselfde faktor en die getekende breedte volg (vernou die breedte-as, skaal die res), sodat die letters aan mekaar bly raak.
7. Beeldmateriaal: herkodeer all-intra (ffmpeg -g 1), laai dit as 'n blob URL, wag vir 'gesoek' voordat elke raam geteken word.
8. Klank: 'n afgelaaide SFX vir elke gebeurtenis (Mixkit), nooit gesintetiseer nie, elk geplaas volgens sy gemete piek. Die liedjie begin op 'n afwaartse maat: die zoom land op die daling, die muur sit in die afbreekpunt, die woordmerk keer terug met die maat. Loudnorm na -14 LUFS.
9. Lewer met Playwright: 4 subrame per raam gemeng met ffmpeg tmix, 60fps. Kontroleer een raam per maat, en skandeer dan vir enkelraam-opspringplekke (raamverskil-spykers 3x hul bure).

agtergrond-filter: url() lees verplasingskaarte in Chromium verkeerd, so kloon eerder die toneel. 'n Vloed moet oorskaal verby die hoeke en ongeveer 0.3 sekondes neem, anders verander die helfte van die skerm in een raam. 'n Kind met sigbaarheid: sigbaar wys deur 'n versteekte ouer, so gebruik inherit. Teks wat binne 'n morferende vorm omruil, benodig sy eie masker. python http.server kan nie video met 'n reekssoektog doen nie, so gebruik die blob URL.

Vra my vir die insette, wys my dan die ritmekaart en 4 stilfoto's (oop, glas, verhoog, muur) voordat jy die volledige film skryf.

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.

Aanwysing geneem van pos @twoclipping.