Kiʻiʻoniʻoni hoʻokuʻu polokalamu paʻi kiʻi

E noi mai iaʻu no: kahi inoa inoa hoʻokahi huaʻōlelo no ka māka huaʻōlelo (ʻoi aku ka maikaʻi o ka hana ʻana o kahi huaʻōlelo), 9 a 12 mau kiʻi kiʻekiʻe-res, kahi mele manuahi ma kahi o 120 BPM me kahi hāʻule a me ka haki mālie (Mixkit, manuahi no ka hoʻohana pāʻoihana), a me kahi ʻāpana waihona manuahi o kahi paia maʻemaʻe me nā aka o nā mea kanu e neʻe ana (Pexels).

He kiʻiʻoniʻoni hoʻolaha Apple-keynote, 2D wale nō, hoʻokahi lawe mau. Hana ʻia kēlā me kēia hiʻohiʻona mai ka mea ma mua: ʻaʻohe mea e mae, blur a ʻokiʻoki paha. Hoʻololi ke ʻano o nā mea: piʻi aʻe ka kikokikona mai kahi laina mask, puka mai nā kiʻi mai ka ʻole ma kahi pūnāwai, kaha kiʻi nā kaola, paʻi nā ʻaoʻao, a hoʻopiha kahi ʻano ʻeleʻele i ka mōlina holoʻokoʻa a hoʻopaʻa i loko o ke hiʻohiʻona aʻe. Canvas keʻokeʻo mahana, UI ʻeleʻele, aniani wai iOS 26 ma luna o nā kiʻi. Archivo (wdth 125, kaumaha 800) no ka wordmark, Geist no UI. Hoʻokele kahi cursor i kēlā me kēia hoʻololi me nā kaomi maoli, nā kauō a me nā kaomi lōʻihi. Hoʻonui ke kāmela i ke ʻano pale-studio i kēlā me kēia manawa e hoʻopiha i ka huinaha, a hoʻonui pū ka cursor me ia.
Ua pāpā ʻia: nā crossfades, blur-ins, ka mālamalama "e ulu ana", nā 3D flips, nā ʻāpana, nā ʻālohilohi, paʻa ma mua o 1s, nā mea āpau e like me kahi template.

120 BPM, 54 kuʻi, hana ʻia kekahi mea ma kēlā me kēia kuʻi.
Wehe: ʻomi ka māka huaʻōlelo i loko o kona wā ponoʻī e like me ka accordion, ulu ke kiko i loko o kahi pila ʻeleʻele, piʻi aʻe kahi lepili i loko. Kaomi: ʻeono mau ʻāpana iris e pani ana ma luna o ka lepili a wehe koke i kahi kiʻi. Lilo ka pōʻai i huinahā, emi iho, wehe ʻia ka grid mai hope ona e like me ka palapala ʻāina pepa (waena, hoʻohui, kihi), kahe hou i loko o kahi bento, a hoʻonui kahi kaomi i loko o hoʻokahi tile, e pae pololei ana ma ka hāʻule.
Aniani: puka mai kahi huaʻōlelo aniani i kēlā me kēia leka, hoʻoheheʻe ʻia i loko o kahi kulu e hohola ana i loko o kahi papa hana aniani. Hoʻolilo ka ikona hoʻoponopono iā ia i slider. ʻO ke kauō ʻana e hoʻomālamalama hou i ke kiʻi mai ke ao a i ka hola gula (ʻelua mau kiʻi i hoʻonohonoho ʻia), a lilo ka pihi i aniani aniani i ka wā e paʻa ana. Hāpai ia i loko o kahi orb aniani, wehe ʻia ke kiʻi aʻe i loko ona ma ke ʻano he pōʻai, a hoʻonui ka orb i loko o kahi pale laka: nā helu uaki aniani, ka lā, a me kahi pā home e hohola ana i loko o kahi mea hoʻokani mele aniani.
Paepae: huki hou ka pale laka i loko o ke kelepona (ulu ka bezel mai ka lihi o ka pale). Hoʻolōʻihi ka Dynamic Island e like me ka wai, ʻūmiʻi, lele ma luna a ulu i loko o ka puka makani Mac e ʻōwili ana i luna e like me ka makapō. E kaomi lōʻihi i ka pepa paia, kauō iā ia ma luna o kahi pā Safari, paʻi ka ʻaoʻao i loko, hāʻule a lilo ia i meʻe o kahi ʻaoʻao pae. ʻŌwili: hoʻololi ke meʻe i loko o kahi paʻi i hoʻopili ʻia ma kahi kāleka huahana, me ka moena a me ke kālai ʻana e ulu ana mai ka lihi o ke kiʻi. E koho i kahi kala mōlina (pena ia ma ke ʻano) a me kahi nui, a laila lele ka pihi nav i lalo i loko o "Order print".
Kauoha: hoʻokahi kinona ʻeleʻele e hoʻololi mau ana: Kauoha ʻia ✓ → Paʻi ʻana % → Ma ke ala (he van ma ke ala) → Hāʻawi ʻia ✓.
Paia: hoʻopiha ka pōʻai i hāʻawi ʻia i ka mōlina mai ka ʻaoʻao a ka ʻaoʻao, paʻa i ka ʻeleʻele no kekahi kuʻi, a hoʻopili i loko o ka paʻi i hoʻopili ʻia e kau ana ma ke kiʻi paia maoli. Wehe ka iris like ma luna o ka paʻi, pani hou, hoʻopiha ka mōlina i ka pale a hoʻopili i loko o ka pila → ke kiko → lele hou nā leka i waho, e pae ana ma ka hoʻihoʻi kuʻi. Mōlina hope = mōlina mua.

