VYBE Typography (Tipografia VYBE)
Em motion graphics, o tipo é frequentemente o ator principal. Trate-o como material de vídeo: ele tem peso, escala, ritmo e uma câmera.
Fontes inclusas (OFL, em vybe/assets/fonts/, copiadas para cada projeto)
| Família | Caráter | Boa para |
|---|---|---|
| Inter (variável 100–900) | neutra, precisa | minimalista estilo Apple, corporativo, UI, legendas |
| Space Grotesk (300–700) | técnica, peculiar | científico, experimental, tecnologia |
| Fraunces (serifa variável) | calorosa, literária, alto contraste | cinematográfico, documentário, editorial |
| JetBrains Mono (100–800) | código, dados | rótulos, números, aparência de terminal |
| Anton (400, condensada) | alta, pôster | tipografia cinética, chamadas para redes sociais |
| Orbitron (variável) | sci-fi display | títulos cyberpunk (apenas palavras curtas) |
Cada família nomeada precisa de @font-face { src: url("assets/fonts/<arquivo>.woff2") } no arquivo que a utiliza (HyperFrames lint). Uma fonte de marca do usuário: copie o arquivo para assets/fonts/ e declare-o da mesma forma; verifique se sua licença permite incorporação.
Combinações: Fraunces + Inter (cinematográfico) · Inter + JetBrains Mono (produto/tecnologia) · Space Grotesk + JetBrains Mono (ciência) · Anton + Space Grotesk (social/cinético) · Orbitron (apenas títulos) + Space Grotesk (todo o resto).
Regras de legibilidade para vídeo (aplicadas por hyperframes check auditorias de ofício)
- Tamanho mínimo de leitura: 2.6% do lado curto →
2.7cqmin(28px a 1080p). Corpo 2.8–3.4cqmin; títulos 6–12cqmin; palavras heroicas 15–34cqmin. - Tempo de exibição ≈ 0.3s por palavra + 0.5s; uma linha final ≥ 2s.
- ≤ 3.2 palavras na tela por segundo em uma cena; ≤ ~10 palavras por linha.
- Contraste WCAG AA (4.5:1 corpo, 3:1 grande). Sobre imagens, adicione um scrim ou sombra.
- Sem
<br>no corpo do texto; usemax-width(ex.:78cqw) e deixe quebrar automaticamente. Títulos de exibição podem quebrar deliberadamente com blocos<span>por linha. - Tracking: apertar para display grande (−0.02 a −0.05em), abrir para rótulos em caixa alta pequena (+0.2 a +0.5em). Nunca anime
letter-spacing(ele estala) — espalhe glifos comx. - Zonas seguras: vídeo vertical mantém o texto legível fora dos 12% superiores, 22% inferiores e 14% direitos.
Técnicas cinéticas
| Técnica | Como |
|---|---|
| Blur-to-sharp palavras | palavras em spans inline-block, fromTo {opacity:0,y:30,filter:blur(14px)}, escalonamento 0.12–0.16 |
| Slam | uma palavra por batida, scale 2.4 → 1 com back.out(1.6), campo de cor inverte atrás |
| Mask rise | wrapper de linha overflow:hidden, texto interno yPercent 110 → 0 |
| Center-out reveal | clipPath: inset(0 50% 0 50%) → inset(0) |
| Glyph spread | offsets x por letra em direção ao centro colapsando para 0 |
| Typewriter | clipPath inset com ease steps(n), ou conjuntos de opacidade por caractere |
| Outline echo | duplicar palavra com -webkit-text-stroke, preenchimento transparente, rastro com deslocamento |
| Type as camera | escalar/rotacionar a pilha de palavras para além do quadro na próxima cena |
| Word swap | empilhar duas palavras em uma caixa fixa; yPercent a velha sai e a nova entra |
| Highlight | span .hl inline-block escala com back.out ou uma barra marcadora scaleX 0→1 atrás dela |
| Count-up | tabular-nums + onUpdate escrevendo Math.round(v) |
Legendas (sincronizadas por palavra)
vybe audio injeta <script type="application/json" id="vybe-captions"> cues ({start, end, text, words:[{text,start,end}]}) e todo template VYBE contém um construtor de legendas que cria um elemento por cue e ilumina cada palavra no seu start transcrito. Estilo conforme a marca:
- Posicione dentro da zona segura, acima de gráficos de terço inferior, nunca cobrindo o sujeito.
- 3–6 palavras por cue, máximo 2 linhas, 3–3.4cqmin, peso 600+, scrim ou sombra.
- Destaque a palavra ativa (opacidade 0.45 → 1, ou cor de destaque via uma classe).
- Social: maiúsculas, negrito, escala pop em cada cue; cinematográfico: letra minúscula, fade sutil.
- Nunca legende com tempos estimados de palavra; temporização em nível de linha deve parecer de nível de linha.