Konfiguracja: Pętla stanów interfejsu użytkownika morphing

Poproś mnie o: 8–12 stanów interfejsu użytkownika, które mają przybrać dany kształt (np. przycisk, ładowarka, odtwarzacz, suwak, przełącznik, karty, wykres, paleta poleceń, tost), czystą czerń i biel lub jeden kolor akcentowy oraz utwór wolny od opłat licencyjnych w tempie około 120 BPM (np. Mixkit, darmowy do użytku komercyjnego).

Ruch interfejsu użytkownika na poziomie Dribbble. Jeden kształt, nigdy nieobcięty: każdy stan to ten sam element, zmieniający rozmiar, promień i kolor, a jego zawartość zmienia się z krótkim rozmyciem. Kursor steruje każdą zmianą za pomocą prawdziwych kliknięć i przeciągnięć. Jasne, ciepłe, szare płótno, czarno-białe komponenty, jedna czytelna czcionka interfejsu użytkownika (Geist). Sprężyny wszędzie, co najwyżej minimalnie przesunięte. Kamera przybliża, tak aby każdy stan wypełniał klatkę. Ostatnia klatka jest pierwszą klatką, więc obraz się zapętla.
Zabronione są: łagodne przyspieszanie, wybuchy cząsteczek, świecenie, gradienty w chromie interfejsu użytkownika, niedopasowane kontury ikon, martwy czas, wszystko, co wygląda jak szablon.

120 BPM, 7 taktów, w każdym uderzeniu coś się dzieje.
Przycisk → ładowarka → sprawdź → dynamiczna wyspa → odtwarzacz muzyki z funkcją odtwarzania/pauzy → przesuń pasek postępu → staje się on suwakiem głośności, który rozciąga się po przeciągnięciu poza maksimum → przełącznik zmienia się w rytm muzyki → pokrętło staje się płynnym wskaźnikiem tabulatora → tabulatory otwierają się w wykresie, który rysuje się sam, z podpowiedzią po najechaniu kursorem → zwija się w ⌘K → wpisz, aby filtrować → wprowadź → tost → powrót do przycisku.

1. Jeden plik HTML, kwadratowy o wymiarach 1440x1440. Każdy styl jest obliczany na podstawie czasu w seek(t): bez przejść CSS, bez timerów, bez stanu przenoszonego między klatkami.
2. Sprężyny to zamknięte odpowiedzi skokowe. Wartość, która zmienia cel wielokrotnie, jest sumą jednej sprężyny na zmianę, więc pozostaje czystą funkcją czasu.
3. Dwie krawędzie wskaźnika zaczepu są podtrzymywane przez różne sprężyny, więc krawędź przednia wysuwa się przed krawędź tylną. Ten sam trik dotyczy pokrętła przełączającego.
4. Przeciąganie to bezpośrednia manipulacja: gdy kursor jest przytrzymany, wartość jest obliczana na podstawie jego położenia. Po puszczeniu wraca on z miejsca, w którym się znajdował.
5. Przeanalizuj utwór za pomocą numpy, aby znaleźć siatkę rytmów i zacznij od taktu. Umieść każdy dźwięk interfejsu użytkownika na jego zmierzonym szczycie.
6. Renderowanie za pomocą Playwright: 4 podklatki na klatkę, zmieszane za pomocą ffmpeg tmix w celu uzyskania rozmycia ruchu przy 60 klatkach na sekundę.
7. Renderuj jedną klatkę na uderzenie przed pełnym renderowaniem. Popraw wszystko, co jest poza siatką, ciasne lub trudne do odczytania.

Nigdy nie używaj opcji will-change na niczym, co kamera skaluje, a tekst jest rozmazany. Tekst, który zmienia się w kontenerze morfingowym, wymaga osobnego czasu wejścia i wyjścia, w przeciwnym razie będzie się nachodził na siebie. Ostatnia klatka musi być identyczna z pierwszą, z uwzględnieniem pozycji i prędkości kursora, w przeciwnym razie pętla będzie się zacinać.

Zapytaj mnie o dane wejściowe, a następnie pokaż mi listę stanów na siatce rytmów, zanim napiszesz jakikolwiek kod.

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.

Podpowiedź pobrana z post @demonugc.