Ṣíṣeto: Lílo àwọn ìpínlẹ̀ ìṣàfihàn Morphing UI

Beere lọwọ mi fun: Awọn ipo UI 8 si 12 Mo fẹ ki apẹrẹ naa di (fun apẹẹrẹ bọtini, loader, player, slider, toggle, tabs, chart, command palette, toast), awọ dudu ati funfun funfun tabi asẹnti kan, ati orin ti ko ni royalty ni ayika 120 BPM (fun apẹẹrẹ Mixkit, ọfẹ fun lilo iṣowo).

Ìṣíṣẹ́ UI ìpele Dribbble. Apẹrẹ kan, tí a kò gé rárá: gbogbo ipò jẹ́ ohun kan náà tí ó ń yí iwọn rẹ̀, rédíọ̀mù àti àwọ̀ rẹ̀ padà nígbà tí àkóónú rẹ̀ bá ń yípadà pẹ̀lú blur kúkúrú. Kọ́sọ̀ kan ń darí gbogbo ìyípadà pẹ̀lú àwọn ìtẹ̀ àti ìfà gidi. Kánfáàfù aláwọ̀ ewé fẹ́ẹ́rẹ́fẹ́, àwọn èròjà dúdú àti funfun, fọ́ọ̀ǹtì UI mímọ́ kan (Geist). Ó ń rú jáde níbi gbogbo, ìṣẹ́jú kékeré kan ní iye tí ó pọ̀ jùlọ. Kámẹ́rà náà ń sun oorun kí ipò kọ̀ọ̀kan baà kún fọ́ọ̀mù náà. Fọ́ọ̀mù ìkẹyìn ni fọ́ọ̀mù àkọ́kọ́, nítorí náà ó ń yípo.
Ti a ti gbesele: idinku fifa, awọn fifọ patikulu, didan, awọn itesi lori UI chrome, awọn ikọlu aami ti ko baamu, akoko ti o ku, ohunkohun ti o dabi awoṣe kan.

120 BPM, 7 bars, ohun kan n ṣẹlẹ lori gbogbo lu.
Bọ́tìnì → loader → ṣàyẹ̀wò → erékùsù onídánmọ́ → ẹ̀rọ orin pẹ̀lú eré/ìdádúró morph → fọ ọ̀pá ìlọsíwájú → ó di ohun èlò ìfàsẹ́yìn tí ó ń nà nígbà tí a bá fà á kọjá ibi tí ó pọ̀ jùlọ → ìyípadà kan ń yípadà lórí ìlù → bọ́tìnì náà di àmì ìtọ́kasí tábìlì omi → àwọn tábìlì náà ń ṣí sínú àtẹ tí ó ń fa ara rẹ̀, pẹ̀lú ìmọ̀ràn irinṣẹ́ lórí hover → ó ń wó lulẹ̀ sí ⌘K → irú láti ṣe àlẹ̀mọ́ → tẹ → búrẹ́dì → padà sí bọ́tìnì náà.

1. Fáìlì HTML kan, onígun mẹ́rin 1440x1440. Gbogbo àṣà ni a ṣírò láti àkókò inú search(t): kò sí ìyípadà CSS, kò sí àkókò, kò sí ipò tí a gbé láàrín àwọn fírẹ́mù.
2. Àwọn ìsun omi jẹ́ ìdáhùn ìgbésẹ̀ tí a ti sé mọ́. Iye tí ó ń yípadà ní ọ̀pọ̀ ìgbà ni àròpọ̀ ìsun omi kan fún ìyípadà kan, nítorí náà ó dúró gẹ́gẹ́ bí iṣẹ́ àkókò.
3. Àwọn ègé méjì tí àmì tábù náà ní ń rìn lórí oríṣiríṣi ìsun omi, nítorí náà, ègé iwájú náà ń nà síwájú èyí tí ó tẹ̀lé e. Ọgbọ́n kan náà ni fún ìdènà ìyípadà náà.
4. Àwọn ìfàgùn jẹ́ ìṣàkóṣo taara: nígbà tí a bá di kọ́sọ̀ mú, a máa ń ṣírò iye láti ipò rẹ̀. Nígbà tí a bá tú u sílẹ̀, ó máa ń padà láti ibikíbi tí ó bá wà.
5. Ṣe àgbéyẹ̀wò orin náà pẹ̀lú numpy fún àkójọ orin ìlù kí o sì bẹ̀rẹ̀ pẹ̀lú ìlù ìlù ìlù. Fi gbogbo ohùn UI sí ibi tí a wọ̀n dé.
6. Ṣe àgbékalẹ̀ pẹ̀lú Playwright: àwọn férémù mẹ́rin fún férémù kọ̀ọ̀kan, tí a dapọ̀ mọ́ ffmpeg tmix fún ìṣiṣẹ́ blur ní 60fps.
7. Ṣe férémù kan fún gbogbo ìlù kí ó tó di pé a ṣe àtúnṣe rẹ̀. Ṣe àtúnṣe ohunkóhun tí ó wà lórí àkójọ náà, yálà ó há tàbí ó ṣòro láti kà.

