시간 함수로 프레임을 계산해 MP4로 만드는 코드 기반 모션그래픽

Full Prompt

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

• 원문에 없던 길이를 15초, 128 BPM 8마디로 정해 박자와 구간을 맞췄습니다.
• 「시계 바늘 하나가 모든 것을 그린다」는 하나의 콘셉트로 장면이 앞 장면에서 변형되도록 정했습니다.
• 서체는 Pretendard, 화면 글자는 한국어, 색은 주황과 회색에 흑백으로 제한했습니다.
• 모션 블러는 프레임마다 시각을 잘게 나눠 평균 내는 방식으로 구체화했습니다.
• 사운드는 킥, 클릭, 사인음을 코드로 합성해 박자에 맞추도록 정했습니다.
• 금지 목록과 0.5초 간격 스틸 검토 절차를 추가했습니다.

[ ] 로 감싼 값은 바꿔 쓸 수 있는 자리입니다. 복사한 뒤 그 자리의 화면 글자·이름·색만 고치면 그만큼 영상이 바뀝니다. 그대로 두고 돌려도 됩니다.

15초짜리 모션그래픽을 만든다. 목표는 「모든 프레임이 시간 t 하나에서 계산된다」는 사실을 화면과 소리로 보여 주고, 그 결과를 MP4 한 편으로 완성하는 것이다.
콘셉트: 「시계 바늘 하나가 모든 것을 그린다」. 가는 선 하나가 시간에 따라 회전하며 점, 막대, 원, 격자로 차례로 변형된다. 각 장면은 앞 장면의 도형에서 이어져 나오고 컷은 없다.
타이포와 색: 서체는 Pretendard 한 종만. 화면 글자는 전부 한국어로, 「[시간]」 「[계산]」 「[프레임]」 같은 짧은 낱말만 쓴다. 색은 주황 한 가지, 회색 한 가지, 그리고 흑백.
금지: 파티클 폭발, 글로우, 렌즈 플레어, 카메라 흔들림, RGB 분리, 크로스페이드, 범용 그라디언트, 바운스 이징. 0.5초 넘게 멈춘 화면도 쓰지 않는다.
박자: 128 BPM, 8마디. 마디마다 기법 하나(회전, 분할, 확대, 정렬 등). 박마다 무엇인가 바뀐다. 첫 프레임과 마지막 프레임을 같게 한다.
빌드 방법: 1920x1080 HTML 한 파일, 모든 상태는 window.seek(t) 안에서 시간의 함수로 쓴다. CSS 애니메이션과 타이머는 쓰지 않는다. 헤드리스 Chrome(Playwright)으로 프레임을 한 장씩 캡처하되, 프레임마다 시각을 잘게 나눠 여러 번 그려 평균 내는 방식으로 모션 블러를 만든다. 소리는 코드로 합성한 킥, 클릭, 사인음을 박자에 맞춰 넣고, ffmpeg로 영상과 합쳐 MP4로 만든다.
검토: 본 렌더 전에 0.5초 간격 스틸로 겹침, 빈 프레임, 박자 어긋남, 가독성을 확인하고 고친다.
시작: 먼저 박자별 스토리보드를 적고, 묻지 말고 바로 만든다.
대괄호 [ ] 안은 바꿔 쓸 수 있는 값이다. 그대로 두거나 원하는 값으로 바꾸되, 대괄호 기호 자체는 화면에 그리지 않는다.

원문 프롬프트

Code-driven animation: an HTML/JS page where every frame is calculated from the time, captured frame by frame with headless Chrome (Playwright), then assembled with ffmpeg into an MP4 with motion blur and code-generated sound.

출처Alexandre @xelandre__ (새 탭에서 열림)·Opus 5.5