10초 쇼릴 인트로

프롬프트 설정

Claude 가 읽는 제작 지시문입니다. 직접 읽지 않아도 됩니다.

쇼릴 인트로 영상을 HTML 파일 하나로 만들어 줘. 미리보기에서 바로 재생되게. 길게 설명할 테니 숫자는 그대로 지켜 줘.

핵심 아이디어: 10초 동안 컷이 한 번도 없다. 원 → 사각 → 삼각 → 굵은 글자 획 → 이름이 도형 매치컷으로 이어지고, 마지막 이름 옆의 점이 다시 첫 장면의 원이 된다. 매 전환마다 다음 장면은 앞 장면의 모양·색·운동 방향 중 하나를 이어받는다.
- 원 → 사각: 원이 렌즈가 된다. 원 한가운데에 구멍이 열리고 그 안에 다음 장면(파란 세계의 노란 사각)이 보이다가, 고리가 카메라를 지나 날아가며 그 세계로 들어간다. (모양을 이어받음)
- 사각 → 삼각: 같은 노란 도형이 시계 방향으로 돌면서 꼭짓점 둘이 하나로 합쳐져 삼각이 된다. (색·회전 방향을 이어받음)
- 삼각 → 획: 삼각이 거대한 화살촉이 되어 오른쪽으로 쏘아지고, 지나간 자리에 흰 세계와 굵은 검은 띠가 남는다. 그 띠는 이름 글자의 획을 아주 크게 본 것이다. (운동 방향을 이어받음)
- 획 → 이름: 카메라가 그 획에서 물러나며 돌아서 이름 전체가 된다. (같은 물체)
- 이름 → 원: 이름 끝의 주홍 점으로 카메라가 뛰어들어 점이 첫 장면의 원이 된다. (모양·색을 이어받음)
가장 중요한 순간은 1.00~1.50초의 렌즈 통과다. 주홍 고리가 화면 높이의 0.84배에서 화면 대각선보다 크게 불어나며 사라지고, 고리 안의 파란 세계가 0.62배 크기에서 제 크기로 다가온다.

[바꿀 곳]
- 이름: MOTIF (한글 이름도 된다)
- 부제: SHOWREEL 2026
- 색 세 가지: 주홍 #FF4A1C · 코발트 #2347FF · 노랑 #FFC42E
- 검정 #111111 · 흰색 #F2EEE5
- 박자: 120 BPM (한 박 0.5초). 아래 시각은 전부 박 단위로 정해져 있어서 BPM 만 바꾸면 전체가 같이 늘고 준다.
- 길이: 20박 = 10초 (끝나면 처음으로 이어서 반복)
- 화면비: 16:9 (캔버스 1920×1080)

[크기] — 전부 화면 높이 H 기준 (C = 화면 가운데)
- 첫 장면 원: 반지름 R1 = 0.42H(지름 0.84H), 중심 C.
- 렌즈 고리: 바깥 반지름 ro, 안쪽 반지름 ri = 0.78·ro(구멍이 다 열렸을 때). 고리 두께 0.22·R1 = 0.092H.
- 사각: 한 변 SQ = 0.62H(꼭짓점까지 거리 Rsq = 0.438H), 중심 C.
- 삼각: 정삼각형, 외접원 반지름 Rt = 0.40H(한 변 0.69H), 중심 C. 화살촉이 될 때 외접원 반지름 0.70H — 밑변 길이 1.21H 라 밑변 양 끝이 화면 위아래 밖으로 0.106H 씩 나간다.
- 이름 묶음(최종 배치, 세계 좌표 = 1920×1080 캔버스 좌표):
  CAP = 이름의 잉크 높이(measureText(이름).actualBoundingBoxAscent). 굵기 800.
  이름 오른쪽에 점: 반지름 rDot = 0.21·CAP, 이름 잉크 오른쪽 끝과 점 왼쪽 끝 사이 0.28·CAP, 점의 아래 끝이 이름 기준선에 닿는다(마침표 자리).
  묶음 폭 = 이름 잉크 폭 + 0.70·CAP 가 0.74W 가 되게 글자 크기를 정한다. 단 CAP 은 0.28H 를 넘지 않는다.
  묶음은 가로 가운데. 이름 x 는 잉크 왼쪽 끝 기준(actualBoundingBoxLeft 로 보정).
  부제: 잉크 높이 0.20·CAP(폰 폭 390px 에서도 약 12px 로 읽힌다), 굵기 600, 묶음 가운데 정렬.
  글자 사이: 부제에 한글이 있으면 0.12em, 없으면 0.30em(한글에 0.30em 을 주면 낱말 사이 띄어쓰기가 자간에 묻혀 「작 업 모 음」처럼 읽힌다). 글자마다 advance + 자간을 누적하고, 마지막 글자 뒤 간격은 폭에서 뺀다.
  부제 윗선 = 이름 기준선 + 이름 descent(actualBoundingBoxDescent, 음수면 0) + 0.30·CAP. 부제 폭이 묶음 폭을 넘으면 그 안에 들어가게 줄인다.
  세로: 이름 윗선(기준선 − CAP)부터 부제 아래끝까지의 가운데를 C.y 에 둔다.
  색: 이름·부제 검정, 점 주홍, 바탕 흰색.
