Dejinta: Qaabaynta qaabaynta iyada oo loo marayo xaaladaha UI

I weydii: 8 ilaa 12 xaaladood oo UI ah Waxaan rabaa in qaabku noqdo (tusaale ahaan badhanka, loader, player, slider, toggle, tabs, chart, palette command, rooti), madow iyo caddaan saafi ah ama hal midab lahjad ah, iyo hees aan royalty-free ahayn oo qiyaastii ah 120 BPM (tusaale ahaan Mixkit, bilaash loogu talagalay isticmaalka ganacsiga).

Dhaqdhaqaaqa UI-ga heerka-Dribbble. Hal qaab, oo aan waligiis la jarin: xaalad kasta waa isku mid curiye oo beddelaya cabbirkiisa, radius-kiisa iyo midabkiisa halka waxa ku jira uu is beddelayo mugdi gaaban. Cursor-ku wuxuu ku kaxeeyaa isbeddel kasta oo leh gujinno iyo jiidis dhab ah. Shiraac diirran oo cawlan, qaybo madow iyo caddaan ah, hal far UI nadiif ah (Geist). Meel walba ayuu ku soo baxaa, ugu badnaan waa kor u kac yar. Kamaradu way soo dhawaysaa si xaalad kastaa u buuxiso jirridda. Jirridda ugu dambeysa waa jirridda ugu horreysa, sidaas darteed way wareegtaa.
La mamnuucay: fududeynta boodboodka, qaraxyada walxaha, iftiiminta, kala-goysyada ku yaal chrome-ka UI, calaamadaha aan isku mid ahayn, waqtiga dhiman, wax kasta oo u eg qaab-dhismeed.

120 BPM, 7 baararka, wax baa dhacaya garaac kasta.
Badhanka → rarka → hubi → jasiirad firfircoon → ciyaaryahan muusig oo leh qaab ciyaar/joojin ah → xoq bar-tilmaameedka horumarka → waxay noqonaysaa slider mug ah oo fidsan marka la jiido ugu badnaan → badhanka ayaa rogmanaya garaaca → badhanka wuxuu noqonayaa tilmaame tab dareere ah → tabsyadu waxay u furmaan jaantus iskiis u soo jiidaya, iyadoo tilmaan qalab ah ay ku taal kor u qaadista → waxay ku dhacdaa ⌘K → nooca si loo shaandheeyo → geli → rooti → dib ugu noqo badhanka.

1. Hal fayl HTML, oo laba jibbaaran 1440x1440. Qaab kasta waxaa laga xisaabiyaa wakhtiga gudaha raadinta(t): ma jiraan kala-guuryo CSS, ma jiraan waqti-hagaajiyeyaal, ma jiraan xaalad la qaado inta u dhaxaysa fareemyada.
2. Ilbiriqsiyadu waa jawaabo tallaabo oo qaab xiran. Qiimaha isbeddela ee bartilmaameedka badan leh waa wadarta hal gu' isbeddel kasta, sidaas darteed waxay sii ahaanaysaa shaqo saafi ah oo waqtiga ah.
3. Labada gees ee tilmaame tab-ka ayaa ku socda ilo kala duwan, sidaa darteed geeska hore wuxuu ka horreeyaa kan gadaal ka soo jeeda. Xeelad isku mid ah oo loogu talagalay badhanka beddelaha.
4. Jiidashadu waa wax-ka-beddel toos ah: inta cursorka la hayo, qiimaha waxaa laga xisaabiyaa booskiisa. Marka la sii daayo waxay dib uga soo noqotaa meel kasta oo ay joogtay.
5. Ku falanqee heesta numpy si aad u hesho shabakadda garaaca oo ku bilow hoos u dhac. Dhawaaq kasta oo UI ah dhig meesha ugu sarreysa ee la cabbiray.
6. Ku samee Playwright: 4 qayb-hoosaad halkii qaab, oo lagu daray ffmpeg tmix si loogu sameeyo blur motion 60fps.
7. Hal sawir samee garaac kasta ka hor inta aan la dhammaystirin muuqaalka. Wax kasta oo ka baxsan shabagga hagaaji, cidhiidhi ah ama adag in la akhriyo.

Waligaa ha ku dhejin wax kasta oo kamaradu cabirto ama qoraalku uu noqdo mid aan caddayn. Qoraalka isku beddelaya gudaha weelka qaabaysan wuxuu u baahan yahay waqti u gaar ah oo uu ku galo iyo waqti uu ka baxo ama wuu is dul saaran yahay. Ka dhig qaab-dhismeedka ugu dambeeya mid la mid ah kii hore, booska cursor-ka iyo xawaaraha ku jira, ama wareeggu wuu is gurxamaa.

I weydii waxyaabaha ku jira, ka dibna i tus liiska gobolka ee ku yaal shabakadda garaaca ka hor intaadan qorin wax kood ah.

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.

Jawaab celin laga soo qaatay boostada @twoclipping.