// ui.jsx — primitivos visuais compartilhados
const { useState, useEffect, useRef } = React;
// Símbolo da marca
function Mark({ size = 32, color = "var(--accent)" }) {
const h = size, w = size * 2;
return (
);
}
// Lockup vinny / tecnologia
function Logo({ markSize = 26, showWordmark = true, sub = true }) {
return (
{showWordmark && (
vinny
{sub && tecnologia}
)}
);
}
// Texto com *destaque* →
function RT({ children }) {
if (typeof children !== "string") return children;
const parts = children.split(/(\*[^*]+\*)/g).filter(Boolean);
return parts.map((p, i) =>
p.startsWith("*") && p.endsWith("*")
? {p.slice(1, -1)}
: {p}
);
}
// Eyebrow monospace "// label"
function Eyebrow({ children }) {
return // {children}
;
}
// Detecta UMA vez se o relógio de animação está rodando (em alguns
// previews ele congela em currentTime=0, o que travaria qualquer
// transição/animação e deixaria o conteúdo invisível para sempre).
let _clockRuns = null;
const _clockWaiters = [];
(function detectClock() {
const a = (document.timeline && document.timeline.currentTime) || 0;
setTimeout(() => {
const b = (document.timeline && document.timeline.currentTime) || 0;
_clockRuns = b > a;
_clockWaiters.splice(0).forEach((f) => f(_clockRuns));
}, 90);
})();
function onClock(cb) { if (_clockRuns !== null) cb(_clockRuns); else _clockWaiters.push(cb); }
// Revela ao entrar na viewport. Começa VISÍVEL; só esconde+anima se o
// relógio de animação estiver de fato rodando (caso contrário, conteúdo
// estático garantido).
function Reveal({ children, delay = 0, as = "div", className = "", ...rest }) {
const ref = useRef(null);
const [hidden, setHidden] = useState(false);
useEffect(() => {
const node = ref.current;
if (!node) return;
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
let cleanup = null;
onClock((runs) => {
if (!runs || !ref.current) return; // congelado → fica visível
const node = ref.current;
let done = false;
const reveal = () => {
if (done || !ref.current) return;
done = true;
setHidden(false);
ref.current.animate(
[{ opacity: 0, transform: "translateY(18px)" }, { opacity: 1, transform: "none" }],
{ duration: 600, delay, easing: "cubic-bezier(.2,.7,.2,1)", fill: "backwards" }
);
window.removeEventListener("scroll", check);
window.removeEventListener("resize", check);
};
const check = () => {
if (done || !ref.current) return;
const r = ref.current.getBoundingClientRect();
if (r.top < window.innerHeight * 0.94 && r.bottom > -60) reveal();
};
const r0 = node.getBoundingClientRect();
if (r0.top < window.innerHeight * 0.94 && r0.bottom > -60) { reveal(); return; }
setHidden(true); // fora da viewport → esconde até rolar
window.addEventListener("scroll", check, { passive: true });
window.addEventListener("resize", check);
cleanup = () => {
window.removeEventListener("scroll", check);
window.removeEventListener("resize", check);
};
});
return () => { if (cleanup) cleanup(); };
}, []);
const Tag = as;
return (
{children}
);
}
// Botão
function Btn({ children, variant = "primary", href, onClick, icon, ...rest }) {
const cls = `btn btn-${variant}`;
const inner = <>{children}{icon && {icon}};
if (href) return {inner};
return ;
}
// Cabeçalho de seção
function SectionHead({ eyebrow, title, sub, center }) {
return (
{eyebrow}
{sub && {sub}}
);
}
// Hook: efeito de digitação ciclando entre frases
function useTyped(words, { type = 70, del = 38, hold = 1400 } = {}) {
const [txt, setTxt] = useState("");
const [i, setI] = useState(0);
const [del_, setDel] = useState(false);
useEffect(() => {
const cur = words[i % words.length];
let to;
if (!del_ && txt === cur) { to = setTimeout(() => setDel(true), hold); }
else if (del_ && txt === "") { setDel(false); setI((v) => v + 1); }
else {
to = setTimeout(() => {
setTxt(del_ ? cur.slice(0, txt.length - 1) : cur.slice(0, txt.length + 1));
}, del_ ? del : type);
}
return () => clearTimeout(to);
}, [txt, del_, i, words]);
return txt;
}
// Componente isolado de digitação — re-renderiza só ele mesmo, sem
// disparar re-render dos irmãos (que travaria as transições de Reveal).
function Typed({ words, className }) {
const txt = useTyped(words);
return {txt}▍;
}
// Ícones (stroke currentColor)
const Icon = {
arrow: (p) => ,
whatsapp: (p) => ,
mail: (p) => ,
insta: (p) => ,
github: (p) => ,
check: (p) => ,
plus: (p) => ,
chart: (p) => ,
};
Object.assign(window, { Mark, Logo, RT, Eyebrow, Reveal, Btn, SectionHead, useTyped, Typed, Icon });