버튼 하나가 로더·플레이어·차트·토스트로 변하는 UI 모션

Full Prompt

원문 프롬프트를 강화하여 결과에 좀 더 의도성을 반영한 프롬프트입니다.

• 원문은 입력값을 사용자에게 먼저 묻게 했지만, 상태 12개와 흑백에 포인트 색 하나를 미리 정하고 묻지 않고 만들게 했습니다.
• 길이는 120 BPM 7마디에 맞춰 14초로 정했고, 마디마다 담을 상태를 배분했습니다.
• 서체는 Geist에서 Pretendard 한 종으로, 화면 글자는 한국어로 바꿨습니다.
• 캔버스는 1440x1440 정사각형에서 1920x1080으로 바꿨습니다.
• 금지 목록에 렌즈 플레어, 카메라 흔들림, RGB 분리, 크로스페이드, 0.5초 넘는 정지를 더했습니다.
• 곡 분석과 모션 블러 렌더 절차는 빼고, 0.5초 간격 스틸 검토로 바꿨습니다.

14초짜리 UI 모션그래픽을 만든다. 목표는 도형 하나가 끊기지 않고 열두 가지 인터페이스로 변해 가다 처음 모습으로 돌아오는 루프를 보여 주는 것이다.
콘셉트: 「하나의 도형이 모든 화면이 된다」. 버튼, 로더, 체크, 다이나믹 아일랜드, 음악 플레이어, 진행바 스크럽, 볼륨 슬라이더, 토글, 탭, 차트, 명령 팔레트, 토스트, 그리고 다시 버튼. 모든 장면은 앞 장면의 크기, 모서리, 색을 바꿔 변형돼 나온다. 컷도 페이드도 없다. 커서가 실제 클릭과 드래그로 모든 변화를 이끈다. 카메라 언어는 줌 하나.
타이포와 색: 서체는 Pretendard 한 종만. 화면 글자는 전부 한국어(버튼 「시작하기」, 토스트 「저장했어요」처럼). 색은 따뜻한 밝은 회색 바탕, 포인트 하나, 흑백.
금지: 파티클 폭발, 글로우, 렌즈 플레어, 카메라 흔들림, RGB 분리, 크로스페이드, UI 위의 범용 그라디언트, 바운스 이징, 0.5초 넘게 멈춘 화면.
박자: 120 BPM, 7마디, 박마다 무엇인가 바뀐다. 1마디 버튼·로더·체크, 2마디 아일랜드·플레이어, 3마디 스크럽·볼륨, 4마디 토글·탭, 5마디 차트·툴팁, 6마디 명령 팔레트 필터, 7마디 엔터·토스트·버튼 복귀. 한 마디에 기법 하나(스프링 변형, 블러 교체, 앞서 늘어나는 가장자리 등). 첫 프레임과 마지막 프레임은 커서 위치와 속도까지 같게.
빌드 방법: 1920x1080 HTML 한 파일, 모든 상태는 window.seek(t) 안에서 시간의 함수로. 스프링은 닫힌 해로 계산한다. CSS 애니메이션과 타이머는 쓰지 않는다.
검토: 본 렌더 전에 0.5초 간격 스틸로 겹침, 빈 프레임, 박자 어긋남, 가독성을 확인하고 고친다.
시작: 먼저 박자별 스토리보드를 적고, 묻지 말고 바로 만든다.

원문 프롬프트

긴 프롬프트라 일부만 옮겼습니다. 전문은 크리에이터의 원 게시물에서 볼 수 있습니다.

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.
…
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.

출처zero @twoclipping (새 탭에서 열림)·Opus 5.5