Ձևի ձևափոխում UI վիճակների միջոցով

Հարցրեք ինձ. 8-ից 12 UI վիճակներ, որոնցում ուզում եմ տեսնել ձևը (օրինակ՝ կոճակ, բեռնիչ, նվագարկիչ, սահիկ, անջատիչ, ներդիրներ, գրաֆիկ, հրամանների պալիտրա, տոստ), մաքուր սև ու սպիտակ կամ մեկ շեշտադրվող գույն, և մոտ 120 BPM հաճախականությամբ ազատ երգ (օրինակ՝ Mixkit, անվճար է առևտրային օգտագործման համար):

Dribbble մակարդակի UI շարժում։ Մեկ ձև, երբեք կտրված. յուրաքանչյուր վիճակ նույն տարրն է, որը փոխում է իր չափը, շառավիղը և գույնը, մինչդեռ դրա բովանդակությունը փոխվում է կարճ մշուշոտմամբ։ Կուրսորը կարգավորում է յուրաքանչյուր փոփոխություն իրական սեղմումներով և քաշումներով։ Բաց տաք-մոխրագույն կտավ, սև և սպիտակ բաղադրիչներ, մեկ մաքուր UI տառատեսակ (Geist)։ Զսպանակներ ամենուրեք, առավելագույնը մի փոքր գերազանցում։ Տեսախցիկը մեծացնում է, որպեսզի յուրաքանչյուր վիճակ լցնի կադրը։ Վերջին կադրը առաջին կադրն է, ուստի այն կրկնվում է։
Արգելված են՝ ցատկի թուլացումը, մասնիկների պայթյունները, փայլերը, Chrome-ի ինտերֆեյսի գրադիենտները, անհամապատասխան պատկերակների գծերը, մեռած ժամանակը, այն ամենը, ինչը նման է ձևանմուշի։

120 BPM, 7 տակտ, ամեն հարվածի ժամանակ ինչ-որ բան է պատահում։
Կոճակ → բեռնիչ → ստուգում → դինամիկ կղզի → երաժշտական նվագարկիչ՝ նվագարկման/դադարի ձևափոխմամբ → սահեցնել առաջընթացի վահանակը → այն դառնում է ձայնի սահիկ, որը ձգվում է առավելագույնից բարձր քաշելիս → անջատիչը շրջվում է ռիթմի վրա → կոճակը դառնում է հեղուկ ներդիրի ցուցիչ → ներդիրները բացվում են որպես գծապատկեր, որը ինքն իրեն նկարում է, մկնիկը պահելիս՝ գործիքի հուշումով → այն ծալվում է ⌘K-ի մեջ → մուտքագրել՝ զտելու համար → մուտքագրել → թարմացնել → վերադառնալ կոճակին։

1. Մեկ HTML ֆայլ, քառակուսի 1440x1440 չափսի։ Յուրաքանչյուր ոճ հաշվարկվում է seek(t)-ի ներսում ժամանակից՝ առանց CSS անցումների, առանց ժամանակաչափերի, առանց կադրերի միջև փոխանցվող վիճակի։
2. Զսպանակները փակ ձևի քայլային արձագանքներ են: Արժեքը, որը բազմիցս փոխում է նպատակը, մեկ փոփոխության դեպքում մեկ զսպանակի գումարն է, ուստի այն մնում է ժամանակի մաքուր ֆունկցիա:
3. Ցուցիչի երկու եզրերը հենվում են տարբեր զսպանակների վրա, ուստի առջևի եզրը ձգվում է հետևի եզրից առաջ: Նույն հնարքն է նաև անջատիչի կոճակի համար:
4. Քաշումները ուղղակի մանիպուլյացիաներ են. երբ կուրսորը պահված է, արժեքը հաշվարկվում է նրա դիրքից: Թողնելուց հետո այն վերադառնում է այնտեղից, որտեղ եղել է:
5. Վերլուծեք երգը՝ օգտագործելով numpy-ն որպես բիթային ցանց և սկսեք դեպի ներքևի բիթից։ Տեղադրեք յուրաքանչյուր UI հնչյունը իր չափված գագաթնակետի մոտ։
6. Ռենդեր Playwright հետ. յուրաքանչյուր կադրում 4 ենթակադր, խառնված ffmpeg tmix հետ՝ 60 կադր/վրկ արագությամբ շարժման մշուշոտման համար։
7. Լրիվ ռենդերինգից առաջ յուրաքանչյուր հարվածի համար մեկ կադր ռենդեր արեք։ Ուղղեք ցանցից դուրս գտնվող, նեղ կամ դժվարընթեռնելի ամեն ինչ։

Երբեք մի՛ կիրառեք կամքի փոփոխություն այն բանի վրա, որի դեպքում տեսախցիկը մասշտաբավորվում է կամ տեքստը մշուշոտ է դառնում: Տեքստը, որը փոխվում է ձևափոխվող կոնտեյների ներսում, պետք է ունենա իր սեփական մուտքի և ելքի ժամանակացույցը, կամ այն համընկնում է: Վերջին կադրը դարձրեք առաջինի հետ նույնական՝ ներառյալ կուրսորի դիրքը և արագությունը, կամ ցիկլի կակազումները:

Հարցրեք ինձ մուտքային տվյալները, ապա ցույց տվեք վիճակների ցանկը բիթային ցանցի վրա, նախքան որևէ կոդ գրելը։

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.

Հուշումը վերցված է գրառում @twoclipping.