다음을 물어봐 주세요: 도형이 되어야 할 8~12개의 UI 상태(예: 버튼, 로더, 플레이어, 슬라이더, 토글, 탭, 차트, 커맨드 팔레트, 토스트), 순수 흑백 또는 하나의 강조 색상, 그리고 약 120 BPM의 로열티 프리 곡(예: Mixkit, 상업적 사용 무료). Dribbble 수준의 UI 모션. 하나의 도형, 절대 끊기지 않음: 모든 상태는 동일한 요소가 크기, 반경, 색상을 모핑하면서 콘텐츠는 짧은 블러로 교체된다. 커서가 실제 클릭과 드래그로 모든 변화를 이끈다. 밝은 웜그레이 캔버스, 흑백 컴포넌트, 하나의 깔끔한 UI 폰트(Geist). 곳곳에 스프링, 최대 아주 작은 오버슈트만. 카메라가 줌되어 각 상태가 프레임을 채운다. 마지막 프레임이 첫 프레임과 일치하여 루프된다. 금지: 튀는 이징, 파티클 버스트, 글로우, UI 크롬의 그라디언트, 불일치하는 아이콘 스트로크, 죽은 시간, 템플릿처럼 느껴지는 모든 것. 120 BPM, 7마디, 매 비트마다 무언가 일어난다. 버튼 → 로더 → 체크 → 다이나믹 아일랜드 → 재생/일시정지 모핑이 있는 뮤직 플레이어 → 진행 바 스크럽 → 최대치를 넘겨 드래그하면 늘어나는 볼륨 슬라이더가 됨 → 토글이 비트에 맞춰 전환 → 노브가 리퀴드 탭 인디케이터가 됨 → 탭이 스스로 그려지는 차트로 열리고, 호버 시 툴팁 표시 → ⌘K로 축소 → 타이핑하여 필터 → 엔터 → 토스트 → 다시 버튼으로. 1. 하나의 HTML 파일, 정사각형 1440x1440. 모든 스타일은 seek(t) 내부의 시간으로부터 계산된다: CSS 트랜지션 없음, 타이머 없음, 프레임 간 상태 유지 없음. 2. 스프링은 닫힌 형태의 계단 응답이다. 목표를 여러 번 바꾸는 값은 변경당 하나의 스프링의 합이므로, 시간의 순수 함수로 유지된다. 3. 탭 인디케이터의 두 가장자리는 서로 다른 스프링을 타므로, 앞쪽 가장자리가 뒤쪽 가장자리보다 앞서 늘어난다. 토글 노브에도 같은 기법을 사용하라. 4. 드래그는 직접 조작이다: 커서가 잡혀 있는 동안 값은 위치로부터 계산된다. 놓으면 있던 위치에서 스프링으로 돌아온다. 5. numpy로 곡을 분석하여 비트 그리드를 얻고 다운비트에서 시작하라. 모든 UI 사운드를 측정된 피크에 배치하라. 6. Playwright로 렌더링: 프레임당 4 서브프레임, 60fps에서 모션 블러를 위해 ffmpeg tmix로 블렌딩. 7. 전체 렌더 전에 비트당 한 프레임을 렌더링하라. 그리드에서 벗어난 것, 비좁은 것, 읽기 어려운 것을 수정하라. 카메라가 스케일하는 어떤 것에도 will-change를 절대 넣지 마라, 텍스트가 흐리게 렌더링된다. 모핑하는 컨테이너 내부에서 교체되는 텍스트는 자체적인 진입 및 퇴장 타이밍이 필요하다, 그렇지 않으면 겹친다. 마지막 프레임을 첫 프레임과 동일하게 만들어라, 커서 위치와 속도 포함, 그렇지 않으면 루프가 끊긴다. 입력을 물어본 후, 코드를 작성하기 전에 비트 그리드 위의 상태 목록을 보여줘.
이 클립은 Anthropic의 Claude Opus 5.5로 생성되었습니다. 페이지의 프롬프트가 생성에 사용된 원문 그대로입니다.
예시는 Claude Opus 5.5에서 다음 설정으로 생성되었습니다: 1:1 · 0:14 · Animation · Motion Graphics · Advertising. 같은 설정을 사용하면 가장 비슷한 결과를 얻을 수 있습니다.
먼저 프롬프트를 그대로 복사한 뒤, 카메라·모션·조명 표현은 유지하고 피사체만 바꿔보세요. 영상 모델은 표현에 민감하므로 몇 차례 시도하는 것이 좋습니다.
물론입니다. 장면을 교체하거나 템포 표현, 화면 비율을 바꿔 프로젝트에 맞게 조정하세요.