고에너지 설명 영상
쇼릴과 같은 느낌의 12~20초 하이프 피스입니다. 0.5초마다 비트에 맞춰 무언가가 등장하지만, 무작위 컷으로 느껴지지 않습니다. 모양이 모든 전환에서 시선을 인도하기 때문입니다. 불꽃이 선이 되고, 선이 화면을 채워 다음 배경이 되며, 마침표가 떨어져 나와 다음 장면의 중심이 되는 공이 됩니다.
하나의 HTML 페이지로 작성되며, 시간 값에 따라 모든 프레임을 렌더링합니다. 그런 다음 모션 블러와 합성 사운드트랙을 추가하여 MP4로 렌더링합니다.
1단계: 브리핑 받기 (한 번의 메시지로, 그 후 작업)
모든 것을 한 메시지로 질문한 후, 스스로 작업하세요. 제품은 필수이며, 나머지 항목이 비어 있으면 스스로 결정하고 무엇을 선택했는지 말하세요.
- 제품: 이름과 간단한 설명(몇 문장). 웹사이트 URL이면 더 좋습니다.
- 시청자가 반드시 기억해야 할 한 가지 (예: "아이디어를 입력하면, 라이브 앱이 나온다").
- 브랜드: 색상, 폰트, 로고 파일 또는 "웹사이트 참조". 없으면 아래 기본 팔레트를 사용하세요.
- 형식: 16:9 (1920×1080) 또는 9:16 (1080×1920). 기본값은 16:9입니다.
- 길이: 이 스타일의 기본 길이는 아래에 제공됩니다.
- 음악: 자체 트랙(파일 경로) 또는 합성. 기본값: 합성.
- 방향(선택 사항): 원하는 장면, 태그라인, 클릭 유도 문구 등 피해야 할 사항.
URL이 제공되면, 글을 쓰기 전에 웹사이트를 읽어(웹 페치) 제품의 실제 문구, 기능, 색상 및 폰트 이름을 확인하세요. UI 레이블 및 태그라인에는 실제 단어를 사용하세요.
절대 사실을 지어내지 마세요. 고객 수, 수익, 평점, 사용 후기 또는 인용구를 만들어내지 마세요. 숫자는 사용자나 웹사이트가 명시한 경우에만 사용하고, 그렇지 않으면 상대적인 막대, 진행률 및 플레이스홀더 스켈레톤 라인을 사용하세요. UI 내부의 예시 콘텐츠(프롬프트, 파일 이름, 프로젝트 이름, 영수증의 가격)는 괜찮으며 그럴듯해야 하지만, 제품 자체에 대한 주장(통계, 사용자 수, 평점, "무료"와 같은 혜택)은 허용되지 않습니다. 클릭 유도 문구는 사용자나 웹사이트가 제공한 URL이나 혜택만 사용하고, 제공된 것이 없으면 이름과 태그라인으로 마무리하세요.
로고. 사용자가 파일을 제공했거나, 사용자 자신의 제품이고 요청한 경우에만 로고를 사용하세요. 그렇지 않으면 브랜드 폰트로 이름을 텍스트로 작성하세요. 타사 로고(통합 서비스)는 제공된 경우에만 사용하고, 그렇지 않으면 중립적인 둥근 타일에 이름을 표시하세요.
이 스타일의 기본 길이: 15초 (128 BPM, 8마디). 범위는 12–20초입니다.
2단계: 장면 계획 및 구축
구조 (120–140 BPM 그리드에서 1.53초의 68개 장면)
다음 장면 유형 중에서 선택하고 제품을 매핑하세요. 먼저 비트 시트를 작성하세요(장면, 비트 그리드의 시작 시간, 들어오는 것, 나가는 것, 사운드).
- 불꽃 오프닝 (어두움). 희미한 그리드가 있는 거의 검은색 캔버스. 작은 악센트 표시가 나타나고, 맥동하며, 프레임 가로로 얇은 수평선으로 늘어나고 작은 모노 레이블(
product / launch — 2026)이 표시되며, 한 번 흔들린 다음, 선이 수직으로 확장되어 악센트 색상의 전체 화면 홍수가 됩니다. 이 홍수가 다음 배경이 됩니다. - 브랜드 슬램. 제품 이름이 무겁고 그로테스크한 스타일로, 모두 대문자, 크게, 연속된 1/16비트에서 마스크에 의해 글자가 드러나고, 위에 작은 모노 키커(
INTRODUCING — 2026), 아래에 이탤릭체 세리프 라인(무엇인지, 2~4단어)이 있습니다. 두께는 얇음에서 검정으로 변형될 수 있습니다. 마침표 또는 글자의 점이 떨어져 나와 성장하여 다음 장면을 시작하는 모양이 됩니다. - 키네틱 트리플렛. 가치 제안을 세 개의 짧은 단어 또는 구로 표현하고, 각 2비트(손글씨 단어는 3비트, 읽을 수 있도록), 각각 고유한 처리와 배경을 가지며, 비트에 맞춰 하드하게 전환됩니다(이 장면 내에서 전환은 리듬이므로 컷으로 계산되지 않음): 크림색 배경에 어두운 색; 검정 배경에 악센트 색상으로 단어가 프레임을 채우는 외곽선 패턴으로 반복됨; 뷰파인더 코너 브래킷 안에 흰색 전기 파랑색, 작은
1920 × 1080레이블; 마지막 단어는 손글씨 스크립트로 자체 그려짐. 각 단어는 빠른 블러/슬라이드로 들어오고 약간의 오버슛으로 안착합니다. - 시그니처 비주얼. 제품을 상징하는 "어떻게 만들었지"라는 순간: 중심에서 잔물결치는 큐브의 3D 필드(자체 원근 투영법으로 캔버스에 그려지고, 팔레트로 높이에 따라 색상 지정), 고리로 응축되어 바깥으로 폭발하는 생성 입자 흐름, 또는 모양 사이를 변형하는 액체 블롭. 제품의 아이디어에 맞는 것을 선택하세요(빌딩 블록 → 큐브, 데이터/AI → 입자, 유연성 → 액체). 카메라는 천천히 기울어지거나 궤도를 돌며 연주됩니다.
- 제품 미세 순간. 제품의 실제 상호 작용 중 하나를 떠 있는 UI 카드로, 3D로 약간 기울어지고 뒤에 두 개의 고스트 카드가 쌓여 있습니다: 커서가 토글을 움직이고, 메인 버튼을 누르고, 진행률 표시줄이 악센트 색상으로 채워지고 백분율이 표시되며, 버튼이
Done ✓로 바뀌고, 오른쪽 상단에 토스트가 슬라이드 인됩니다. 제품의 실제 레이블을 사용하세요. - 증거(실제 숫자가 있는 경우에만). 큰 카운트업(
+312%스타일, 숫자가 회전하며 블러 처리됨), 도넛 링, 하나의 악센트 막대가 있는 계단식 막대, 그 위에 툴팁이 있는 선 그리기. 실제 숫자가 없으면 → 이 장면을 건너뛰거나 제품의 실제 기능을 리스트로 표시하여 강력하게 보여주세요. - 액체/변형 브릿지. 이전 장면의 모양이 점으로 수축되고, 점이 어두운 배경의 맥동하는 고리가 되어 로고의 점이 됩니다.
- 엔드 카드(2초 유지). 악센트 점이 있는 로고 또는 이름, 이탤릭체 세리프 태그라인, 글자 하나씩 입력되는 트랙된 모노 라인(제공된 경우 실제 URL 또는 클릭 유도 문구, 예:
PRODUCT.COM, 그렇지 않으면 브리핑의 짧은 라인), 헤어라인 규칙.
모든 제품에 모든 장면이 필요한 것은 아닙니다. 6개의 강력한 장면이 8개의 약한 장면보다 낫습니다. 장면당 하나의 아이디어를 유지하세요.
고급스러워 보이게 만드는 규칙
- 전환은 객체이지, 컷이 아닙니다. 모든 장면은 모양(홍수, 성장하는 막대에 의한 와이프, 다음 배경으로 성장하는 점, 카메라를 통해 확대되는 단어)을 통해 다음 장면으로 넘어갑니다. 장면 간 하드 컷은 강박에서만 허용되며, 최대 두 번까지입니다.
- 모든 것이 그리드에 맞춰집니다. 큰 변화는 비트에, 타이포그래피는 1/8 또는 1/16 음표에 맞춥니다. 충격에는 약간 오버슛(
z≈ 0.6–0.7)한 다음 안정됩니다. - 모든 장면에 HUD 프레임: 얇은 코너 브래킷, 오른쪽 상단에
SCENE 02 / 07, 왼쪽 하단에 작은 모노(KINETIC TYPE,PRODUCT,DATA)의 카테고리 레이블, 오른쪽 하단에 빨간 점이 있는 러닝 타임코드. 작게(1080p에서 12–14px) 약 50% 불투명도; 카메라 뷰파인더처럼 느껴져야 합니다. - 텍스처: 모든 평평한 배경에 부드러운 방사형 비네트, 매우 미묘한 필름 그레인(로드 시 몇 개의 시드 그레인 타일을 미리 생성하고 순환), 실제 모션 블러.
- 타이포그래피: 슬램에는 무거운 그로테스크(예: Inter Tight 900 또는 Archivo Black), 인간적인 라인에는 이탤릭체 세리프(Instrument Serif 이탤릭), HUD 및 캡션에는 모노(JetBrains Mono 또는 Geist Mono). 브랜드에 폰트가 있으면 이름에는 브랜드 폰트를 사용하고 HUD에는 모노를 유지하세요.
- 기본 팔레트: 잉크
#0B0B10, 악센트#FF4F1A, 크림#EDEBE4, 전기 파랑#2F47FF, 흰색. 브랜드의 메인 컬러가 악센트를 대체하고, 두 번째 컬러가 파랑을 대체합니다. 단색 브랜드는 해당 색상의 진한 음영을 두 번째 컬러로 사용합니다. - 금지: 스톡 템플릿 느낌, 모든 것에 글로우, 이모지, 한 장면에 3가지 이상의 색상(검정과 흰색 제외), 한눈에 읽을 수 없을 정도로 작은 텍스트, 움직임이 없는 장면.
사운드
128 BPM (또는 사용자 트랙). 펀치감: 모든 비트에 킥, 2와 4에 클랩, 장면 루트를 따르는 서브 베이스, 브랜드 슬램과 엔드 카드로 들어가는 필터링된 라이저, 각 홍수에 임팩트(낮은 붐 + 노이즈 버스트), 각 입력된 단어에 짧은 음조 블립, 각 전환에 우슈(대역 통과 노이즈 스윕), 엔드 카드에 부드러운 링아웃. 음악을 효과 아래에 믹스하세요.
페이지 구축 방법
하나의 독립적인 HTML 파일(인라인 CSS 및 JS, 사용자가 제공한 경우에만 이미지). DOM + CSS 변환, SVG 또는 전체 화면 캔버스 중 적합한 것으로 그리세요.
페이지 계약
window.VIDEO = {w, h, duration}및window.seek(t), 시간의 순수 함수: 시간t(초)에 대한 모든 요소를 설정합니다. CSS 전환이나 애니메이션,setTimeout, 이전 프레임의 상태 없음. 모든 프레임은 순서에 관계없이 자체적으로 올바르게 렌더링되어야 합니다.seek내부의 레이아웃 측정(예:offsetLeft,measureText)은 괜찮습니다. 결정론적입니다.- 무작위성(그레인, 입자, 오디오 노이즈)은 시드 생성기에서 비롯되며,
Math.random을 사용하지 않습니다. - 히스토리가 필요한 모든 것(움직이는 물체를 따라잡는 카메라, 시뮬레이션)은 로드 시 한 번 구워집니다: 0에서
duration까지 1/240초 간격으로 단계를 밟고, 값을 저장하며,seek는 보간으로 값을 읽습니다. 루프의 경우, 루프가 시작되는 상태에서 시뮬레이션을 시작합니다(스타일의 이음새 규칙 참조). - 루프:
seek(t)는t % duration을 사용합니다. 이음새에 걸치는 효과(착지 스쿼시, 사운드 테일)는 양쪽 끝에서 그려지거나 혼합됩니다. - URL에
?render가 있는 경우: 컨트롤 없음, 미리보기 배율 없음. 스테이지는 정확히 왼쪽 상단에w × h입니다. 없는 경우: 스테이지는 CSS로 창에 맞게 배율이 조정되고 미리보기 컨트롤이 표시됩니다. - 폰트: 포함하세요. woff2 파일을 다운로드하고(Google Fonts 또는 브랜드 폰트) base64
@font-face로 인라인하여 렌더링이 자동으로 폴백되지 않도록 하세요. 무게 변형의 경우, 범위가 있는 가변 폰트([email protected])를 사용하세요. - 레이어: 장면 레이어에 투명한 배경을 제공하고 그 뒤에 하나의 스테이지 배경이 기본 색상을 제공하도록 하여, 나중 레이어가 이전 레이어를 실수로 가리지 않도록 하세요. 절대 위치 텍스트에는
white-space: nowrap을 사용하세요. - 속도: 큰 CSS
filter: blur()와 큰 흐림 그라데이션은 스크린샷을 찍는 데 매우 느립니다. 그라데이션과 글로우는 로드 시 한 번 캔버스에(또는 이미지로) 그리고 이동시키세요.
도우미: 이것들을 붙여넣고 모든 것을 기반으로 구축하세요
// 감쇠 스프링 스텝 응답 0 -> 1. w = 속도 (8 느림, 14 보통, 22 빠름), z = 감쇠 (1 = 오버슛 없음)
function spring(t, w = 14, z = 0.82) {
if (t <= 0) return 0;
if (z >= 1) return 1 - Math.exp(-w * t) * (1 + w * t);
const wd = w * Math.sqrt(1 - z * z);
return 1 - Math.exp(-z * w * t) * (Math.cos(wd * t) + (z * w / wd) * Math.sin(wd * t));
}
// 여러 번 대상을 변경하고 각각에 스프링으로 도달하는 값: track(start, [[time, value, w?, z?], ...]) -> f(t)
const track = (v0, keys) => t => { let v = v0, p = v0; for (const [tk, val, w, z] of keys) { v += (val - p) * spring(t - tk, w, z); p = val; } return v; };
// 정밀한 이징 키프레임 (카메라 이동에 가장 적합): kf([[t0, v0], [t1, v1, easeFn?], ...]) -> f(t)
const kf = keys => t => { if (t <= keys[0][0]) return keys[0][1]; for (let i = 1; i < keys.length; i++) { const [a, va] = keys[i - 1], [b, vb, e = ease] = keys[i]; if (t <= b) return lerp(va, vb, e((t - a) / (b - a))); } return keys[keys.length - 1][1]; };
const clamp = (x, a = 0, b = 1) => Math.min(b, Math.max(a, x));
const ease = x => (x = clamp(x), x < .5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2); // easeInOutCubic
const lerp = (a, b, k) => a + (b - a) * k;
const seg = (t, a, b) => clamp((t - a) / (b - a)); // t가 [a, b]를 통한 0..1 진행
const rng = s => () => (s = (s + 0x6D2B79F5) | 0, s = Math.imul(s ^ (s >>> 15), 1 | s), s ^= s + Math.imul(s ^ (s >>> 7), 61 | s), ((s ^ (s >>> 14)) >>> 0) / 4294967296);
- 타이핑: 표시되는 문자열은
full.slice(0, n(t))이며,t에서 깜빡이는 커서가 있습니다. 카운트업:lerp(a, b, ease(seg(t, …)))형식. - 카메라는
kf또는track에 의해 구동되는transform: translate() scale() rotate()가 있는 래퍼 요소입니다.
사운드
window.buildAudio(ctx)는 주어진AudioContext또는OfflineAudioContext에서 시간 0부터 전체 사운드트랙(음악 + 효과)을 예약하고, 비주얼과 동일한 타임라인 번호를 사용합니다. 오실레이터, 필터링된 노이즈(시드 버퍼에서), 엔벨로프로 합성합니다. 사용자가 음악 파일을 제공한 경우fetch+decodeAudioData로 로드하고, 비트 그리드를 템포에 맞추고(측정), 효과만 추가합니다.- 미리보기 재생: 첫 번째 재생에서 사운드트랙을 한 번 버퍼로 렌더링한 다음, 스크러빙된 위치에서 재생합니다. 클록은
seek를 구동합니다:
let buf, ac, src, startAt = 0, offset = 0, playing = false;
async function play() {
ac ??= new AudioContext();
if (!buf) { const off = new OfflineAudioContext(2, Math.ceil(48000 * VIDEO.duration), 48000); await buildAudio(off); buf = await off.startRendering(); }
src = ac.createBufferSource(); src.buffer = buf; src.connect(ac.destination);
src.start(0, offset % VIDEO.duration); startAt = ac.currentTime; playing = true;
}
function pause() { if (!playing) return; offset += ac.currentTime - startAt; src.stop(); playing = false; }
function now() { return playing ? (offset + ac.currentTime - startAt) % VIDEO.duration : offset; }
(function loop() { seek(now()); requestAnimationFrame(loop); })(); // 스크러버가 offset을 설정합니다(일시 중지, 설정, 재생)
- 비트 시트를 스크립트 상단에 주석으로 넣으세요: 각 순간에 대한 시간, 발생 상황, 사운드.
3단계: 확인, 렌더링, 전달
작업 폴더에서 한 번 설정: npm i playwright, 그런 다음 npx playwright install chromium(Chromium이 아직 설치되지 않은 경우); ffmpeg가 PATH에 있어야 합니다. 이 파일 하단에 스크립트를 render.mjs로 저장하세요.
- 스틸.
node render.mjs demo.html check.png --stills 0.5,1.2,…비트 시트의 각 행에 대해 한 번씩 시간을 입력합니다(시트는 읽을 수 있는 크기, 행당 3개). 확인하세요. 잘린 부분, 겹치는 부분, 읽을 수 없는 부분, 브랜드와 맞지 않는 부분, 프레임이 잘못된 부분, 빈 부분을 수정하세요. 다시 확인하세요. - 드래프트.
node render.mjs demo.html draft.mp4 30 1 4(빠름: 30fps, 모션 블러 없음, 4개의 병렬 워커, 마지막 숫자를 머신의 코어 수로 설정). 이것은 리뷰 사본입니다: HTML과 함께 사용자에게 보내고 최종 작업 전에 변경 사항을 요청하세요. - 최종.
node render.mjs demo.html demo.mp4 60 8 8. 모션 블러는 서브프레임 수에 따라 렌더링 시간을 곱합니다. 60초 최종 렌더링은 노트북에서 20~60분이 소요될 수 있으므로 시작하기 전에 미리 알리세요. 완료되면 최종 MP4를 전달하세요.