- 획 띠 두께 Tb = 0.30H (아래 [획 찾기]의 시작 배율이 이 두께를 만든다).

[획 찾기 — 시작할 때 한 번]
1) 오프스크린 캔버스(이름 잉크 상자 + 사방 4px)에 최종 배치 그대로 이름만 그린다(점·부제 제외). 알파 ≥ 128 이 잉크.
2) 거리 변환 두 번 훑기: 잉크 픽셀은 ∞, 빈 픽셀은 0 으로 시작. 앞으로 훑기(위→아래, 왼→오른)는 왼쪽·위 +1, 왼위·오른위 +1.4142 이웃과 비교해 작은 값을, 뒤로 훑기(아래→위, 오른→왼)는 오른쪽·아래 +1, 오른아래·왼아래 +1.4142 와 비교한다. 상자 밖은 빈 픽셀로 본다.
   거리 값의 최댓값은 「가장 굵은 획」이 아니라 「가장 큰 내접원」, 곧 두 획이 만나는 교차점·꺾임이다. 그래서 최댓값 픽셀을 그대로 쓰지 않는다.
3) 능선 후보: 거리 값이 주변 5×5 안에서 가장 크고(같은 값 허용) 1.5px 를 넘는 잉크 픽셀. 후보 값의 중앙값 = rStem(그 글꼴의 보통 획 반폭).
   교차점을 버린다: 값이 1.25·rStem 을 넘거나 0.8·rStem 에 못 미치는 후보는 쓰지 않는다. 후보가 400개를 넘으면 스캔 순서대로 고르게 솎아 400개로 줄인다.
4) 곧은 획 고르기 — 방향은 「가장 긴 현」이 아니라 「가장 짧은 단면」으로 정한다.
   남은 후보마다 0°~179°를 1° 간격으로, (cosθ, sinθ) 쪽과 그 반대쪽으로 1px 씩 걸어 잉크가 끊길 때까지의 길이 합 c(θ) = a + b 를 잰다.
   c 가 가장 짧은 각 θn 이 그 자리 획의 단면이고, 획 방향은 θ = θn + 90°(180 으로 나눈 나머지)다. 가장 짧은 값이 여러 각에 걸치면(이어진 각들, 179°와 0°도 이어진 것으로 본다) 그 각들의 가운데를 쓴다.
   그 θ 로 다시 걸어 a, b 를 얻는다. 점수 = 2·min(a, b). 점수가 가장 큰 후보와 그 θ 가 획 G 와 θA 다(같으면 왼쪽 후보). 양쪽으로 가장 멀리 뻗는 곧은 획의 가운데일수록 점수가 크다.
   (가장 긴 현으로 방향을 고르면 안 된다 — 폭 2r·길이 L 인 막대에서 가장 긴 현은 모서리에서 모서리로 가는 대각선이라 축에서 atan(2r/L), 굵은 글자에서 5~13° 기운다. 가장 짧은 단면은 축에 수직이라 이 치우침이 없다.)
4-1) 가운데 선으로 다듬기: 이웃 획이 한쪽 옆에 붙은 자리에서는 가장 짧은 단면도 몇 도 기운다(M 줄기 옆에 사선이 붙은 자리에서 6° 넘게). 그래서 θA 를 획의 가운데 선에 맞춰 한 번 더 다듬는다.
   A 에서 θA 방향으로 −0.30·LG, −0.15·LG, 0, +0.15·LG, +0.30·LG 떨어진 다섯 점(LG = a + b)에서 θA + 90° 방향 단면을 양쪽으로 걸어, 단면의 가운데 점을 얻는다.
   단면 길이가 1.3 × 2·rA(rA = 처음 고른 자리의 거리 값)를 넘으면 이웃 획이 붙은 단면이라 버린다. 잉크 밖인 점도 버린다.
   남은 가운데 점이 3개 이상이면 그 점들을 지나는 직선(최소제곱, 주성분 방향)의 각을 새 θA 로 하고, A 를 그 직선 위로 옮긴다. 이 다듬기를 2번 한다.
   마지막으로 A 에서 θA 방향으로 다시 걸어 a, b 를 얻고 A 를 (a − b)/2 옮긴다(획 G 의 한가운데). rA = A 의 거리 값. 획 길이 LG = a + b. A 는 세계 좌표로 바꿔 둔다.
   (이 방식의 검산: MOTIF·「한빛 필름」을 맑은 고딕 굵게, Noto Sans KR 700·800·900 래스터에서 돌리면 「름」의 ㄹ 가로획은 0.00°, M 줄기는 88.4~89.1°(줄기가 아래로 갈수록 굵어져 가운데 선이 그만큼 기운다)이고, 화면 띠 가운데의 기울기는 ±1° 안이다.)
   시작 회전 φ0 = −θA, 단 θA > 90° 이면 φ0 = 180° − θA (어느 쪽이든 그 획이 화면에서 수평이 된다). 각도는 캔버스 좌표(y 가 아래) 기준, ctx.rotate 와 같은 방향.