1. Hoʻokahi faila HTML, huinahā 1440x1440. Hoʻomaulia ʻia kēlā me kēia kaila mai ka manawa i loko o kahi async seek(t): ʻaʻohe hoʻololi CSS, ʻaʻohe timers, ʻaʻohe mokuʻāina ma waena o nā kiʻi.
2. He mau pane ʻanuʻu pani ʻia nā pūnāwai. ʻO kahi waiwai me nā pahuhopu he nui ka huina o hoʻokahi pūnāwai no kēlā me kēia hoʻololi, no laila e noho mau ana ia he hana maʻemaʻe o ka manawa.
3. Ke aniani wai: paʻa kēlā me kēia mea aniani i kāna clone ponoʻī o ke kahua ma hope ona, kānana ʻia me kahi palapala ʻāina hoʻoneʻe SVG feImage (kahi kahua mamao poepoe-pololei) ma o ʻekolu feDisplacementMaps ma nā unahi ʻokoʻa iki no nā kihi chromatic, me kahi kukui rim. Nā leka aniani: hāʻawi kahi kahua mamao canvas no kēlā me kēia glyph i ka palapala ʻāina, ka pale maka a me nā mea koʻikoʻi.
4. Goo: blur + alpha threshold, a laila e hoʻohui i ke kumu ma luna ona i ʻoi mau ke aniani i loko.
5. Iris: 6 mau lau a puni kahi puka hexagonal. ʻO kēlā me kēia lau kona mau piko ʻelua, ʻo nā hoʻonui lihi ʻelua a me ke arc PŌKOLE ma waena o lākou.
6. Ka ʻomi ʻana i nā māka huaʻōlelo: neʻe kēlā me kēia leka i ke kiko ma ka helu like a hahai kona laulā i kaha ʻia (e hoʻohaiki i ke axis wdth, e hoʻonui i ke koena), i noho paʻa nā leka.
7. Nā kiʻi: hoʻopili hou i ka all-intra (ffmpeg -g 1), hoʻouka iā ia ma ke ʻano he URL blob, e kali iā 'seek' ma mua o ke kaha kiʻi ʻana i kēlā me kēia kiʻi.
8. Leo: kahi SFX i hoʻoiho ʻia no kēlā me kēia hanana (Mixkit), ʻaʻole i synthesized ʻia, kēlā me kēia i kau ʻia e kona piko i ana ʻia. Hoʻomaka ke mele ma kahi downbeat: pae ka zoom ma ka hāʻule ʻana, noho ka paia i loko o ka breakdown, hoʻi ka wordmark me ke kuʻi. Loudnorm a i -14 LUFS.
9. Hāʻawi me Playwright: 4 mau subframe no kēlā me kēia frame i hui pū ʻia me ffmpeg tmix, 60fps. E nānā i hoʻokahi frame no kēlā me kēia beat, a laila e scan no nā pops frame hoʻokahi (ʻo ka ʻokoʻa frame e piʻi i 3x i ko lākou mau hoalauna).

ʻO ka backdrop-filter: url() heluhelu hewa i nā palapala hoʻoneʻe ma Chromium, no laila e kope i ke kahua. Pono kahi kahe e ʻoi aku ma mua o nā kihi a lawe ma kahi o 0.3s, a i ʻole ka hapalua o nā loli o ka pale i hoʻokahi kiʻi. ʻO kahi keiki me ka ʻike: ʻike ʻia e hōʻike ana ma o kahi makua huna, no laila e hoʻohana i ka hoʻoilina. Pono ka kikokikona e hoʻololi i loko o kahi ʻano morphing i kāna mask ponoʻī. ʻAʻole hiki i ka python http.server ke ʻimi i ka wikiō, no laila e hoʻohana i ka URL blob.

E noi mai iaʻu no nā mea i hoʻokomo ʻia, a laila e hōʻike mai iaʻu i ka palapala kuʻi a me 4 mau kiʻi paʻa (hāmama, aniani, kahua, paia) ma mua o kou kākau ʻana i ke kiʻiʻoniʻoni piha.

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.

Ua lawe ʻia ka ʻōlelo aʻoaʻo mai pou @twoclipping.