Analyze http://sprites.ai and build a product promo from our own UI, not generic components.
<direction>
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. Warm-gray canvas, black and white components, one accent (#FD9543), Geist. Springs everywhere, a tiny overshoot at most. The camera zooms so each state fills the frame. Last frame = first frame, so it loops.
Banned: bouncy easing, particles, glows, gradients on UI chrome, mismatched icon strokes, dead time, anything that looks like a template.
</direction>
<structure>
120 BPM, 7 bars, something on every beat.
Connect ad account (Meta, Google, LinkedIn, TikTok, Reddit logos) → loader → check → prompt bar types "Launch ads that convert" → island "Researching 42 competitors" → Ads Library wall of real ads scrolls and lands on a top performer → approval card → Approve & launch → budget slider that stretches past max → Autopilot toggle → knob becomes a liquid tab indicator across channels → ROAS chart draws itself with hover tooltip → ⌘K → type "pause" → toast "Paused 3 losing ads" → back to the button.
</structure>
<build>
1. One HTML file, 1440x1440. Every style is computed inside seek(t): no CSS transitions, no timers, no state between frames.
2. Springs are closed-form step responses. A value that changes target many times is a sum of springs, so it stays a pure function of time.
3. Tab indicator and toggle knob: the two edges ride different springs, so the leading edge stretches ahead.
4. Drags are direct manipulation: while held, the value follows the cursor. On release it springs back from wherever it was.
5. No music. Synthesize UI sounds with numpy and place each one by its measured peak on the beat grid.
6. Render with Playwright: 4 subframes per frame, blended with ffmpeg tmix for motion blur at 60fps.
7. Render one frame per beat first. Fix anything off-grid, cramped or hard to read.
</build>
<gotchas>
No will-change on anything the camera scales. Swapped text needs its own enter/exit timing. Match the last frame to the first, cursor position and speed included, or the loop stutters.
</gotchas>
Show me the state list on the beat grid before writing any code.
한국어 번역
http://sprites.ai를 분석하고, 일반적인 컴포넌트가 아니라 우리 자체 UI로 제품 홍보 영상을 제작하세요.
<direction>
Dribbble 수준의 UI 모션. 하나의 도형, 결코 끊지 않기: 모든 상태는 동일한 요소가 크기, 반경, 색상을 모핑하고 그 내용은 짧은 블러와 함께 교체됩니다. 커서가 실제 클릭과 드래그로 모든 변화를 이끕니다. 웜 그레이 캔버스, 흑백 컴포넌트, 하나의 액센트(#FD9543), Geist. 스프링은 모든 곳에, 오버슈트는 아주 약간만. 카메라가 줌되어 각 상태가 프레임을 채웁니다. 마지막 프레임 = 첫 프레임, 그래서 루프됩니다.
금지: 탄성 있는 이징, 파티클, 글로우, UI 크롬의 그라디언트, 서로 맞지 않는 아이콘 스트로크, 죽은 시간, 템플릿처럼 보이는 모든 것.
</direction>
<structure>
120 BPM, 7마디, 모든 비트에 무언가가 일어납니다.
광고 계정 연결(Meta, Google, LinkedIn, TikTok, Reddit 로고) → 로더 → 체크 → 프롬프트 바에 "Launch ads that convert" 입력 → 아일랜드 "Researching 42 competitors" → 실제 광고들로 가득한 Ads Library 벽이 스크롤되며 최고 성과 광고에 도착 → 승인 카드 → 승인 및 런칭 → 최대치를 넘어 늘어나는 예산 슬라이더 → Autopilot 토글 → 노브가 채널 전반의 리퀴드 탭 인디케이터가 됨 → ROAS 차트가 호버 툴팁과 함께 스스로 그려짐 → ⌘K → "pause" 입력 → 토스트 "Paused 3 losing ads" → 다시 버튼으로.
</structure>
<build>
1. HTML 파일 하나, 1440x1440. 모든 스타일은 seek(t) 내부에서 계산됩니다: CSS 트랜지션 없음, 타이머 없음, 프레임 사이의 상태 없음.
2. 스프링은 닫힌 형식의 스텝 응답입니다. 목표를 여러 번 바꾸는 값은 스프링들의 합이며, 그래서 시간의 순수 함수로 남습니다.
3. 탭 인디케이터와 토글 노브: 양쪽 가장자리가 서로 다른 스프링을 타므로 앞쪽 가장자리가 앞서 늘어납니다.
4. 드래그는 직접 조작입니다: 누르고 있는 동안 값은 커서를 따라갑니다. 놓으면 있던 자리에서 스프링처럼 되돌아옵니다.
5. 음악 없음. numpy로 UI 사운드를 합성하고, 측정된 피크를 기준으로 각각을 비트 그리드 위에 배치하세요.
6. Playwright로 렌더링: 프레임당 4개의 서브프레임을 렌더링하고 ffmpeg tmix로 블렌딩해 60fps 모션 블러를 만드세요.
7. 먼저 비트당 한 프레임씩 렌더링하세요. 그리드에서 벗어났거나, 답답하거나, 읽기 어려운 부분을 고치세요.
</build>
<gotchas>
카메라가 스케일하는 어떤 것에도 will-change를 쓰지 마세요. 교체되는 텍스트는 자체 등장/퇴장 타이밍이 필요합니다. 커서 위치와 속도를 포함해 마지막 프레임을 첫 프레임과 일치시키세요. 그렇지 않으면 루프가 끊깁니다.
</gotchas>
코드를 작성하기 전에 비트 그리드상의 상태 목록을 보여주세요.
