점이 칼날인 로고 리빌

프롬프트 설정

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

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

핵심 아이디어: 강조 점이 칼날이다. 점이 화면을 대각선으로 가르고, 갈라진 화면이 원으로 수렴해 로고 마크가 되며, 점은 같은 직선을 되짚어 돌아와 앉는다. 퇴장 때 마크의 틈이 다시 화면을 가르는 칼질로 늘어나 처음으로 이어진다. 컷 없이 하나의 동작이 계속된다.

[바꿀 곳]
- 브랜드 이름: LUMEN
- 슬로건: 빛을 설계하는 사람들
- 색: 밝은 면 #F3F0EA · 어두운 면 #16161A · 강조 #2F5BFF
- 길이: 7초 (끝나면 처음으로 이어서 반복)
- 화면비: 16:9 (캔버스 1920×1080)

[크기] — 전부 화면 높이 H 기준
- 로고 마크(원) 반지름 R = 0.15H(지름 0.30H). 틈 폭 SW = 0.035H, 방향 −35°(왼쪽 아래→오른쪽 위).
  마크는 「원 ∩ 틈 중심선에서 +SW/2 바깥 반평면」과 「원 ∩ −SW/2 바깥 반평면」, 두 개의 반달 도형으로 직접 그린다.
  어두운 원 위에 밝은 띠를 덧칠하지 않는다(틈 끝에 원 테두리가 실선으로 남는다).
- 강조 점 반지름 RD = 0.03H. 중심은 틈 중심선의 오른쪽 위 연장선 위, 마크 중심에서 0.20H(= R + 0.02H + RD).
  이렇게 하면 점의 아래 끝이 이름의 대문자 윗선과 같은 높이에 온다(0.20·sin35° − 0.03 = 0.0847H ≈ 0.085H).
- 이름: 대문자 높이 CAP = 0.17H. 글꼴 크기는 measureText('H').actualBoundingBoxAscent 로 역산한다.
  글자 사이 추가 간격 0.06em. 각 글자의 x 는 measureText 로 잰 글자별 advance 폭 + 0.06em 을 왼쪽부터 누적해 구한다.
  이름의 잉크 왼쪽 끝 = L 의 actualBoundingBoxLeft 로 보정한 실제 획 시작점.
- 마크 오른쪽 끝 ~ 이름 잉크 왼쪽 끝 간격 0.08H.
- 슬로건: 한글 글자 높이 0.052H, 굵기 700, 글자 사이 0.02em, 색은 어두운 면 색.
  윗선 = 이름 기준선 아래 0.065H. 왼쪽 끝 = 이름의 잉크 왼쪽 끝(advance 원점이 아니라 획 시작점).
  슬로건 폭이 이름 잉크 폭의 0.9배를 넘으면 그 안에 들어가게 글자 크기를 줄인다.
- 묶음 배치: 묶음 폭 = 2R + 0.08H + 이름 잉크 폭, 화면 가로 가운데.
  세로는 마크 위끝(마크 중심 −0.15H)부터 슬로건 아래끝까지의 가운데를 화면 가운데에 둔다.
  마크 중심 P 가 칼질선이 지나는 점이며, 수렴도 이 자리에서 일어난다. 마크는 옆으로 미끄러지지 않는다.
- 강조색은 점 하나에만 쓴다(밑줄·가는 선 없음).

[장면] (L = P 를 지나는 −35° 직선. d = L 의 오른쪽 위 방향 단위벡터. 박자 격자 = 120 BPM, 한 박 0.5초 — 큰 사건은 박 위에 떨어진다)
1. 0.00–0.50 칼질. 강조 점이 화면 밖 왼쪽 아래에서 L 을 따라 화면 밖 오른쪽 위까지 달린다(easeInOutCubic).
   점이 지나간 자리에 어두운 선(굵기 SW)이 남는다. 선의 꼬리는 화면 밖 시작점, 머리는 점. 0.50초(1박)에 선이 완성된다.