5) 시작 배율 s0 = Tb / (2·rA), 4 ~ 16 사이로 자른다. 로마자 굵은 글꼴은 5~6, 한글 이름은 획이 가늘어 8~11 이 정상이다.
   LG·s0 가 화면 폭보다 짧으면 띠의 두 끝이 화면 안에서 끝난다. 그대로 둔다(양 끝이 보이는 굵은 막대). 띠의 가운데는 언제나 화면 가운데다.
6) 콘솔에 A, rA, rStem, θA, φ0, s0, LG, CAP 을 출력한다.

[카메라 — 이름 세계를 그리는 법]
카메라는 「닻」으로 정한다: 세계의 닻 점 Q 가 화면 K 에 오고, 나머지는 그 둘레로 배율 s·회전 φ 만큼 놓인다.
화면 위치 = K + s·Rot(φ)·(P − Q) (setTransform 하나로). 움직이는 장면마다 닻의 화면 자리 K 를 먼저 정하고 배율을 따로 정한다.
초점(화면 가운데에 오는 세계 점)을 직선으로 옮기면서 배율을 지수로 바꾸면 닻이 화면에서 바깥으로 부풀었다가 돌아온다 — 그래서 초점 대신 닻의 화면 경로를 정한다.
- 획 장면 시작: Q = A, K = C, s = s0, φ = φ0 → 획 G 가 화면 가운데를 가로지르는 두께 0.30H 의 수평 띠로 보인다.
- 최종: s = 1, φ = 0, 닻이 제자리(K = Q) → 최종 배치 그대로.
- 점으로 뛰어들기 끝: Q = D(점 중심), K = C, s = sEnd = R1 / rDot → 점이 반지름 0.42H 로 화면 가운데에 온다 = 첫 장면의 원.
  이때 이름 잉크 오른쪽 끝은 점 중심에서 0.49·CAP 떨어져 있으므로 화면에서는 0.49·CAP·sEnd = 0.98H(1058px) 왼쪽, 즉 화면 밖이다. 부제도 아래로 화면 밖이다. CAP 크기와 상관없이 성립한다.
- 스프링 첫 속도: 두 충돌 스프링(0.00초 원, 6.00초 착지)은 d(ln 크기)/dt 가 0.08·22 = 1.76/s 로 시작한다. 들어오는 줌도 끝에서 같은 1.76/s 가 되도록 지수 k 를 계산한다(장면 8·12). 닻의 화면 속도는 끝에서 0 이다. 그래서 이음매에서 크기 속도도 옆 속도도 끊기지 않는다.

[장면] (박 b = 60/bpm 초. 120 BPM 이면 0.5초. 큰 사건은 박 위에 떨어진다. 괄호 = 박 번호)
1. 0.00–0.50 (0) 원의 충돌. 흰 바탕, 주홍 원 중심 C. 반지름 ro = R1·(1 + 0.08·e^(−9τ)·sin(22τ)), τ = t.
   τ = 0 에서 정확히 R1(sin 꼴). 최대 4.6% 커졌다가(τ≈0.054초) 1.3% 작아지고(τ≈0.197초) 0.26초 뒤 0.5% 안. 앞 바퀴의 뛰어들기가 이 충돌로 이어진다.
2. 0.50–0.90 (1) 구멍. 원 가운데에 구멍이 열린다: ri = 0.78·ro·easeOutCubic(v), v = (t−0.50)/0.40. 원은 고리가 된다.
   구멍 안에는 다음 장면 세계(코발트 바탕 + 노란 사각, 4번 참고)를 C 중심으로 m0 = 0.62배 축소해 그린다(구멍 원으로 잘라서).
   이때 사각의 꼭짓점 거리는 0.272H, 구멍 반지름은 0.328H 라 사각 전체가 파란 원 안에 떠 보인다. 고리 밖은 흰 바탕.
