도형 하나가 버튼에서 차트와 명령 팔레트까지 변하는 UI 모션

Full Prompt

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

• 원문이 시작에서 사용자에게 되묻던 상태 개수, 색, 곡을 미리 정했습니다. 상태는 버튼부터 토스트까지 순서대로 고정하고 색은 웜그레이, 검정, 흰색에 포인트 한 색으로 했습니다.
• 서체는 Geist 대신 Pretendard 한 종으로 하고, 화면 글자는 전부 한국어로 정했습니다.
• 캔버스는 정사각형 1440 대신 1920x1080으로 바꿨습니다.
• 길이는 원문의 7마디, 120 BPM에 맞춰 14초로 적었습니다.
• 금지 목록에서 이 영상에 맞는 것만 남겼고, 템플릿 같은 구성 금지와 죽은 시간 금지는 0.5초 넘는 정지 금지로 바꿨습니다.
• 「질문부터 하고 상태 목록을 보여 달라」는 시작 지시를 「스토리보드를 적고 묻지 말고 만든다」로 바꿨습니다.

14초짜리 UI 모션그래픽을 만든다. 목표는 도형 하나가 컷 없이 여러 인터페이스로 이어서 변하는 모습을 보여 주고, 마지막에 처음으로 돌아와 루프가 되게 하는 것이다.
콘셉트: 「하나의 도형이 모든 UI가 된다」. 버튼에서 시작해 로더, 체크, 다이내믹 아일랜드, 음악 플레이어, 볼륨 슬라이더, 토글, 탭, 차트, 명령 팔레트, 토스트를 거쳐 다시 버튼으로 돌아온다. 모든 장면은 앞 장면에서 변형돼 나온다. 같은 요소가 크기, 모서리, 색만 바꾸고 내용은 짧은 블러로 교체된다. 변화는 전부 커서의 클릭과 드래그가 일으키고, 카메라는 줌으로 각 상태를 화면에 채운다.
타이포와 색: 서체는 Pretendard 한 종만. 화면 글자는 전부 한국어. 색은 밝은 웜그레이 배경, 검정, 흰색에 포인트 한 색만.
금지: 파티클 폭발, 글로우, UI 위의 범용 그라디언트, 바운스 이징, 굵기가 어긋난 아이콘 선, 0.5초 넘게 멈춘 화면.
박자: 120 BPM, 7마디, 박마다 무엇인가 바뀐다. 한 마디에 기법 하나. 스프링은 닫힌 형태의 해로 계산하고 오버슈트는 아주 작게. 첫 프레임과 마지막 프레임은 커서 위치와 속도까지 같게.
빌드 방법: 1920x1080 HTML 한 파일, 모든 상태는 window.seek(t) 안에서 시간의 함수로. CSS 애니메이션과 타이머는 쓰지 않는다. 드래그는 커서 위치에서 값을 바로 계산하고, 놓으면 그 값에서 스프링으로 돌아온다.
검토: 본 렌더 전에 0.5초 간격 스틸로 겹침, 빈 프레임, 박자 어긋남, 가독성을 확인하고 고친다. 글자가 바뀌는 구간은 나가는 타이밍과 들어오는 타이밍을 따로 둔다.
시작: 먼저 박자별 스토리보드를 적고, 묻지 말고 바로 만든다.

원문 프롬프트

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

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

출처demon @demonugc (새 탭에서 열림)·Opus 5.5