Instellen: Lanceringsfilm van de app voor het afdrukken van foto's

Vraag me om: een merknaam van één woord voor het logo (een werkwoord werkt het beste), 9 tot 12 foto's in hoge resolutie, een royaltyvrij nummer van ongeveer 120 BPM met een drop en een rustige breakdown (Mixkit, gratis voor commercieel gebruik), en een gratis stockclip van een effen muur met bewegende plantenschaduwen (Pexels).

Een lanceringsfilm voor een Apple-keynote, volledig in 2D, één doorlopende opname. Elke scène is opgebouwd uit de vorige: niets vervaagt, vervaagt of wordt afgesneden. Objecten veranderen in plaats daarvan van vorm: tekst komt omhoog uit een maskerlijn, iconen springen als het ware uit het niets op een veer, balken worden over het scherm getrokken, pagina's schuiven op en een zwarte vorm vult het hele beeld en krimpt in de volgende scène. Warm gebroken wit canvas, zwarte gebruikersinterface, iOS 26 vloeibaar glas over de foto's. Archivo (breedte 125, gewicht 800) voor het woordmerk, Geist voor de gebruikersinterface. Een cursor bestuurt elke verandering met echte klikken, slepen en lang indrukken. De camera zoomt in zoals in een schermstudio, zodat elk moment het vierkant vult en de cursor meeschaalt.
Verboden: crossfades, blur-ins, helderheidsontwikkeling, 3D-flips, deeltjes, gloed, effecten die langer dan 1 seconde aanhouden, alles wat op een sjabloon lijkt.

120 BPM, 54 tellen, er gebeurt iets op elke tel.
Openen: het woordmerk krimpt in zijn eigen punt als een accordeon, de stip groeit uit tot een zwarte pil, een label komt erin omhoog. Klikken: zes diafragmabladen sluiten zich over het label en openen zich op een foto. De cirkel wordt een vierkant, krimpt, het raster ontvouwt zich erachter als een papieren kaart (midden, plus, hoeken), vloeit opnieuw samen tot een bento, en een klik zoomt in op één tegel, precies op de plek waar deze is uitgevallen.
Glas: een glazen woord verschijnt letter voor letter, smelt tot een druppel die zich uitstrekt tot een glazen werkbalk. Het aanpassingspictogram verandert deze in een schuifregelaar. Door te slepen verandert de belichting van de foto van daglicht naar het gouden uur (twee uitgelijnde opnamen), en de knop verandert in een glazen lens als je hem ingedrukt houdt. Hij tilt zich op tot een glazen bol, de volgende foto opent zich erin als een cirkel, en de bol breidt zich uit tot een vergrendelscherm: glazen klokcijfers, datum en een homebalk die zich uitstrekt tot een glazen muziekspeler.
Stage: het vergrendelscherm trekt zich terug tot een telefoonscherm (de rand van het scherm groeit uit). Het Dynamic Island rekt zich uit als vloeistof, knijpt zich af, vliegt eroverheen en groeit uit tot een Mac-venster dat oprolt als een rolgordijn. Houd de achtergrond ingedrukt, sleep deze naar een Safari-tabblad, de pagina schuift naar binnen, laat hem los en hij wordt de hero van een landingspagina. Scroll: de hero verandert in een ingelijste afdruk op een productkaart, waarbij de passe-partout en lijst uit de rand van de foto groeien. Kies een framekleur (deze wordt over het frame aangebracht) en een formaat, waarna de navigatieknop naar beneden vliegt naar 'Afdruk bestellen'.
Bestelling: één zwarte vorm verandert voortdurend: Besteld ✓ → Afdrukken % → Onderweg (een bestelbus op een route) → Geleverd ✓.
Muur: de geleverde cirkel vult het beeld van rand tot rand, blijft even zwart en krimpt tot de ingelijste afdruk die aan de muur hangt. Dezelfde iris opent zich op de afdruk, sluit zich weer, het beeld vult het scherm en krimpt tot de pil → de stip → de letters veren terug en landen op de terugkeer van de beat. Laatste beeld = eerste beeld.

1. Eén HTML bestand, vierkant 1440x1440. Elke stijl wordt berekend vanuit de tijd binnen een asynchrone seek(t)-functie: geen CSS transities, geen timers, geen status tussen frames.
2. Springen zijn gesloten-vorm stapresponsies. Een waarde met meerdere doelwaarden is de som van één spring per verandering, waardoor het een zuivere functie van de tijd blijft.
3. Vloeibaar glas: elk glaselement bevat een eigen kloon van de scène erachter, gefilterd met een SVG feImage-verplaatsingskaart (een afgerond rechthoekig afstandsveld) via drie feDisplacementMaps op iets verschillende schalen voor chromatische randen, plus een randverlichting. Glazen letters: een canvas-afstandsveld per glyph geeft de kaart, het masker en de highlights.
4. Goo: vervaging + alfadrempel, en vervolgens de bron eroverheen plaatsen zodat het glas aan de binnenkant scherp blijft.
5. Iris: 6 lamellen rond een zeshoekige opening. Elke lamel bestaat uit de twee hoekpunten, beide randverlengingen en de KORTE boog ertussen.
6. Woordmerkcompressie: elke letter beweegt met dezelfde factor naar de stip toe en de getekende breedte volgt (de breedte-as versmalt, de rest schaalt), zodat de letters elkaar blijven raken.
7. Beelden: hercodeer alle intra-beelden (ffmpeg -g 1), laad ze als een blob-URL en wacht op 'seeked' voordat elk frame wordt getekend.
8. Geluid: een gedownload geluidseffect voor elk onderdeel (Mixkit), nooit gesynthetiseerd, elk geplaatst op basis van de gemeten piekwaarde. Het nummer begint op de downbeat: de zoom landt op de drop, de muur blijft in de breakdown, het woordmerk keert terug op de beat. Loudnorm tot -14 LUFS.
9. Renderen met Playwright: 4 subframes per frame gemengd met ffmpeg tmix, 60 fps. Controleer één frame per beat en scan vervolgens op afzonderlijke frame-pops (frame-verschilpieken die 3x zo groot zijn als hun buren).

backdrop-filter: url() leest displacement maps verkeerd in Chromium, dus kloon de scène in plaats daarvan. Een flood moet buiten de hoeken overschalen en ongeveer 0,3 seconden duren, of de helft van het scherm verandert in één frame. Een kindelement met visibility: visible schijnt door een verborgen ouderelement heen, dus gebruik inherit. Tekst die wisselt binnen een morphing shape heeft een eigen masker nodig. python http.server kan geen range-seeking video ondersteunen, dus gebruik de blob-URL.

Vraag me eerst naar de input, laat me dan de beatmap en 4 stilstaande beelden zien (open ruimte, glas, podium, muur) voordat je het volledige filmscenario schrijft.

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.

Aanwijzing afkomstig van na @twoclipping.