/* kit/vox.jsx — os oito dispositivos tipográficos do estilo VOX.
*
* "A tipografia da VOX não é legenda: é cenografia." Cada peça é um
* dispositivo, e cada um tem um comportamento próprio que significa algo:
*
* palavra palavra ancorada: carimba no beat, a tese ganha o acento e o sublinhado
* lista termo — definição; o item novo entra e o anterior apaga para cinza
* letra highlight na letra: dentro da manchete, uma palavra muda de cor
* especime o termo em tracking largo, à máquina, com o sub-rótulo etimológico
* pilula nome e subtítulo pousando na arte, ligados por uma linha que se desenha
* fonte a fonte do documento em mono, com a barra de acento
* marcatexto o documento lido em cascata; o marca-texto varre, a caneta circula
* textura a mesma linha repetida até o documento virar fundo
* barras o gráfico em tinta: barras que pousam, a maior circulada
*
* As coordenadas (x, y, largura) são da cena, em px. O tempo (t, de cada
* item) é o do elemento, em segundos — o instante em que a palavra é DITA. */
import React from 'react';
import {
carimbo, mola, entre, lerp, acaso, Traco, elipseMao, sublinhadoMao, familia, MONO,
CURVAS_KIT, mistura, alfa, SOMBRA_CONTATO,
} from './base';
const TINTA = (el) => (el.tinta === false ? undefined : 'url(#pc-tinta)');
/* O traço de caneta que cabe em qualquer caixa: SVG esticado (preserveAspectRatio
none) com traço que não estica (non-scaling-stroke). É assim que o
sublinhado e o círculo abraçam uma palavra cuja largura só o navegador sabe. */
function Caneta({ d, p, cor, espessura = 5, inset = '0', opacidade = 1 }) {
if (p <= 0) return null;
// O SVG é elemento substituído: "inset" sozinho não o estica. Quem estica é a caixa em volta.
return (
);
}
const SUBLINHA = sublinhadoMao(0, 50, 100, 2);
const CIRCULO = elipseMao(50, 50, 50, 50, 4);
// O traço da mão: 10 a 16 quadros, rápido no começo e arrastando no fim.
const traco = (t, de, fps, quadros = 13) => CURVAS_KIT.arrasto(entre(t, de, de + quadros / fps));
// ── palavra ancorada ─────────────────────────────────────────────────────
export function Palavra({ el, t, fps }) {
const ws = el.palavras || [];
const tam = el.tamanho || 120;
const centro = el.alinhamento === 'center';
return (
);
}
// ── lista com travessão ──────────────────────────────────────────────────
export function Lista({ el, t, fps }) {
const itens = el.itens || [];
const tam = el.tamanho || 72;
const velha = el.corVelha || '#b9b4aa';
// O "agora" é o último item que já entrou: a hierarquia é do agora, não do primeiro.
let agora = -1;
itens.forEach((it, i) => { if (t >= it.t) agora = i; });
return (
{itens.map((it, i) => {
// O anterior perde cor em poucos quadros: não sai de cena, é rebaixado.
const idade = i < agora ? entre(t, itens[i + 1].t, itens[i + 1].t + 6 / fps) : 0;
const cor = mistura(el.cor || '#141414', velha, idade);
const corTermo = i === agora && !it.riscar ? (el.corAcento || '#d8342b') : cor;
const pRisco = it.riscar ? traco(t, it.t + 0.35, fps, 12) : 0;
return (
) : null}
{linhas.map((ln, i) => {
const tL = t0 + i * passo;
// A linha é impressa da esquerda para a direita, em 5 quadros: o documento é LIDO.
const pL = CURVAS_KIT.editorial(entre(t, tL, tL + 5 / fps));
const ehAlvo = i === alvo;
return (
{ehAlvo ? : null}
{/* O recorte que imprime a linha fica no TEXTO: no bloco, cortaria o círculo da caneta. */}
{ln}
{ehAlvo ? : null}