3. 1.00–1.50 (2–3) 렌즈 통과(시그니처). u = (t−1.00)/0.50, g = 3.3^(u²).
   ro = R1·g, ri = 0.78·R1·g — 고리 전체가 같은 배율로 불어나며 카메라를 지나간다(로그 공간 가속: 첫 프레임부터 움직이고 끝에서 가장 빠르다).
   구멍 안 세계 배율 m = 0.62^(1−u²) → 1.50초에 정확히 1. 고리보다 덜 커져서 「멀리 있는 세계로 들어간다」는 깊이가 생긴다.
   1.50초: ri = 0.78·0.42H·3.3 = 1.081H > 화면 모서리 거리 1.020H. 화면 = 코발트 세계 전체, 고리는 화면 밖.
   (1.20초 예: 고리 바깥 0.508H · 안 0.397H · 세계 배율 0.669 · 사각 꼭짓점 0.293H — 아직 사각 전체가 구멍 안에 보인다.)
4. 사각의 박자 회전. 사각 각도 α 는 0°에서 시작해 1.00 · 1.50 · 2.00초(2·3·4박)마다 시계 방향으로 45°씩 돈다.
   각 회전은 0.30초 easeOutBack(c1 = 1.70158): 45°를 약 4.5° 넘었다가 돌아온다. 2.00초 회전이 끝나면 α = 135°(마름모, 꼭짓점이 오른쪽·아래·왼쪽·위).
5. 2.50–3.00 (5) 사각 → 삼각 모핑. 2.50초의 마름모 꼭짓점을 시계 방향 순서로 w0 = 0°(오른쪽), w1 = 90°(아래), w2 = 180°(왼쪽), w3 = 270°(위)라 하고, 거리는 Rsq.
   e = easeInOutCubic((t−2.50)/0.50). 각 꼭짓점 각도 = 출발 각 + Δ·e, 거리 = Rsq + (Rt − Rsq)·e. Δ = w0 120° · w1 150° · w2 180° · w3 210°.
   도착 각: w0 120° · w1 240° · w2 360° · w3 480°(=120°). w3 가 w0 를 따라잡아 한 점이 되고, 3.00초에 꼭짓점이 0°·120°·240° — 오른쪽을 가리키는 정삼각형이 된다.
   이웃 꼭짓점 사이 각은 언제나 0° 이상이라 도형이 꼬이지 않는다. 다각형은 w0→w1→w2→w3 순서로 잇는다.
6. 3.00–3.50 (6) 화살촉 준비(예비 동작). 삼각이 커지며 뒤로 물러난다: 외접원 반지름 0.40H → 0.70H, 중심 x = C.x → 0.33H(356px), easeInOutCubic. 중심 y 는 C.y.
   3.50초: 밑변 x = 0.33H − 0.35H = −0.02H(화면 왼쪽 끝 바로 밖), 꼭짓점 x = 1.03H(1112px), 밑변 양 끝은 화면 위아래 밖.
7. 3.50–4.00 (7) 발사 = 획 긋기. 중심 x = 0.33H → W + 0.37H(2320px), easeInQuad. 밑변 x = 중심 x − 0.35H.
   밑변 왼쪽 전체(화면 위아래 끝까지)는 이름 세계(흰 바탕 + 카메라 Q = A, K = C, s = s0, φ = φ0)로 바뀐다. 오른쪽은 코발트 그대로, 노란 삼각은 그 위에.
   그래서 노란 화살촉 뒤로 화면 가운데 높이에 검은 띠(획 G)가 따라 나온다. 3.78초 예: 밑변 594px, 꼭짓점 1728px.
   4.00초: 밑변 x = W + 0.02H — 화면 = 흰 바탕을 가로지르는 검은 획.
8. 4.00–6.00 (8–12) 획에서 이름으로 물러나기. u = (t−4.00)/2.00, T8 = 물러나기 길이(초, 120 BPM 에서 2.00).
   배율: s = s0^(1−q), q = u^k8, k8 = max(1.2, 1.76·T8 / ln s0) — 시작할 때 계산. 이러면 6.00초 직전 d(ln s)/dt 가 −1.76/s 로 착지 스프링 첫 속도와 정확히 같다.
   (s0 = 5.8 이면 k8 = 2.00, s0 = 10 이면 1.53, s0 = 4 이면 2.54.)
   닻: Q = A, 화면 자리 K = C + (A − C)·(3u² − 2u³) — A 는 화면 가운데에서 최종 자리까지 곧게 가고 끝에서 화면 속도 0. 회전 φ = φ0·(1 − easeInOutCubic(u)).
   로그 공간 가속이라 4.0~4.5초는 거의 정지한 획, s ≈ 3 무렵(s0 = 5.8 이면 5.2초) 글자 모양이 드러나고, 6.00초에 이름 묶음이 제자리에 떨어진다.
