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