Biến đổi hình dạng thông qua các trạng thái giao diện người dùng

Hãy yêu cầu tôi cung cấp: 8 đến 12 trạng thái giao diện người dùng mà bạn muốn hình dạng đó thể hiện (ví dụ: nút, thanh tải, trình phát, thanh trượt, nút chuyển đổi, tab, biểu đồ, bảng lệnh, thông báo), màu đen trắng thuần túy hoặc một màu nhấn, và một bài hát miễn phí bản quyền có nhịp độ khoảng 120 BPM (ví dụ: Mixkit, miễn phí cho mục đích thương mại).

Giao diện người dùng chuyển động ở cấp độ Dribbble. Một hình dạng duy nhất, không bị cắt: mỗi trạng thái đều là cùng một phần tử thay đổi kích thước, bán kính và màu sắc trong khi nội dung của nó được hoán đổi với hiệu ứng làm mờ ngắn. Con trỏ điều khiển mọi thay đổi bằng các thao tác nhấp và kéo thực tế. Nền màu xám ấm áp, các thành phần đen trắng, một phông chữ giao diện người dùng đơn giản (Geist). Hiệu ứng lò xo xuất hiện khắp nơi, chỉ hơi vượt quá một chút. Camera phóng to để mỗi trạng thái lấp đầy khung hình. Khung hình cuối cùng là khung hình đầu tiên, vì vậy nó lặp lại.
Bị cấm: hiệu ứng chuyển động nảy, hiệu ứng nổ hạt, hiệu ứng phát sáng, hiệu ứng chuyển màu trên giao diện người dùng, đường viền biểu tượng không khớp, thời gian chết, bất cứ thứ gì trông giống như một mẫu có sẵn.

120 BPM, 7 ô nhịp, mỗi nhịp đều có sự kiện xảy ra.
Nút → trình tải → kiểm tra → đảo động → trình phát nhạc với hiệu ứng chuyển đổi phát/tạm dừng → kéo thanh tiến trình → nó trở thành thanh trượt âm lượng tự động kéo giãn khi vượt quá mức tối đa → một nút chuyển đổi bật/tắt theo nhịp → núm xoay trở thành chỉ báo tab dạng lỏng → các tab mở ra thành biểu đồ tự vẽ, có chú thích khi di chuột → nó thu gọn thành ⌘K → nhập để lọc → enter → thông báo → quay lại nút.

1. Một tệp HTML duy nhất, hình vuông 1440x1440. Mọi kiểu dáng được tính toán từ thời gian bên trong hàm seek(t): không có hiệu ứng chuyển tiếp CSS, không có bộ hẹn giờ, không có trạng thái được truyền giữa các khung hình.
2. Lò xo là đáp ứng bước dạng đóng. Một giá trị thay đổi mục tiêu nhiều lần là tổng của một lò xo cho mỗi lần thay đổi, vì vậy nó vẫn là một hàm thuần túy theo thời gian.
3. Hai cạnh của bộ phận chỉ báo dạng lẫy trượt trên các lò xo khác nhau, do đó cạnh trước sẽ giãn ra phía trước cạnh sau. Núm xoay cũng có nguyên lý tương tự.
4. Thao tác kéo thả là thao tác trực tiếp: khi giữ con trỏ, giá trị được tính toán từ vị trí của nó. Khi thả con trỏ, nó sẽ trở lại vị trí ban đầu.
5. Phân tích bài hát bằng numpy để xác định lưới nhịp và bắt đầu từ phách mạnh. Đặt mỗi âm thanh giao diện người dùng theo giá trị đỉnh đã đo được.
6. Kết xuất bằng Playwright: 4 khung hình phụ trên mỗi khung hình chính, được kết hợp bằng ffmpeg tmix để tạo hiệu ứng làm mờ chuyển động ở tốc độ 60 khung hình/giây.
7. Kết xuất từng khung hình một trước khi kết xuất toàn bộ. Sửa bất kỳ lỗi nào nằm ngoài lưới, bị chật chội hoặc khó đọc.

Tuyệt đối không đặt hiệu ứng thay đổi (will-change) lên bất cứ thứ gì mà camera điều chỉnh kích thước hoặc văn bản bị mờ. Văn bản thay đổi bên trong một vùng chứa biến đổi cần có thời gian vào và ra riêng, nếu không sẽ bị chồng chéo. Hãy làm cho khung hình cuối cùng giống hệt khung hình đầu tiên, bao gồm cả vị trí và tốc độ con trỏ, nếu không vòng lặp sẽ bị giật.

Hãy hỏi tôi về các thông số đầu vào, sau đó cho tôi xem danh sách trạng thái trên lưới nhịp trước khi bạn viết bất kỳ đoạn mã nào.

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.

Lời nhắc được lấy từ bưu kiện @twoclipping.