9. 6.00 (12) 착지. τ = t − 6.00 일 때 s = 1 − 0.08·e^(−9τ)·sin(22τ), 닻 Q = K = A(최종 자리 그대로), φ = 0. 최대 4.6% 작아졌다가 1.3% 커지고 0.26초 뒤 0.5% 안.
   스프링의 중심은 화면 가운데가 아니라 A 다. 물러나기의 닻과 같아야 6.00초 앞뒤로 모든 점의 속도가 같다(크기 속도 −1.76/s, 닻 속도 0).
10. 6.50–6.90 (13) 부제. 부제 줄 전체가 자기 잉크 높이의 1.2배 아래에서 올라온다(easeOutQuart). 부제 상자 밖은 잘린다. 6.50초 전에는 보이지 않는다.
11. 6.90–8.50 머묾. 아무것도 움직이지 않는다.
12. 8.50–10.00 (17–20) 점으로 뛰어들기. u = (t−8.50)/1.50, T12 = 뛰어들기 길이(초, 120 BPM 에서 1.50).
    배율: s = sEnd^q, q = u^k, k = max(1.2, 1.76·T12 / ln sEnd) — 시작할 때 계산. 10.00초 직전 d(ln s)/dt = 1.76/s 로 0.00초 충돌 스프링 첫 속도와 같다.
    (CAP = 0.28H 면 sEnd = 7.14, k = 1.34. CAP 이 0.22H 보다 작은 긴 이름은 k 가 1.2 에 걸려 끝 속도가 조금 빨라진다 — CAP 0.15H 에서 2.07/s.)
    닻: Q = D, 화면 자리 K = C + (D − C)·(1 − (3u² − 2u³)) — 점은 처음 자리에서 화면 가운데까지 곧게 오고, 끝에서 화면 속도 0. φ = 0.
    점은 처음부터 끝까지 화면 안에 있다(CAP 0.15H~0.28H 로 검산: 점 원이 화면 밖으로 나가는 순간 0).
    이름과 부제는 왼쪽·아래로 화면 밖으로 빠지고, 10.00초에 점 = 반지름 R1 의 주홍 원이 화면 가운데.
    10.00초 프레임 = 0.00초 프레임(흰 바탕 + 반지름 R1 주홍 원). 10.00초 직전에 모든 점은 화면 가운데에서 바깥으로 1.76·(거리)/s 로 움직이고, 0.00초 충돌 스프링도 같은 속도로 시작한다 — 옆으로 서는 움직임이 없어 이음매가 보이지 않는다.

장면별 화면 정리:
- 0.00–0.50: 흰 바탕 + 주홍 원.
- 0.50–1.50: 흰 바탕 + 구멍 안 코발트 세계(배율 m) + 주홍 고리(짝홀 채우기로 두 원 사이를 칠한다).
- 1.50–3.50: 코발트 바탕 + 노란 도형(사각 → 삼각).
- 3.50–4.00: 코발트 바탕 + 밑변 왼쪽 이름 세계 + 노란 삼각.
- 4.00–10.00: 이름 세계(흰 바탕 + 검은 이름 + 주홍 점 + 6.50초부터 부제) — 카메라만 움직인다.

[구현]
- HTML 파일 하나로 만든다. 외부 파일·글꼴·라이브러리·네트워크 요청을 쓰지 않는다(미리보기에서 막히거나 느려진다).
- 첫 <script> 맨 앞에 CONFIG 객체를 두고 [바꿀 곳]의 값과 이 글에 나온 숫자(시간표·크기·색·세기)를 이름 붙여 모은다. 나중에 숫자만 바꿔 다듬을 수 있게.
- 그림은 시간 t(초)만으로 계산하는 함수 render(t) 로 그린다. requestAnimationFrame 의 타임스탬프나 performance.now() 로 t 를 구한다. setTimeout·setInterval·CSS 애니메이션·transition 으로 움직이지 않는다(프레임마다 속도가 달라지고, 다시 재생할 때 어긋난다). 시뮬레이션처럼 상태가 쌓이는 작품은 고정 시간 간격으로 상태를 진행하되 그 진행도 타임스탬프로만 정한다.
- 난수는 시드 고정 난수(mulberry32 등)만 쓴다. Math.random 은 쓰지 않는다(매번 다른 화면이 나온다).
- 캔버스 내부 해상도는 화면비에 맞춘 기준 크기로 고정하고, 창 크기에 맞춰 화면비를 지키며 가운데에 꽉 차게 보이게 한다(남는 곳은 배경색). 스크롤이 생기지 않게 한다. devicePixelRatio 는 그리는 선명도에만 반영한다.
- 글자는 시스템 글꼴만 쓴다: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif. 붓글씨·손글씨 느낌은 글꼴이 아니라 획을 그려서 낸다.
- 길이가 정해진 작품은 끝나면 처음과 같은 화면으로 돌아가 이음매 없이 반복한다.
- 모든 함수·상수·셰이더 문자열을 먼저 정의하고, 시작(초기화와 첫 requestAnimationFrame)은 스크립트 맨 끝에서 한 번만 호출한다. 정의되기 전에 쓰면 첫 화면에서 멈춘다.

