// gm-info.jsx — Logo animado (intro/outro) + Infográficos hand-drawn (claro/escuro).
// Reaproveita Player/AnimCard/interp/spring01 do gm-anim e tokens do bm-core.
// Exports: GMLogoAnim, GMInfographics.
const { Player, AnimCard, interp, spring01, easeOut, easeInOut } = window;
const HAND = "'Caveat', 'Bricolage Grotesque', cursive";
/* ════════ LOGO ANIMADO ════════ */
// nⁱ OFICIAL (STIX itálico) revelado por uma máscara que "escreve" o traço — com caneta na ponta.
function WriteLogo({ f, fps }) {
const skelN = React.useRef(null), skelI = React.useRef(null);
const [len, setLen] = React.useState({ n: 0, i: 0 });
const uid = React.useMemo(() => "wm" + Math.random().toString(36).slice(2, 8), []);
React.useEffect(() => {
if (skelN.current && skelI.current) setLen({ n: skelN.current.getTotalLength(), i: skelI.current.getTotalLength() });
}, []);
const p = easeInOut(interp(f, [4, 4 + 2.0 * fps], [0, 1]));
const nP = Math.min(1, p / 0.58);
const iP = Math.max(0, Math.min(1, (p - 0.58) / 0.30));
const dotP = Math.max(0, Math.min(1, (p - 0.86) / 0.10));
const safe = Math.max(0, Math.min(1, (p - 0.95) / 0.05));
let pen = null;
if (len.n) {
if (nP > 0 && nP < 1) pen = skelN.current.getPointAtLength(nP * len.n);
else if (iP > 0 && iP < 1) pen = skelI.current.getPointAtLength(iP * len.i);
}
const glyph = (o) => (
ni
);
return (
);
}
const ANIM = {
write: (f, fps) => ,
assemble: (f, fps) => {
const eo = (a, b) => easeOut(interp(f, [a, b], [0, 1])); // ease-out: entra e TRAVA rígido
const L = eo(0, 18), D = eo(8, 28), R = eo(16, 38);
let ty = -120, op = 0, sx = 1, sy = 1;
const t = f - 40; // bolinha salta DEPOIS de montar
if (t >= 0) {
op = 1;
const decay = Math.exp(-t * 0.055);
ty = -Math.abs(Math.sin(t * 0.2)) * 78 * decay;
const contact = Math.pow(Math.max(0, Math.cos(t * 0.2)), 2) * decay;
sy = 1 - 0.28 * contact; sx = 1 + 0.28 * contact;
}
return (
);
},
};
const CODE_WRITE = `
`;
const CODE_GRAVITY = `import {useCurrentFrame, useVideoConfig, spring, interpolate} from 'remotion';
// Cada peça do NL entra de um jeito (mais orgânico, com profundidade).
export const LogoGravity: React.FC = () => {
const frame = useCurrentFrame();
const {fps} = useVideoConfig();
const sp = (delay, damping = 13) => spring({frame: frame - delay, fps, config: {damping}});
const L = sp(0), D = sp(8), R = sp(16), N = sp(26, 10);
const lx = (1 - L) * -95; // haste esquerda: vem da esquerda
const dy = (1 - D) * -118, dr = (1 - D) * -16; // diagonal: cai de cima, tombando
const rx = (1 - R) * 118, rr = (1 - R) * 46; // haste direita + L: rola da direita
const nsc = 1 + (1 - N) * 2.8; // dot azul: vem do primeiro plano (escala) e quica
return (
);
};`;
const CODE_NI_R = `import {useCurrentFrame, useVideoConfig, interpolate, Easing} from 'remotion';
import {useRef, useEffect, useState} from 'react';
// nⁱ OFICIAL (STIX itálico) revelado por uma máscara que "escreve" o traço.
export const NiWrite: React.FC = () => {
const frame = useCurrentFrame();
const {fps} = useVideoConfig();
const sn = useRef(null), si = useRef(null);
const [len, setLen] = useState({n: 1, i: 1});
useEffect(() => { setLen({n: sn.current!.getTotalLength(), i: si.current!.getTotalLength()}); }, []);
const p = interpolate(frame, [4, 4 + 2 * fps], [0, 1],
{extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.inOut(Easing.ease)});
const nP = Math.min(1, p / 0.58);
const iP = Math.max(0, Math.min(1, (p - 0.58) / 0.30));
const dot = interpolate(p, [0.86, 0.96], [0, 1], {extrapolateLeft: 'clamp', extrapolateRight: 'clamp'});
return (
);
};`;
const CODE_NI_H = `
`;
const CODE_NL_R = `import {useCurrentFrame, useVideoConfig, interpolate, Easing} from 'remotion';
export const NlAssemble: React.FC = () => {
const frame = useCurrentFrame();
const {fps} = useVideoConfig();
// entram e TRAVAM rígidas (ease-out, sem overshoot)
const eo = (a, b) => interpolate(frame, [a, b], [0, 1],
{extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.out(Easing.cubic)});
const L = eo(0, 18), D = eo(8, 28), R = eo(16, 38);
// só a bolinha azul salta (estilo abajur da Pixar), depois que montou
const t = frame - 40; let ty = -120, op = 0, sx = 1, sy = 1;
if (t >= 0) {
op = 1;
const decay = Math.exp(-t * 0.055);
ty = -Math.abs(Math.sin(t * 0.2)) * 78 * decay;
const contact = Math.pow(Math.max(0, Math.cos(t * 0.2)), 2) * decay;
sy = 1 - 0.28 * contact; sx = 1 + 0.28 * contact;
}
return (
);
};`;
const CODE_NL_H = `
`;
function GMLogoAnim() {
return (
Abra com o nⁱ sendo escrito (constrói expectativa) e feche com o NL se montando (energia) — ou inverta por vídeo. As peças travam rígidas; só a bolinha azul tem vida própria (estilo abajur da Pixar). Segure 1–2s no logo estático antes de cortar e respeite prefers-reduced-motion.
);
}
/* ════════ INFOGRÁFICOS (hand-drawn) ════════ */
function HDArrow({ color = "#211913", w = 116 }) {
return (
);
}
function HDCircle({ color = "#E8553A", children }) {
return (
{children}
);
}
function HDUnderline({ color = "#E8A33D", w = 130 }) {
return ;
}
function Placeholder({ label, dark, h = 96 }) {
const stripe = dark ? "rgba(242,216,167,0.09)" : "rgba(33,25,19,0.06)";
return (
{label}
);
}
function InfoExample({ dark }) {
const ink = dark ? T.dsand : T.ink, sub = dark ? T.dim : T.sub, bg = dark ? T.dbg : T.card, line = dark ? T.dline : T.line;
const handC = dark ? T.dsand : T.ink;
const steps = [["Coletar", "logs · API"], ["Modelar", "embeddings"], ["Servir", "resposta"]];
return (
Como o RAG funciona
na real!
{steps.map((s, i) => (
{s[0]}
{s[1]}
{i < 2 && }
))}
40%menos latência depois do passo 2 ↑
);
}
function GMInfographics() {
const Tool = ({ label, dark, children }) => (
{children}
{label}
);
return (
{/* kit hand-drawn */}
Kit hand-drawn
!importante!
!importante!
O sotaque desenhado é camada de cima, não a base: estrutura, imagens e dados continuam limpos e geométricos; setas, círculos e anotações em Caveat entram só pra guiar o olho e dar calor humano. Use com parcimônia — 2 a 3 marcações por peça.
{/* exemplo claro/escuro */}
