Fim ɗin ƙaddamar da manhajar buga hoto

Tambaye ni: sunan alama mai kalma ɗaya don alamar kalma (fi'ili yana aiki mafi kyau), hotuna 9 zuwa 12 masu girman gaske, waƙa mara sarauta kusan 120 BPM tare da faɗuwa da rashin natsuwa (Mixkit, kyauta don amfanin kasuwanci), da kuma faifan bidiyo kyauta na bango mai sauƙi tare da inuwar tsire-tsire masu motsi (Pexels).

Fim ɗin ƙaddamar da keynote na Apple, 2D kawai, ɗaukar hoto ɗaya ci gaba. Kowane yanayi an yi shi ne daga wanda ya gabata: babu abin da ke ɓacewa, ba ya ɓacewa ko yankewa. Abubuwa suna canza siffa maimakon haka: rubutu yana tashi daga layin abin rufe fuska, gumaka suna fitowa daga sifili a kan maɓuɓɓuga, sanduna suna zana a fadin, shafuka suna turawa, kuma siffar baƙi ta mamaye dukkan firam ɗin kuma ta yi sanyi zuwa yanayin na gaba. Zane mai ɗumi, UI baƙi, gilashin ruwa na iOS 26 akan hotunan. Archivo (wdth 125, nauyi 800) don alamar kalma, Geist don UI. Siginar kwamfuta tana tuƙa kowane canji tare da dannawa na gaske, ja da dogon latsawa. Kyamarar tana zuƙowa salon allo-studio don haka kowane lokaci yana cika murabba'in, kuma siginar kwamfuta tana aunawa da shi.
An haramta: crossfades, blur-ins, "haɓaka haske", 3D juyi, barbashi, haske, yana ɗaukar fiye da 1s, duk wani abu da yayi kama da samfuri.

120 BPM, bugun 54, wani abu yana faruwa a kowace bugun.
Buɗewa: alamar kalma tana matsewa cikin yanayinta kamar accordion, digon ya girma ya zama baƙar ƙwayar cuta, lakabin yana tashi a ciki. Dannawa: ruwan iris guda shida suna rufe kan lakabin kuma suna buɗewa akan hoto. Da'irar ta zama murabba'i, ta ragu, grid ɗin yana buɗewa daga bayanta kamar taswirar takarda (tsakiya, ƙari, kusurwoyi), yana sake kwarara zuwa bento, kuma dannawa yana zuƙowa cikin tayal ɗaya, yana sauka daidai akan digo.
Gilashi: Kalmar gilashi tana fitowa a cikin haruffa-da-harafi, tana narkewa zuwa digo wanda ya miƙe zuwa kayan aikin gilashi. Alamar daidaitawa tana mayar da ita zuwa zamiya. Jawo yana sake haskaka hoton daga rana zuwa sa'a ta zinare (hotuna biyu masu layi biyu), kuma maɓalli ya juya zuwa ruwan tabarau na gilashi yayin da ake riƙe shi. Yana ɗagawa zuwa zagaye na gilashi, hoto na gaba yana buɗewa a ciki azaman da'ira, kuma orb ɗin yana faɗaɗa zuwa allon kullewa: lambobin agogon gilashi, kwanan wata, da sandar gida wanda ya miƙe zuwa mai kunna kiɗan gilashi.
Mataki: allon kullewa yana komawa cikin waya (bezel ɗin yana tsirowa daga gefen allo). Tsibirin Dynamic yana miƙewa kamar ruwa, yana matsewa, yana tashi sama kuma yana girma zuwa taga Mac wanda ke birgima kamar makaho. Danna dogon fuskar bangon waya, ja shi zuwa shafin Safari, shafin yana turawa ciki, sauke shi kuma ya zama gwarzon shafin saukowa. Gungura: jarumin yana canzawa zuwa firam ɗin rubutu akan katin samfuri, tare da tabarma da simintin da ke tsirowa daga gefen hoton. Zaɓi launin firam (yana fenti a ko'ina) da girma, sannan maɓallin kewayawa ya sauka zuwa "Oda bugawa".
Oda: siffar baƙi ɗaya tana ci gaba da canzawa: An yi oda ✓ → Buga % → A kan hanya (motar bas a kan hanya) → An kawo ✓.
Bango: da'irar da aka kawo ta cika gefen firam ɗin zuwa gefe, tana riƙe da baƙi don bugawa, kuma tana ƙunƙuwa cikin firam ɗin da ke rataye a kan ainihin hoton bangon. Iris ɗin iri ɗaya yana buɗewa akan bugu, yana rufewa kuma, firam ɗin yana cika allon kuma yana ƙunƙuwa cikin ƙwayar → digo → haruffan suna fitowa, suna sauka akan dawowar bugun. Firam ɗin ƙarshe = firam ɗin farko.

1. Fayil ɗin HTML guda ɗaya, murabba'i 1440x1440. Ana ƙididdige kowane salo daga lokaci a cikin binciken async (t): babu sauye-sauyen CSS, babu masu ƙidayar lokaci, babu yanayi tsakanin firam.
2. Maɓuɓɓugan ruwa amsoshi ne na matakai a rufe. Ƙima mai maƙasudai da yawa shine jimlar bazara ɗaya a kowace canji, don haka yana ci gaba da kasancewa cikakken aikin lokaci.
3. Gilashin ruwa: kowane abu na gilashi yana riƙe da nasa tsarin yanayin a bayansa, an tace shi da taswirar motsi SVG feImage (filin nisan zagaye mai zagaye) ta hanyar feTaps ɗin Matsar da Matsakaici guda uku a ma'auni daban-daban don gefuna masu kama da juna, tare da hasken gefen. Haruffan gilashi: filin nisan zane a kowace glyph yana ba da taswirar, abin rufe fuska da abubuwan haskakawa.
4. Goo: blur + alpha straight, sannan a haɗa tushen a samansa don gilashin ya kasance mai kaifi a ciki.
5. Iris: Ruwan wukake guda 6 a kusa da wani bututu mai kusurwa shida. Kowace ruwan wukake tana da madauri biyu, duka madauri na gefen da kuma madauri mai gajeru a tsakaninsu.
6. Matse alamar kalma: kowace harafi tana motsawa zuwa ga digo da ma'auni ɗaya kuma faɗin da aka zana yana biye da shi (rage girman faɗin, daidaita sauran), don haka haruffan su ci gaba da taɓawa.
7. Bidiyo: sake rubuta duk-intra (ffmpeg -g 1), loda shi azaman URL na blob, jira 'neked' kafin zana kowane firam.
8. Sauti: SFX da aka sauke don kowane taron (Mixkit), wanda ba a taɓa haɗa shi ba, kowannensu an sanya shi ta hanyar da aka auna shi. Waƙar tana farawa da bugun ƙasa: zuƙowa ta faɗi a kan faɗuwa, bango yana cikin rugujewa, alamar kalma ta dawo tare da bugun. Ƙara ƙarfi zuwa -14 LUFS.
9. Yi wasa da Playwright: Ƙananan firam guda 4 a kowane firam da aka haɗa da ffmpeg tmix, 60fps. Duba firam ɗaya a kowane bugun, sannan duba don ganin manyan firam guda ɗaya (ƙananan firam sun ninka maƙwabtansu sau 3).

backdrop-filter: url() yana karanta taswirar ƙaura a cikin Chromium ba daidai ba, don haka yana yin kwafi a wurin maimakon haka. Ambaliyar ruwa dole ne ta wuce kusurwoyi kuma ta ɗauki kimanin 0.3s, ko rabin canje-canjen allo a cikin firam ɗaya. Yaro mai ganuwa: ana iya gani yana nunawa ta hanyar iyaye ɓoyayye, don haka yi amfani da gado. Rubutu da ke canzawa a cikin siffar morphing yana buƙatar abin rufe fuska nasa. python http.server ba zai iya yin bidiyo na range-seek ba, don haka yi amfani da URL ɗin blob.

Tambaye ni abubuwan da aka bayar, sannan ka nuna min taswirar bugun da kuma hotunan guda 4 (a bude, gilashi, dandamali, bango) kafin ka rubuta cikakken fim ɗin.

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.

An ɗauko umarni daga rubutu @twoclipping.