Má ṣe fi ìyípadà ìfẹ́ sí ohunkóhun tí kámẹ́rà bá wọ̀n tàbí tí ọ̀rọ̀ náà bá sọ di aláìlágbára. Ọ̀rọ̀ tí ó bá yípadà nínú àpótí ìyípadà kan nílò àkókò wíwọlé àti ìjáde tirẹ̀ tàbí kí ó bò mọ́lẹ̀. Jẹ́ kí férémù ìkẹyìn jọ ti àkọ́kọ́, ipò kọ́sọ̀ àti iyàrá tí ó wà nínú rẹ̀, tàbí kí ìlọ́po náà máa dún.

Beere lọwọ mi fun awọn ohun ti o nilo, lẹhinna fi atokọ ipinlẹ han mi lori laini kika ṣaaju ki o to kọ koodu eyikeyi.

Ask me for: 8 to 12 UI states I want the shape to become (e.g. button, loader, player, slider, toggle, tabs, chart, command palette, toast), pure black and white or one accent color, and a royalty-free song around 120 BPM (e.g. Mixkit, free for commercial use).

Dribbble-level UI motion. One shape, never cut: every state is the same element morphing its size, radius and color while its content swaps with a short blur. A cursor drives every change with real clicks and drags. Light warm-gray canvas, black and white components, one clean UI font (Geist). Springs everywhere, a tiny overshoot at most. The camera zooms so each state fills the frame. The last frame is the first frame, so it loops.
Banned: bouncy easing, particle bursts, glows, gradients on UI chrome, mismatched icon strokes, dead time, anything that looks like a template.

120 BPM, 7 bars, something happens on every beat.
Button → loader → check → dynamic island → music player with a play/pause morph → scrub the progress bar → it becomes a volume slider that stretches when dragged past max → a toggle flips on the beat → the knob becomes a liquid tab indicator → the tabs open into a chart that draws itself, with a tooltip on hover → it collapses into ⌘K → type to filter → enter → toast → back to the button.

1. One HTML file, square 1440x1440. Every style is computed from time inside seek(t): no CSS transitions, no timers, no state carried between frames.
2. Springs are closed-form step responses. A value that changes target many times is the sum of one spring per change, so it stays a pure function of time.
3. The tab indicator's two edges ride different springs, so the leading edge stretches ahead of the trailing one. Same trick for the toggle knob.
4. Drags are direct manipulation: while the cursor is held, the value is computed from its position. On release it springs back from wherever it was.
5. Analyze the song with numpy for the beat grid and start on a downbeat. Place every UI sound by its measured peak.
6. Render with Playwright: 4 subframes per frame, blended with ffmpeg tmix for motion blur at 60fps.
7. Render one frame per beat before the full render. Fix anything off the grid, cramped or hard to read.

Never put will-change on anything the camera scales or the text renders blurry. Text that swaps inside a morphing container needs its own enter and exit timing or it overlaps. Make the last frame identical to the first, cursor position and speed included, or the loop stutters.

Ask me for the inputs, then show me the state list on the beat grid before you write any code.

Àṣẹ tí a mú láti ifiweranṣẹ @demonugc.