Ke hoʻonohonoho nei: Ka pōʻai o nā kūlana UI Morphing

E nīnau mai iaʻu no: 8 a 12 mau kūlana UI aʻu e makemake ai i ke ʻano (e laʻa me ke pihi, mea hoʻouka, mea hoʻokani, slider, toggle, tabs, chart, command palette, toast), ʻeleʻele maʻemaʻe a keʻokeʻo a i ʻole hoʻokahi kala accent, a me kahi mele royalty-free ma kahi o 120 BPM (e laʻa me Mixkit, manuahi no ka hoʻohana pāʻoihana).

Neʻe ʻana o ka UI pae Dribbble. Hoʻokahi ʻano, ʻaʻole loa e ʻoki ʻia: ʻo kēlā me kēia mokuʻāina ka mea like e hoʻololi ana i kona nui, radius a me ke kala ʻoiai e hoʻololi ana kāna ʻike me kahi blur pōkole. Hoʻokele kahi cursor i kēlā me kēia hoʻololi me nā kaomi maoli a me nā kauō. Canvas hina-māhana māmā, nā ʻāpana ʻeleʻele a keʻokeʻo, hoʻokahi font UI maʻemaʻe (Geist). Springs ma nā wahi āpau, he overshoot liʻiliʻi ma ka nui. Zoom ke kāmela i hoʻopiha kēlā me kēia mokuʻāina i ka mōlina. ʻO ka mōlina hope loa ka mōlina mua, no laila e loop.
Ua pāpā ʻia: ka hoʻomaha ʻana o ka bouncy, nā pahū ʻana o nā ʻāpana, nā ʻālohilohi, nā gradients ma ka UI chrome, nā hahau ikona kūpono ʻole, ka manawa make, nā mea āpau e like me kahi template.

120 BPM, 7 mau pā, aia kekahi mea e hana ana i kēlā me kēia kuʻi.
Pihi → mea hoʻouka → nānā → mokupuni hoʻoikaika → mea hoʻokani mele me kahi morph play/pause → holoi i ka pae holomua → lilo ia i slider leo e kīkoʻo ana ke kauō ʻia ma mua o ka max → hoʻohuli kahi hoʻololi ma ke kuʻi → lilo ka pihi i mea hōʻike tab wai → wehe nā tabs i loko o kahi pakuhi e huki ana iā ia iho, me kahi tooltip ma ka hover → hiolo ia i ⌘K → type to filter → enter → toast → hoʻi i ke pihi.

1. Hoʻokahi faila HTML, huinahā 1440x1440. Hoʻomaulia ʻia kēlā me kēia kaila mai ka manawa i loko o ka seek(t): ʻaʻohe hoʻololi CSS, ʻaʻohe timers, ʻaʻohe mokuʻāina i lawe ʻia ma waena o nā mōlina.
2. He mau pane ʻanuʻu pani ʻia nā pūnāwai. ʻO kahi waiwai e hoʻololi i ka pahuhopu i nā manawa he nui, ʻo ia ka huina o hoʻokahi pūnāwai no kēlā me kēia hoʻololi, no laila e noho mau ia he hana maʻemaʻe o ka manawa.
3. Holo nā ʻaoʻao ʻelua o ka hōʻailona tab i nā pūnāwai like ʻole, no laila e ʻō aku ka ʻaoʻao mua ma mua o ka mea ma hope. ʻO ka hana like no ka pihi hoʻololi.
4. He hoʻopunipuni pololei nā kauō: ʻoiai e paʻa ana ke kiʻikuhi, ua helu ʻia ka waiwai mai kona kūlana. I ka hoʻokuʻu ʻana, lele hou ia mai kahi i kū ai.
5. E kālailai i ke mele me numpy no ka grid beat a hoʻomaka ma kahi downbeat. E kau i kēlā me kēia leo UI ma kona piko i ana ʻia.
6. Hāʻawi me Playwright: 4 mau subframe no kēlā me kēia frame, i hui pū ʻia me ffmpeg tmix no ka neʻe blur ma 60fps.
7. E hōʻike i hoʻokahi kiʻi i kēlā me kēia kuʻi ma mua o ka hōʻike piha ʻana. E hoʻoponopono i nā mea āpau ma waho o ka grid, paʻa a paʻakikī paha e heluhelu.

Mai hoʻokomo i ka hoʻololi makemake ma luna o kekahi mea a ke kāmela e hoʻonui ai a i ʻole e hōʻike ʻia e ka kikokikona he blurry. Pono nā kikokikona e hoʻololi i loko o kahi pahu morphing i kona manawa komo a puka ponoʻī a i ʻole e uhi ʻia. E hoʻohālikelike i ka mōlina hope me ka mua, me ke kūlana a me ka wikiwiki o ka cursor, a i ʻole e haʻalulu ka loop.

E noi mai iaʻu no nā mea hoʻokomo, a laila e hōʻike mai iaʻu i ka papa inoa moku'āina ma ka beat grid ma mua o kou kākau ʻana i kekahi code.

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.

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