// Marcos Fellipe Watanabe — Personal Site
// React app with bilingual content, scroll reveals, hero variants
const { useState, useEffect, useRef, useMemo } = React;
const HERO_VARIANT = "centered";
const ACCENT_COLOR = "#ff5c3a";
const SHOW_3D = true;
const SHOW_TYPEWRITER = true;
// ============================================
// Reveal hook
// ============================================
function useReveal() {
const ref = useRef(null);
useEffect(() => {
const el = ref.current;
if (!el) return;
const io = new IntersectionObserver(
(entries) => {
for (const e of entries) {
if (e.isIntersecting) {
e.target.classList.add("in");
io.unobserve(e.target);
}
}
},
{ threshold: 0.15, rootMargin: "0px 0px -10% 0px" }
);
io.observe(el);
return () => io.disconnect();
}, []);
return ref;
}
function Reveal({ children, stagger = false, as = "div", className = "", ...rest }) {
const ref = useReveal();
const Tag = as;
return (
{children}
);
}
// ============================================
// Typewriter
// ============================================
function Typewriter({ words }) {
const [text, setText] = useState("");
const [i, setI] = useState(0);
const [del, setDel] = useState(false);
useEffect(() => {
const w = words[i % words.length];
const speed = del ? 35 : 70;
const t = setTimeout(() => {
if (!del) {
if (text.length < w.length) setText(w.slice(0, text.length + 1));
else setTimeout(() => setDel(true), 1400);
} else {
if (text.length > 0) setText(w.slice(0, text.length - 1));
else { setDel(false); setI(i + 1); }
}
}, speed);
return () => clearTimeout(t);
}, [text, del, i, words]);
return
{text}▍
;
}
// ============================================
// Scramble name — hover swaps to nickname with letter scramble
// ============================================
function ScrambleName({ primary, alt }) {
const [text, setText] = useState(primary);
const targetRef = useRef(primary);
const rafRef = useRef(null);
function scrambleTo(target) {
if (target === targetRef.current) return;
targetRef.current = target;
// Swap the 3D background to gaming mode when revealing the alt name
if (window.__scene3d && window.__scene3d.setMode) {
window.__scene3d.setMode(target === alt ? "games" : "tech");
}
if (rafRef.current) clearInterval(rafRef.current);
const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz!@#$%&*<>/?";
const from = text;
const to = target;
const len = Math.max(from.length, to.length);
const queue = [];
for (let i = 0; i < len; i++) {
const f = from[i] || "";
const tCh = to[i] || "";
const start = Math.floor(Math.random() * 10);
const end = start + 8 + Math.floor(Math.random() * 12);
queue.push({ f, tCh, start, end });
}
let frame = 0;
rafRef.current = setInterval(() => {
let out = "";
let complete = 0;
for (let i = 0; i < queue.length; i++) {
const { f, tCh, start, end } = queue[i];
if (frame >= end) { out += tCh; complete++; }
else if (frame >= start) {
if (tCh === " " || tCh === "\n") { out += tCh; }
else if (tCh === ".") { out += Math.random() < 0.5 ? tCh : chars[Math.floor(Math.random() * chars.length)]; }
else { out += chars[Math.floor(Math.random() * chars.length)]; }
}
else out += f;
}
setText(out);
frame++;
if (complete === queue.length) {
clearInterval(rafRef.current);
rafRef.current = null;
setText(target);
}
}, 38);
}
useEffect(() => () => { if (rafRef.current) clearInterval(rafRef.current); }, []);
useEffect(() => { if (text === targetRef.current && targetRef.current !== primary) { /* keep */ } else if (targetRef.current === primary) setText(primary); }, [primary]);
return (
scrambleTo(alt)}
onMouseLeave={() => scrambleTo(primary)}
onTouchStart={() => scrambleTo(targetRef.current === primary ? alt : primary)}
title="hover"
>
{/* Invisible sizers lock the container to the larger of the two states
so the visible h1 doesn't wobble during scramble */}
{primary}{alt}