2. 0.50–0.60 숨 고르기(예비 동작). 선 굵기가 SW → 0.6·SW 로 가늘어진다(easeInOutSine).
3. 0.60–1.20 뒤집힘. 선의 두 가장자리가 L 에 수직으로 서로 멀어지며 어두운 띠가 화면을 덮는다(easeInOutQuart).
   위쪽 가장자리는 그쪽에서 L 로부터 가장 먼 화면 모서리까지, 아래쪽 가장자리는 그쪽에서 가장 먼 모서리까지 —
   둘이 같은 이징으로 1.20초에 동시에 도착한다(각자 자기 거리에 이징을 곱한다). 모서리를 0.02H 넘겨서 끝낸다.
   0.72–1.10 동안 띠 한가운데에 밝은 틈이 폭 0 → SW 로 열린다(easeOutCubic).
   1.20초 화면 = 어두운 면 + 밝은 틈 하나. 화면 전체나 반쪽을 평행이동하지 않는다(화면 가장자리가 드러난다).
4. 1.20–2.00 수렴(시그니처). 어두운 면이 P 중심 원으로 줄어든다.
   반지름 r = R_BIG·(R/R_BIG)^(u²), u = (t−1.20)/0.80, R_BIG = P 에서 가장 먼 화면 모서리까지의 거리.
   (로그 공간에서 가속하므로 첫 프레임부터 모서리가 밝아지고, 끝에서 속도를 가진 채 부딪힌다.)
   틈은 원 안에서 폭 SW 그대로 남고, 원 밖은 밝은 면이다.
   2.00초(4박) 충돌: τ = t − 2.00 일 때 r = R·(1 − 0.06·e^(−9τ)·sin(22τ)).
   τ = 0 에서 값이 정확히 1 이어야 한다 — cos 꼴 금지(한 프레임 튐이 생긴다). 최대 눌림 약 3.4%(τ≈0.054초), 0.30초 뒤 0.5% 이하.
5. 1.94–2.44 점 귀환. 강조 점이 칼질 때 나갔던 바로 그 직선 L 을 따라 오른쪽 위 화면 밖에서 되돌아와
   제자리(P 에서 d 방향 0.20H)에 선다. L 위 진행률 = easeOutBack(c1 = 0.6):
   2.25초에 제자리를 처음 지나고(원 충돌 뒤 8분음표 하나), 마크 쪽으로 0.0086H 넘쳤다가(2.315초) 2.44초에 멈춘다.
   2.25초부터 τ = t − 2.25: 점은 진행축(d) 배율 1 − 0.20·e^(−10τ)·sin(24τ), 수직축 배율은 그 역수(면적 유지)인 타원으로 그린다.
   같은 τ 로 마크 전체가 −d 방향으로 0.006H·e^(−10τ)·sin(22τ) 만큼 밀렸다 돌아온다.
6. 2.27–3.00 이름 사출. 글자는 x > (P.x + R + 0.04H) 인 영역에서만 보인다(마크와 이름 사이 간격의 가운데 세로선).
   글자 i 의 x_i(t) = 최종 x_i − D·(1 − easeOutQuart(p_i)), D = (마지막 글자의 최종 advance 오른쪽 끝) − 경계선 x. 모든 글자가 같은 D.
   순서는 역순: 마지막 글자(N)가 2.27초에 먼저, 그 앞 글자마다 0.06초씩 늦게(L 은 2.51초), 글자당 0.49초 — L 이 3.00초(6박)에 선다.
   어느 프레임에서도 이웃 글자의 advance 상자가 겹치면 안 된다. 이 식이면 이웃 간격 = 최종 간격 + D·(E_오른쪽 글자 − E_왼쪽 글자) ≥ 최종 간격이라 자동으로 지켜진다(오른쪽 글자가 먼저 출발하므로 이 차는 늘 0 이상).
   움직이는 동안 글자는 진행 방향(오른쪽)으로 기운다: 기울기 = 10°·(1 − easeOutQuart(p_i)), 기준선 고정 skew.
7. 2.95–3.50 슬로건. 한 글자씩 아래에서 올라온다(글자 시차 0.025초, 글자당 0.30초, easeOutQuart). 마지막 글자가 3.50초(7박)에 선다.
   출발 위치는 슬로건 글자 높이의 1.05배 아래다 — 출발 순간 글자는 슬로건 상자 아래로 완전히 숨어 있고, 획이 상자 아래 가장자리에서 비집고 올라온다.
   슬로건 상자 밖은 잘린다.
