너는 우연이 아니다.
Creator: admin
AI model: muse.ai (auto)
Category: Pure Typography
Submitted: 2026-10-18
Likes: 1
Notes
장면별 타임라인입니다. 0–3초: 빅뱅 — 화면 중앙에서 5200개 입자가 폭발하며 나선은하 형성, 돌리 인 3–8초: 은하가 DNA 이중나선으로 모핑, 자막 "138억 년 전, 우주는 폭발했다" 8–13초: DNA가 인간 실루엣으로 변신, 자막 "별의 먼지가 모여 너를 만들었다" 13–18초: 실루엣이 산산이 흩어지며 별이 됨, 카메라 급줌아웃, 자막 "너는 별의 아이다" 18–24초: 별들이 모여 "너는" → "우연이 아니다" 파티클 타이포 24–30초: 리퀴드 크롬 "빛나라" + 자막 "그러니까, 오늘도", 골드빛으로 마감
Prompt
너는 900년 경력의 모션그래픽·크리에이티브 코딩 전문가다. 네가 할 수 있는 최고의 실력으로, 30초짜리 HTML 키네틱 영상을 만들어라. [주제] - 주제는 네가 고른다. 조건: SNS에 올렸을 때 사람들이 "와" 하고 공유하고 싶어질 것. - 처음 3초 안에 눈을 붙잡는 장면, 중간에 반전이나 변신, 마지막에 감정이 남는 한 문장으로 끝낼 것. - 코드를 쓰기 전에 주제, 장면 구성(초 단위), 색감을 5줄 이내로 먼저 밝혀라. [요즘 유행하는 AI 그래픽 스타일 — 최소 4개 이상 녹일 것] - 수천~수만 개 입자가 모양을 바꾸는 파티클 모핑(형태 → 형태 → 글자) - 블룸(빛 번짐), 색수차, 필름 그레인, 모션 블러 - 리퀴드 크롬 / 홀로그램 / 이리데선트(무지갯빛) 질감 - 3D 카메라 무브(돌리 인, 궤도 회전, 급줌), 피사계 심도 느낌 - 키네틱 타이포그래피(글자가 쪼개지고, 튀고, 블러에서 선명해지는 등장) - 비트에 맞춘 컷 전환, 화면 흔들림, 섬광 [기술 조건] - HTML 파일 하나로 완성(CSS·JS 모두 안에). 외부 라이브러리는 CDN 1~2개까지만 허용(예: three.js). - 60fps 목표. 저사양 노트북에서도 끊기지 않게 입자 수를 조절할 것. - 타임라인은 시간 t(초)로 계산해서, 몇 번을 재생해도 똑같은 장면이 나오게 할 것. - 자막·로고 등 모든 글자는 캔버스 안에 그릴 것(녹화에 들어가야 하므로). - 배경음은 Web Audio API로 직접 합성해서 장면과 정확히 맞출 것(도입 드론, 전환 효과음, 클라이맥스, 엔딩 화음). 외부 음원 파일 금지. [버튼] - ▶ 재생 / ■ 정지 버튼: 소리와 함께 0초부터 30초까지 재생. - ● 녹화 버튼: 누르면 0초부터 30초를 영상+소리 함께 녹화하고, 끝나면 자동으로 파일 다운로드. - MediaRecorder + canvas.captureStream(60) + 오디오 트랙 합치기. - mp4를 지원하면 mp4, 아니면 webm으로 저장. 비트레이트 높게(12Mbps 이상). - 녹화 중에는 화면 구석에 REC 표시, 다른 버튼은 잠금. - 버튼은 화면 아래 반투명 바에 두고, 재생 중에는 흐리게 숨겼다가 마우스를 올리면 보이게. - 진행 바와 경과 시간(예: 12.4 / 30.0) 표시. - 재생 전 대기 화면은 검은 화면이 아니라 은은하게 움직이는 첫 장면 + 제목. [품질 기준] - "그냥 입자 흩날리기" 수준이면 실패다. 장면마다 확실히 다른 그림이 나와야 하고, 장면 전환이 자연스럽게 이어져야 한다. - 자막은 한국어, 짧고 감성 있게. 글자가 화면 밖으로 잘리지 않게. - 콘솔 오류 0개. 크롬 최신 버전 기준으로 동작 확인. [출력] - 생략 없이 전체 코드를 한 번에 출력할 것. "...중략" 금지. - 코드 아래에 장면별 타임라인(초 단위)을 짧게 정리.