이 작품에만 해당하는 구현:
- 기준 크기 1920×1080. t 는 (경과 초) mod (20박 길이).
- CONFIG.timing 은 박 수로 적고 초 = 박 × 60/bpm 으로 바꿔 쓴다: hit 0 · hole[1, 1.8] · lens[2, 3] · snaps 2·3·4(각 0.6박) · morph[5, 6] · anticip[6, 7] · shoot[7, 8] · zoomOut[8, 12] · land 12 · sub[13, 13.8] · dive[17, 20]. 스프링(0.08, 9, 22)은 초 단위 그대로.
- 렌즈·사각·삼각 세계는 함수 drawShapes(t, m) 하나가 그린다(코발트 바탕 + 그 시각의 노란 다각형, C 중심 m 배). 렌즈 안과 1.50초 뒤 전체 화면이 같은 함수를 쓴다.
- 이름 세계는 drawNameWorld(t, Q, K, s, φ) 하나가 그린다(흰 바탕 + 이름 + 점 + 부제). 획 장면·물러나기·착지·뛰어들기가 모두 이 함수에 카메라만 바꿔 넘긴다. 이름은 fillText 한 번으로 그린다(글자별로 나누지 않는다).
- 획 찾기(A, rA, rStem, θA, φ0, s0, LG)·k8·k 와 묶음 배치는 시작할 때 한 번만 계산해 둔다. 그 기기의 글꼴로 measureText·픽셀을 재서 정한다.
- 빠른 움직임 흐림: 화면에 내보내는 한 프레임 = 시각 t, t−1/960, t−2/960, t−3/960 의 render 4장 평균(셔터 1/320초, 각 시각도 길이로 나눈 나머지). 화면 밖 캔버스에 k번째(k=1..4) 장을 globalAlpha = 1/k 로 겹쳐 그리면 정확한 평균이 된다. 멈춘 것은 그대로 선명하다.
  장 간격은 화면에서 가장 가는 획(부제 획, 약 13px)의 1/3 을 넘지 않아야 한다. 넘으면 흐림이 아니라 같은 글자·같은 모서리가 여러 겹 찍힌 줄무늬로 보인다(1/240초 간격이면 모핑 꼭짓점이 약 40px, 발사 끝 화살촉이 약 30px 씩 벌어진 4겹이 된다. 1/960초면 약 11px·8px). 더 길게 흐리고 싶으면 간격은 그대로 두고 장 수를 늘린다.
  CONFIG.motionBlurSamples(기본 4), CONFIG.motionBlurStep = 1/960.
- 성능: 흐림용 장은 화면 표시 크기(CSS 픽셀, dpr 곱하기 전)의 화면 밖 캔버스에 그리고, 합친 결과만 dpr 캔버스에 늘려 그린다(dpr 2 화면에서 4장을 전부 고해상도로 그리면 프레임당 20~35ms 가 걸린다).
  4장의 시각이 모두 정지 구간 안이면 1장만, 표시 캔버스에 dpr 해상도로 바로 그린다. 정지 구간(박) CONFIG.stillBeats = [[0.7,1],[1.8,2],[3.6,4],[4.6,5],[13.9,17]].
  한 프레임의 시간은 render 앞뒤를 performance.now 로 재지 않는다 — 캔버스 그리기는 GPU 에 명령을 쌓기만 하고 바로 돌아와, 실제로 16ms 가 걸려도 0.3ms 로 나온다. requestAnimationFrame 타임스탬프의 간격을 쓴다.
  처음 10프레임은 빼고, 최근 30프레임 간격 평균이 20ms 를 넘으면(화면 재생률이 60Hz 아래로 떨어진 것) 그 기기에서는 장 수를 1로 내리고 콘솔에 한 번 알린다.
