VYBE 타이포그래피
모션 그래픽에서 텍스트는 종종 주인공입니다. 푸티지처럼 다루세요: 무게, 크기, 리듬, 카메라가 있습니다.
번들 폰트 (OFL, vybe/assets/fonts/에 있으며 모든 프로젝트에 복사됨)
| 패밀리 | 성격 | 좋은 사용처 |
|---|---|---|
| Inter (가변 100–900) | 중립적, 정밀 | 애플-미니멀, 기업, UI, 캡션 |
| Space Grotesk (300–700) | 기술적, 독특 | 과학, 실험, 기술 |
| Fraunces (가변 세리프) | 따뜻함, 문학적, 고대비 | 영화적, 다큐멘터리, 에디토리얼 |
| JetBrains Mono (100–800) | 코드, 데이터 | 레이블, 숫자, 터미널 느낌 |
| Anton (400, 협폭) | 강력함, 포스터 | 키네틱 타이포그래피, 소셜 후크 |
| Orbitron (가변) | SF 디스플레이 | 사이버펑크 제목 (짧은 단어만) |
이름이 지정된 모든 패밀리는 해당 파일(HyperFrames lint)에 @font-face { src: url("assets/fonts/<file>.woff2") }가 필요합니다. 사용자 브랜드 폰트: 파일을 assets/fonts/에 복사하고 같은 방식으로 선언하세요. 라이선스가 임베딩을 허용하는지 확인하세요.
페어링: Fraunces + Inter (영화적) · Inter + JetBrains Mono (제품/기술) · Space Grotesk + JetBrains Mono (과학) · Anton + Space Grotesk (소셜/키네틱) · Orbitron (제목만) + Space Grotesk (그 외 모든 것).
비디오 가독성 규칙 (hyperframes check 크래프트 감사에서 시행됨)
- 최소 읽기 크기: 짧은 쪽의 2.6% →
2.7cqmin(1080p에서 28px). 본문 2.8–3.4cqmin; 제목 6–12cqmin; 히어로 단어 15–34cqmin. - 표시 시간 ≈ 단어당 0.3초 + 0.5초; 마지막 줄 ≥ 2초.
- 장면 전체에서 초당 화면 단어 ≤ 3.2개; 줄당 ≤ 약 10단어.
- 대비 WCAG AA (본문 4.5:1, 큰 텍스트 3:1). 이미지 위에는 스크림이나 그림자를 추가하세요.
- 본문에는
<br>금지;max-width(예:78cqw) 사용하여 자동 줄바꿈. 디스플레이 제목은 줄당<span>블록으로 의도적으로 나눌 수 있음. - 자간: 큰 디스플레이는 좁게 (−0.02 ~ −0.05em), 작은 대문자 레이블은 넓게 (+0.2 ~ +0.5em).
letter-spacing은 절대 애니메이션하지 마세요(깜빡임) — 글리프는x로 퍼뜨리세요. - 안전 영역: 세로 비디오는 읽는 텍스트가 상단 12%, 하단 22%, 우측 14% 밖에 위치하지 않도록 합니다.
키네틱 기법
| 기법 | 방법 |
|---|---|
| 블러-투-샤프 단어 | inline-block span 안의 단어, fromTo {opacity:0,y:30,filter:blur(14px)}, 0.12–0.16 간격 |
| 슬램 | 비트당 한 단어, scale 2.4 → 1과 back.out(1.6), 배경 컬러 필드 전환 |
| 마스크 상승 | 줄 래퍼 overflow:hidden, 내부 텍스트 yPercent 110 → 0 |
| 센터-아웃 리빌 | clipPath: inset(0 50% 0 50%) → inset(0) |
| 글리프 확산 | 글자별 x 오프셋이 중앙을 향해 수렴하여 0으로 |
| 타자기 | steps(n) 이즈의 clipPath inset, 또는 글자별 불투명도 세트 |
| 아웃라인 에코 | -webkit-text-stroke가 있는 중복 단어, 투명 채우기, 오프셋 트레일 |
| 타입 카메라 | 전체 단어 스택을 프레임 밖으로 확대/회전하여 다음 장면으로 전환 |
| 단어 교체 | 고정된 상자에 두 단어를 쌓고; yPercent로 이전 단어를 빼고 새 단어를 넣음 |
| 하이라이트 | inline-block .hl span이 back.out으로 확장되거나 뒤에 마커 바 scaleX 0→1 |
| 카운트업 | tabular-nums + onUpdate로 Math.round(v) 작성 |
캡션 (단어 동기화됨)
vybe audio는 <script type="application/json" id="vybe-captions"> 큐({start, end, text, words:[{text,start,end}]})를 삽입하며, 모든 VYBE 템플릿에는 큐당 하나의 요소를 생성하고 각 단어를 전사된 start 시점에 강조하는 캡션 빌더가 포함됩니다. 브랜드에 따라 스타일링:
- 안전 영역 안에 배치, 하단 서드 그래픽 위, 피사체를 가리지 않도록.
- 큐당 3–6단어, 최대 2줄, 3–3.4cqmin, 두께 600+, 스크림 또는 그림자.
- 활성 단어 강조 (불투명도 0.45 → 1, 또는 클래스를 통한 강조 색상).
- 소셜: 대문자, 볼드, 큐마다 팝 스케일; 영화적: 문장 케이스, 미묘한 페이드.
- 예상 단어 타이밍으로 캡션하지 마세요. 줄 수준의 타이밍은 줄 수준처럼 보여야 합니다.