8. 3.50–6.00 머묾. 묶음 전체가 묶음 중심 기준으로 1.000 → 1.015 → 1.000 숨 쉰다(s = 1 + 0.015·sin(π·(t−3.50)/2.50)). 다른 움직임은 없다.
9. 6.00–7.00 퇴장(칼질이 이어진다).
   6.00–6.10 점이 −d 방향으로 0.012H 당겨진다(예비 동작, easeOutQuad).
     같은 0.10초 동안 마크 틈 끝(원 테두리, L 위 거리 R)에서 어두운 선(굵기 SW)이 점 쪽으로 자라 나와, 6.10초에 점 중심에 닿는다(easeOutQuad).
   6.10–6.38 점이 L 을 따라 오른쪽 위 화면 밖으로 튀어 나간다(easeInQuart).
     위쪽 선: 원 테두리 → 점 중심. 선 머리는 점 중심에 붙어 간다(점과 선 사이에 밝은 틈이 생기지 않는다).
     아래쪽 선: 원 테두리 반대쪽(L 위 거리 −R)에서 왼쪽 아래로 그린다. 길이 비율 = (위쪽 선 길이) / (원 테두리에서 오른쪽 위 화면 밖까지 거리) 로 위쪽과 같게 둔다.
     6.38초에 위·아래 선이 둘 다 화면 밖에 닿는다.
     선은 원래 원 자리의 바깥에만 그린다 — 원 안의 틈은 밝은 채로, 틈이 화면을 가르는 칼질로 이어진다.
   6.38–6.62 선이 꼬리부터 지워진다(꼬리가 왼쪽 아래에서 오른쪽 위로 달려 나간다, easeInOutCubic).
   6.38–7.00 L 위쪽 조각은 d 방향으로, 아래쪽 조각(이름·슬로건 포함)은 −d 방향으로 각 1.15H 빠진다(easeInCubic).
   7.00초 = 빈 밝은 화면 = 0.00초 프레임. 남는 선 조각은 없다. 점은 오른쪽 위로 나가고 다음 바퀴에 왼쪽 아래에서 다시 들어온다.

[구현]
- 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)은 스크립트 맨 끝에서 한 번만 호출한다. 정의되기 전에 쓰면 첫 화면에서 멈춘다.

이 작품에만 해당하는 구현:
- 스프링·반동은 전부 닫힌 식이고 τ=0 에서 값 1(sin 꼴)이다. 어떤 값도 한 프레임 사이에 튀면 안 된다.
- 빠른 움직임 흐림: 화면에 내보내는 한 프레임 = 흐림 창 1/120초를 N 칸으로 고르게 나눠 칸마다 한 장씩 그린 render N 장(t, t−1/(120·N), t−2/(120·N), …, t−(N−1)/(120·N))의 평균.
  화면 밖 캔버스에 k번째(k=1..N) 장을 globalAlpha = 1/k 로 겹쳐 그리면 정확한 평균이 된다. 멈춘 것은 그대로 선명하다.
  N = 8 이면 가장 빠른 이름 사출(초속 약 7,400px/s)에서 장 사이가 약 8px 라 사본이 줄무늬로 갈라지지 않는다. N = 4 에 1/240 간격이면 장 사이가 31px 라 글자가 4겹 줄무늬로 보인다.
  CONFIG 에 motionBlurSamples(미리보기 8, 녹화 16, 느리면 1)와 motionBlurWindow(1/120)를 둔다.
- 글꼴: 공통 문단의 한글 글꼴 줄은 슬로건에만 쓴다. 이름 'Avenir Next', 'Century Gothic', 'Futura', 'Bahnschrift', 'Segoe UI', sans-serif 굵기 700(전부 시스템 글꼴).
  슬로건은 위 한글 시스템 글꼴 스택, 굵기 700.
- 사출 거리 D·이름 잉크 폭·글자별 x 는 그 기기의 글꼴로 measureText 해서 코드가 계산한다.
- CONFIG.timing 에 [장면]의 시각을 전부 이름 붙여 모은다:
  cut[0,0.50] · breath[0.50,0.60] · invert[0.60,1.20] · slitOpen[0.72,1.10] · converge[1.20,2.00] · impact 2.00 ·
  dotReturn[1.94,2.44] · dotPass 2.25 · name 2.27 / letterDur 0.49 / letterStagger 0.06(역순) · slogan[2.95,3.50] ·
  hold[3.50,6.00] · exitAnticip[6.00,6.10] · exitLaunch[6.10,6.38] · lineErase[6.38,6.62] · exitSlide[6.38,7.00] · bpm 120.