- 시작 자체 대조표: 획 찾기와 배치가 끝나면 콘솔에 표 하나(console.table: 항목 · 기준 · 실측 · 합격/불합격)를 찍는다. 불합격이어도 재생은 계속한다.
  ① 교차점 아님: rA ≤ 1.25·rStem.
  ② 띠 두께: 이름 세계를 획 장면 시작 카메라(Q = A, K = C, s0, φ0)로 1920×1080 화면 밖 캔버스에 한 번 그려, 가운데 세로줄(x = C.x)에서 y = C.y 를 품은 검은 구간의 길이가 0.27H~0.33H(292~356px). 판정은 이 구간 하나로만 한다. 그 줄의 다른 검은 구간 수는 실측 칸에 참고로만 적는다(한글 이름은 나란한 가로획이, M 은 옆 사선이 함께 보이는 것이 정상이다). s0 가 4나 16 에 잘렸으면 「잘림」이라 적고 실측만 남긴다.
  ③ 띠 수평: 같은 그림에서 x = C.x ± 0.2W 두 세로줄마다, y = C.y 에 가장 가까운 검은 구간을 본다. 그 길이가 ② 구간 길이의 1.3배를 넘으면 이웃 획이 붙은 줄이라 「이웃 획」이라 적고 건너뛴다. 남은 줄의 구간 가운데 y 가 C.y ± 9px(0.2W 거리에서 약 1.3°) 안이면 합격. 두 줄 모두 건너뛰거나 비어 있으면 합격이 아니라 「판정 불가」라 적는다.
     (검산값: 4-1 의 방식으로 맑은 고딕 굵게·Noto 700~900 × MOTIF·「한빛 필름」 8판에서 이 어긋남은 최대 6.5px, 이웃 획으로 건너뛴 줄은 Noto 800·900 의 M 줄기 한쪽씩.)
  ④ 점이 화면 안: 뛰어들기 u = 0~1(0.01 간격)에서 점 원(중심 K, 반지름 rDot·s)이 화면 밖으로 나가는 칸 0개.
  ⑤ 이음매 크기 속도: 뛰어들기 끝 d(ln s)/dt = ln sEnd·k / T12 가 1.76 ± 3%(k 가 1.2 에 걸렸으면 「잘림」).
  ⑥ 착지 크기 속도: 물러나기 끝 d(ln s)/dt = ln s0·k8 / T8 가 1.76 ± 3%.
  ⑦ 이음매에서 이름이 화면 밖: 10.00초 카메라로 이름 잉크 오른쪽 끝의 화면 x < 0.
  ⑧ 흐림 장 간격 = 1/960초.
- D 키: 디버그 — 이름 세계 위에 A 점, 반지름 rA 원, 획 G(길이 LG, 방향 θA) 선, 현재 박 번호를 작게 표시한다. 기본은 꺼짐.

