UI 상태를 통한 형태 변형

다음 사항을 요청해 주세요: 원하는 UI 상태 8~12가지(예: 버튼, 로더, 플레이어, 슬라이더, 토글, 탭, 차트, 명령 팔레트, 토스트), 순수한 흑백 또는 하나의 강조 색상, 그리고 저작권이 없는 120 BPM 정도의 음악(예: Mixkit, 상업적 사용 무료).

드리블 수준의 UI 모션. 하나의 형태, 절대 잘리지 않음: 모든 상태는 동일한 요소가 크기, 반지름, 색상만 변형되는 것이며, 내용물은 짧은 흐림 효과와 함께 교체됩니다. 커서를 사용하여 실제 클릭과 드래그로 모든 변화를 제어합니다. 따뜻한 회색 캔버스, 흑백 구성 요소, 깔끔한 UI 폰트(Geist) 하나. 모든 곳에 스프링이 있으며, 오버슈트는 아주 미미합니다. 카메라가 줌인하여 각 상태가 프레임을 가득 채우도록 합니다. 마지막 프레임이 첫 번째 프레임이므로 루프가 발생합니다.
금지 사항: 탄력 있는 이징, 파티클 버스트, 글로우 효과, UI 크롬의 그라디언트, 아이콘 테두리 색상 불일치, 데드 타임, 템플릿처럼 보이는 모든 것.

120 BPM, 7마디, 매 박자마다 무언가가 일어난다.
버튼 → 로더 → 확인 → 동적 섬 → 재생/일시 정지 변형이 있는 음악 플레이어 → 진행률 표시줄을 드래그 → 최대치를 넘어서면 늘어나는 볼륨 슬라이더로 변환 → 박자에 맞춰 켜지는 토글 → 노브가 유동적인 탭 표시기로 변환 → 탭을 열면 마우스 오버 시 툴팁이 표시되는 차트가 나타남 → ⌘K로 축소 → 필터링할 텍스트 입력 → Enter → 토스트 메시지 표시 → 버튼으로 돌아가기.

1. 하나의 HTML 파일, 1440x1440 정사각형. 모든 스타일은 seek(t) 함수 내부의 시간으로부터 계산됩니다. CSS 전환, 타이머, 프레임 간 상태 전달은 없습니다.
2. 스프링은 폐쇄형 계단 응답입니다. 목표값이 여러 번 변하는 경우, 각 변화마다 스프링 응답이 하나씩 더해지므로 시간의 순수 함수로 유지됩니다.
3. 탭 표시기의 양쪽 가장자리는 서로 다른 스프링의 영향을 받기 때문에 앞쪽 가장자리가 뒤쪽 가장자리보다 앞으로 늘어납니다. 토글 노브도 같은 원리입니다.
4. 드래그는 직접적인 조작 방식입니다. 커서를 누른 상태에서는 커서의 위치를 기준으로 값이 계산됩니다. 커서를 놓으면 커서는 원래 위치로 되돌아갑니다.
5. NumPy를 사용하여 곡의 비트 그리드를 분석하고 다운비트부터 시작합니다. 측정된 피크 위치에 모든 UI 사운드를 배치합니다.
6. Playwright 로 렌더링: 프레임당 4개의 서브프레임을 사용하고, ffmpeg tmix 사용하여 모션 블러를 적용하여 60fps로 렌더링합니다.
7. 전체 렌더링 전에 비트당 한 프레임씩 렌더링합니다. 격자에서 벗어나거나, 너무 좁거나, 읽기 어려운 부분을 수정합니다.

카메라 크기 조정이나 텍스트 렌더링 시 흐릿해지는 요소에는 절대 will-change 속성을 적용하지 마세요. 모핑 컨테이너 내부에서 텍스트가 바뀌는 경우, 텍스트가 겹치지 않도록 각각 진입 및 이탈 타이밍을 설정해야 합니다. 마지막 프레임은 커서 위치와 속도를 포함하여 첫 번째 프레임과 동일해야 합니다. 그렇지 않으면 루프가 끊깁니다.

입력값을 먼저 요청하고, 코드를 작성하기 전에 비트 그리드에 상태 목록을 보여주세요.

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.