[하지 말 것]
- 어두운 원을 칠한 뒤 그 위에 밝은 띠를 덧칠해 틈을 내지 않는다 — 틈 양 끝에 원 테두리가 머리카락 같은 회색 호로 남는다. 마크는 반달 도형 둘로 직접 그린다.
- 강조색을 점 말고 다른 곳(밑줄·가는 선·글자)에 쓰지 않는다 — 이름 아래 강조색 밑줄은 하이퍼링크처럼 읽히고, 「점 하나가 칼날」이라는 이야기가 흐려진다.
- 마크를 옆으로 비키게 하고 그 뒤에서 이름을 꺼내지 않는다 — 「가운데 아이콘 → 옆으로 비킴 → 워드마크」는 로고 리빌에서 가장 흔한 동선이라 템플릿처럼 보인다. 마크는 처음부터 최종 자리에서 수렴한다.
- 화면 전체나 반쪽, 클립 사각형을 평행이동하지 않는다 — 끝없이 넓은 면을 자기 경계선 방향으로 밀면 화면 안은 그대로이고, 드러나는 것은 화면 가장자리의 세로 띠·꺾인 홈 같은 자국뿐이다. 뒤집힘은 칼질선의 두 가장자리가 벌어지는 것으로만 만든다.
- 스프링·반동을 cos 꼴로 쓰지 않는다 — τ=0 에서 값이 1이 아니라서 충돌 순간 원과 점의 크기가 한 프레임에 튀고, 충돌이 아니라 「멈춘 뒤 혼자 움찔」로 읽힌다.
- 이름 글자를 한 출발점에서 앞 글자부터 내보내지 않는다 — 감속 이징에서는 먼저 출발한 앞 글자를 뒤 글자가 따라잡아 글자가 사선으로 잘린 채 엉킨다. 역순·같은 거리 D 여야 겹침이 수학적으로 없다.
- 글자가 마크 원과 겹쳐 보이게 하거나 퇴장선이 글자·슬로건을 지나가게 하지 않는다 — 같은 어두운 색끼리 겹치면 경계가 사라져 원 실루엣이 일그러지고 글자가 덩어리로 뭉개진다.
- 점이 돌아올 때 포물선이나 다른 길로 오지 않는다 — 칼질을 한 바로 그 물체라는 연결이 끊기고, 다른 길은 목적 없는 표류로 읽힌다.
- 퇴장 때 마크의 틈과 무관한 새 선을 긋거나, 선 조각을 선 자신의 방향으로 밀지 않는다 — 틈이 늘어난 칼질이어야 처음 칼질과 같은 직선으로 이어지고, 선 방향으로 밀린 조각은 화면을 떠나지 못한 채 마지막 프레임에 한꺼번에 사라져 반복 이음매가 튄다.
- 슬로건·정렬 기준을 글자의 advance 원점에 두지 않는다 — L 의 세로획은 원점보다 오른쪽에서 시작해서, 슬로건이 이름보다 왼쪽으로 삐져나와 보인다. 잉크 왼쪽 끝(획 시작점)에 맞춘다.
- 사출 거리 D 나 글자 폭을 숫자로 박지 않는다 — 기기마다 대체 글꼴이 달라 폭이 바뀌고, 박아 둔 숫자는 겹침이나 틈을 만든다.
- 머묾 구간에 숨쉬기 말고 다른 움직임(점 맥박·반짝임)을 넣지 않는다 — 브랜드 인트로의 쓸모는 이름이 읽히는 정지이고, 작은 맥박은 사건이 되지 못한 채 산만함만 더한다.
- 렌즈 플레어·빛 번쩍임·파티클 폭발을 넣지 않는다 — 납작한 세 색 면으로 된 로고에서 시선을 칼질과 수렴에서 빼앗고, 흔한 템플릿 인트로처럼 보이게 한다.
- 그림자·그라디언트·3D 회전을 넣지 않는다 — 면이 납작해야 칼질선·띠·원이 한 평면에서 이어지는 것으로 읽힌다. 입체감이 붙으면 「선이 벌어져 면이 되고 원이 된다」가 보이지 않는다.
- 페이드(투명도로 나타나고 사라지기)를 쓰지 않는다 — 이 작품은 컷 없이 하나의 동작이 계속되는 것이 핵심이다. 투명도로 넘기면 이음매가 장면 전환으로 읽힌다.