[하지 말 것]
- 장면 사이를 하드컷·페이드·크로스디졸브로 넘기지 않는다 — 이 작품의 볼거리는 「컷이 없다」는 것 하나다. 투명도로 넘기는 순간 그냥 슬라이드 쇼가 된다. 바탕색은 도형이 화면을 덮거나(고리·화살촉) 카메라가 들어가서만 바뀐다.
- 바탕색을 시간에 따라 섞어 바꾸지 않는다 — 주홍과 코발트를 섞으면 탁한 보라가 나오고, 매치컷의 날카로운 경계가 사라진다.
- 파티클·렌즈 플레어·빛 번쩍임·반짝이를 넣지 않는다 — 도형이 이어받는 모양·색·방향을 시선이 따라가야 하는데, 장식이 그 시선을 빼앗고 흔한 템플릿 인트로처럼 보이게 한다.
- 렌즈 고리에 유리 반사·하이라이트·굴절 무늬를 그리지 않는다 — 고리는 평평한 주홍 면이다. 진짜 렌즈처럼 그리면 첫 장면의 원(그리고 마지막 점)과 다른 물체가 되어 이음매가 끊긴다.
- 그림자·그라디언트·외곽선·3D 회전을 넣지 않는다 — 다섯 색 평면이어야 원이 고리가 되고 삼각이 띠를 끄는 것이 한 평면의 연속 동작으로 읽힌다.
- 모핑을 꼭짓점 좌표 직선 보간(x, y 를 바로 섞기)으로 하지 않는다 — 회전이 사라지고 가운데가 안으로 찌그러져, 「같은 도형이 돌면서 변한다」가 아니라 「다른 도형으로 바뀐다」로 보인다. 각도와 거리를 따로 보간한다.
- 모핑에서 꼭짓점 순서를 바꾸거나 반시계로 돌리지 않는다 — 도형이 나비넥타이처럼 꼬이고, 사각의 박자 회전(시계 방향)을 이어받지 못한다.
- 화살촉을 작게 두지 않는다 — 밑변이 화면 위아래를 넘지 않으면 밑변 위아래로 코발트가 남아 경계가 계단처럼 보이고, 와이프가 아니라 붙여 넣은 그림이 된다.
- 획 띠를 따로 사각형으로 그리지 않는다 — 띠는 이름 세계를 크게 본 것이어야 물러날 때 그대로 글자가 된다. 따로 그린 띠는 물러나는 순간 글자와 어긋나 튄다.
- 시작 지점 A·배율·각도를 숫자로 박지 않는다 — 기기마다 대체 글꼴이 달라 곧은 획의 자리와 굵기가 바뀐다. 거리 변환과 걷기로 그 기기에서 잰다.
- 거리 변환 최댓값 픽셀을 그대로 시작점으로 쓰지 않는다 — 그 자리는 획이 만나는 교차점·꺾임이라, 띠가 화면 가운데를 가로지르지 못하고 한쪽에서 끊기며 꺾이고, 내접원이 커서 띠 두께도 0.30H 의 3분의 2 로 얇아진다.
- 획 방향을 5° 같은 거친 간격으로 고르지 않는다 — 남는 기울기가 최대 2.5°라 화면 폭 1920px 에서 띠 양 끝이 가운데보다 약 42px 위아래로 어긋나(tan 2.5° × 960) 기울어 보인다. 1° 간격으로 고른다.
- 초점(화면 가운데 세계 점)을 직선으로 옮기면서 배율을 지수로 바꾸지 않는다 — 화면 위 경로가 (1 − p)·s 꼴로 부풀어, 뛰어들기에서는 점이 화면 오른쪽 밖으로 밀려났다가 마지막 0.3초에 휙 돌아와 첫 프레임에 서고(이음매가 「쿵」 튄다), 물러나기에서는 이름이 옆으로 미끄러지다 선다. 닻의 화면 경로를 먼저 정한다.
- 착지 스프링을 화면 가운데 중심으로 걸지 않는다 — 들어오던 닻(A)과 중심이 달라 6.00초에 묶음 전체가 옆으로 휙 선다.
- 흐림 장 간격을 넓게(1/240초 등) 잡지 않는다 — 장이 4장뿐이라 빠른 구간에서 같은 모양이 수십 px 간격으로 여러 겹 찍혀, 흐림이 아니라 줄무늬로 보인다. 첫 화면(0.00초)에도 초승달 겹이 남는다.
- 배율을 선형으로 보간하지 않는다 — 6배에서 1배로 선형이면 처음엔 휙 지나가고 끝은 기어간다. 배율은 로그 공간(지수)으로 움직인다.
- 스프링을 cos 꼴로 쓰지 않는다 — τ = 0 에서 값이 1이 아니라서 충돌 순간 크기가 한 프레임에 튄다.
- 이름 글자를 하나씩 등장시키거나 타자기처럼 찍지 않는다 — 이름은 획에서 물러나며 한 번에 드러나야 「획이 이름이 됐다」가 읽힌다.
- 점과 첫 장면 원의 크기·색·자리를 따로 정하지 않는다 — 점으로 뛰어든 끝 화면이 첫 화면과 같아야 반복 이음매가 사라진다. 원의 반지름은 sEnd·rDot = R1 이 되게 계산으로 맞춘다.
- 쇼릴 상투 장식(타임코드, 녹화 빨간 점, 화면 모서리 꺾쇠, 「SCENE 01」 같은 글자, 필름 구멍)을 넣지 않는다 — 프롬프트에 없는 글자와 테두리가 화면을 슬라이드처럼 나누고, 도형 다섯 개의 연속 동작이 묻힌다.
- 박자를 보여 주는 표시(메트로놈 점, 박 막대, 화면 깜빡임)를 그리지 않는다 — 박자는 도형의 사건이 박 위에 떨어지는 것으로만 느껴져야 한다. 깜빡임은 눈을 피곤하게 하고 매치컷을 끊는다.
- 소리를 만들지 않는다 — 미리보기에서는 자동 재생이 막혀 처음 몇 박이 어긋나고, 이 작품의 박자는 화면 안 사건으로 충분하다.
- 머묾 구간(6.90–8.50)에 숨쉬기·흔들기·반짝임을 넣지 않는다 — 인트로의 쓸모는 이름이 읽히는 정지다. 다음 움직임은 뛰어들기 하나다.