);
}
// ── Generative fallback (shown only when no video src) ─────────────────
function useFlowField(ref, enabled) {
React.useEffect(() => {
if (!enabled) return;
const canvas = ref.current; if (!canvas) return;
const ctx = canvas.getContext('2d');
let w, h, dpr, raf, t = 0, parts = []; const COUNT = 680;
function size() {
dpr = Math.min(window.devicePixelRatio || 1, 2);
w = canvas.clientWidth; h = canvas.clientHeight;
canvas.width = w * dpr; canvas.height = h * dpr; ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
ctx.fillStyle = '#0a0a0b'; ctx.fillRect(0, 0, w, h);
const g = ctx.createRadialGradient(w * 0.5, h * 0.5, 0, w * 0.5, h * 0.5, Math.max(w, h) * 0.7);
g.addColorStop(0, 'rgba(34,40,58,0.55)'); g.addColorStop(1, 'rgba(10,10,11,0)');
ctx.fillStyle = g; ctx.fillRect(0, 0, w, h);
parts = []; for (let i = 0; i < COUNT; i++) parts.push({ x: Math.random() * w, y: Math.random() * h });
}
function noise(x, y, tt) { return Math.sin(x * 0.0042 + tt * 0.25) + Math.cos(y * 0.0051 - tt * 0.2) + Math.sin((x + y) * 0.0026 + tt * 0.15); }
function frame() {
t += 0.016; ctx.fillStyle = 'rgba(10,10,11,0.055)'; ctx.fillRect(0, 0, w, h);
for (const p of parts) {
const a = noise(p.x, p.y, t) * Math.PI; p.x += Math.cos(a) * 1.25; p.y += Math.sin(a) * 1.25;
if (p.x < 0) p.x += w; if (p.x > w) p.x -= w; if (p.y < 0) p.y += h; if (p.y > h) p.y -= h;
const hue = 208 + 28 * Math.sin(t * 0.1 + p.x * 0.001); const li = 46 + 20 * Math.sin(p.y * 0.002 + t * 0.1);
ctx.fillStyle = 'hsla(' + hue + ',38%,' + li + '%,0.12)'; ctx.fillRect(p.x, p.y, 1.5, 1.5);
}
raf = requestAnimationFrame(frame);
}
size(); raf = requestAnimationFrame(frame); window.addEventListener('resize', size);
return () => { cancelAnimationFrame(raf); window.removeEventListener('resize', size); };
}, [enabled]);
}
// ── Technical / blueprint overlay primitives ──────────────────────────
function GridField({ opacity, grid = GRID, gx: gxp = gx, crosses = GRID_CROSS }) {
return (
{/* vertical column lines */}
{Array.from({ length: grid.cols - 1 }).map((_, i) => (
))}
{/* horizontal blueprint rules — the lowest (0.80) rule is omitted so no
static rule crosses just above the bottom-center scroll cue. The row
stays in the grid's rows for block snapping / crosshair registration. */}
{grid.rows.map((r, ri) => (
r === 0.80 ? null :
))}
{/* blinking crosshairs, dead-on the grid intersections */}
{crosses.map(c => (
))}
{/* animated vertical scan + horizontal sweep, in electric blue */}
);
}
function Cross({ top, left, delay }) {
// centered on its point so it lands exactly on the grid intersection
return (
);
}
// ── Title construction frame ───────────────────────────────────────────
// Rendered as a SIBLING overlay of the title block (NOT a child — an element
// with backdrop-filter clips its descendants to its border-box, which would
// swallow these lines). It takes the block's own `inset` so it covers the
// exact same box, then draws projection lines on the four edges (run far past
// the viewport; the hero's overflow:hidden trims them) and corner crosshairs.
// Pure CSS → resolution / zoom / DPR independent; hugs the block at any size.
function TitleConstruction({ inset, projection = true }) {
const proj = 'rgba(243,243,243,0.3)'; // construction lines hugging the title block
const vline = { position: 'absolute', top: '-200vh', height: '400vh', width: 1, background: proj };
const hline = { position: 'absolute', left: '-200vw', width: '400vw', height: 1, background: proj };
const corner = { position: 'absolute', width: 16, height: 16, transform: 'translate(-50%, -50%)' };
const cVert = { position: 'absolute', left: '50%', top: 0, width: 1, height: '100%', marginLeft: -0.5, background: 'var(--tyg-fg-dim)' };
const cHorz = { position: 'absolute', top: '50%', left: 0, height: 1, width: '100%', marginTop: -0.5, background: 'var(--tyg-fg-dim)' };
const corners = [
{ left: 0, top: 0, d: '0s' },
{ left: '100%', top: 0, d: '0.3s' },
{ left: 0, top: '100%', d: '0.6s' },
{ left: '100%', top: '100%', d: '0.9s' },
];
return (
{/* projection lines on the block's edges, extended across the field
(the long gray lines). Disabled when projection === false. */}
{projection && }
{projection && }
{projection && }
{projection && }
{/* corner crosshairs */}
{corners.map((c, i) => (
))}
);
}
// ── Grid-snapped title block ───────────────────────────────────────────
// Lays the title text at its anchor, measures it (via offset metrics, so the
// first-paint intro transforms never skew the read), then grows the frosted
// backdrop + construction frame OUT to the nearest ENCLOSING grid line on all
// four sides. Result: the block always wraps the text, yet every edge lands
// exactly on a construction-grid line — at any resolution / zoom / DPR.
// Lives in the inset-22 box so its % coords share the GridField's basis.
// Re-measures on resize, font load and text reflow.
function GridSnapTitle({ f, blur, boxStyle, contentStyle, contentClass, grid = GRID, pad = 12, fixedCell, children }) {
const boxRef = React.useRef(null);
const contentRef = React.useRef(null);
const [rect, setRect] = React.useState(null);
React.useLayoutEffect(() => {
// Fixed-cell mode (mobile): the box IS a grid cell, no measuring — the
// content is centred inside it instead of the box hugging the content.
if (fixedCell) {
setRect({
left: (fixedCell.c0 / grid.cols) * 100,
top: fixedCell.y0 * 100,
width: ((fixedCell.c1 - fixedCell.c0) / grid.cols) * 100,
height: (fixedCell.y1 - fixedCell.y0) * 100,
});
return;
}
const box = boxRef.current, content = contentRef.current;
if (!box || !content) return;
const rowLines = [0, ...grid.rows, 1];
const floor = (a, v) => a.filter(x => x <= v + 0.5).reduce((p, x) => Math.max(p, x), a[0]);
const ceil = (a, v) => a.filter(x => x >= v - 0.5).reduce((p, x) => Math.min(p, x), a[a.length - 1]);
const measure = () => {
const bw = box.clientWidth, bh = box.clientHeight;
if (!bw || !bh || !content.offsetWidth) return;
const xs = []; for (let i = 0; i <= grid.cols; i++) xs.push((i / grid.cols) * bw);
const ys = rowLines.map(r => r * bh);
const L = content.offsetLeft - pad, T = content.offsetTop - pad;
const R = content.offsetLeft + content.offsetWidth + pad;
const B = content.offsetTop + content.offsetHeight + pad;
const left = floor(xs, L), right = ceil(xs, R);
const top = floor(ys, T), bottom = ceil(ys, B);
setRect({
left: (left / bw) * 100, top: (top / bh) * 100,
width: ((right - left) / bw) * 100, height: ((bottom - top) / bh) * 100,
});
};
measure();
const raf = requestAnimationFrame(measure); // settle after first layout
let ro;
if (typeof ResizeObserver !== 'undefined') { ro = new ResizeObserver(measure); ro.observe(box); ro.observe(content); }
window.addEventListener('resize', measure);
if (document.fonts && document.fonts.ready) document.fonts.ready.then(measure).catch(() => {});
return () => { cancelAnimationFrame(raf); if (ro) ro.disconnect(); window.removeEventListener('resize', measure); };
}, [pad, grid, fixedCell]);
const fill = rect && { position: 'absolute', left: rect.left + '%', top: rect.top + '%', width: rect.width + '%', height: rect.height + '%' };
// While the frost is clearing on early scroll the blur eases to 0 (still a
// valid backdrop-filter); once it hits 0 we drop to `none` so the panel can't
// vanish when the fading foreground wrapper starts isolating its descendants.
const blurPx = (blur == null ? f.titleBlur : blur);
return (
{/* Non-animated scale wrapper — lets one CSS knob (.tyg-hero-titlescale)
shrink the whole block (frost box + construction + text) as a unit.
The box is measured from the UN-scaled layout, so it keeps hugging
the text after scaling. */}
);
}
function CornerBtn({ style, children }) {
return (
{children}
);
}
function PixelArrow({ dir, className, style }) {
return (
);
}
function Anno({ children, style }) {
return {children};
}
function LandingScreen({ lang, setLang }) {
const [f, setF] = React.useState(loadFilter);
React.useEffect(() => { try { localStorage.setItem(FILTER_KEY, JSON.stringify(f)); } catch (e) {} }, [f]);
const set = (k, v) => setF(p => ({ ...p, [k]: v }));
const reset = () => setF({ ...DEFAULTS });
const grain = React.useMemo(makeGrain, []);
// ── Active construction grid — coarse 4-col on phones, dense 12-col
// otherwise. Blocks + crosshairs are driven from the same chosen grid so
// they always register against the lines that are actually drawn. ──────
const [isMobile, setIsMobile] = React.useState(
() => typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(max-width: 600px)').matches);
React.useEffect(() => {
if (!window.matchMedia) return;
const mq = window.matchMedia('(max-width: 600px)');
const on = () => setIsMobile(mq.matches);
mq.addEventListener ? mq.addEventListener('change', on) : mq.addListener(on);
return () => { mq.removeEventListener ? mq.removeEventListener('change', on) : mq.removeListener(on); };
}, []);
const GEO = isMobile
? { grid: GRID_M, blocks: GRID_BLOCKS_M, cross: GRID_CROSS_M, crossFaint: GRID_CROSS_FAINT_M }
: { grid: GRID, blocks: GRID_BLOCKS, cross: GRID_CROSS, crossFaint: GRID_CROSS_FAINT };
const gX = i => (i / GEO.grid.cols) * 100; // active column index → % x
// ── Hero layout — locked to variant 03 (giant) ──────────────────────
const layout = 3;
const canvasRef = React.useRef(null);
const videoRef = React.useRef(null);
const hasVideo = !!HERO_VIDEO_SRC;
useFlowField(canvasRef, !hasVideo);
// Pick a fresh random entry point for this page load and seek there once the
// clip's metadata (duration) is known. Guards against start times that fall
// past a shorter-than-expected clip.
const heroStart = React.useRef(HERO_START_TIMES[Math.floor(Math.random() * HERO_START_TIMES.length)]);
const seekToRandomStart = React.useCallback(() => {
const v = videoRef.current;
if (!v) return;
let t = heroStart.current;
if (Number.isFinite(v.duration) && v.duration > 0) t = Math.min(t, Math.max(0, v.duration - 0.1));
try { v.currentTime = t; } catch (e) {}
}, []);
const cssFilter = `brightness(${f.brightness}) contrast(${f.contrast}) saturate(${f.saturate}) grayscale(${f.grayscale}) hue-rotate(${f.hue}deg) blur(${f.blur}px)`;
// ── Scroll-coupled exit ────────────────────────────────────────────
// The hero is pinned (position:fixed) while the sections below rise up
// and cover it. As they rise, the hero's foreground — title, role line,
// index, lines, frosted blocks, crosshairs — eases out with the scroll.
const REDUCED = typeof window !== 'undefined' && window.matchMedia &&
window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const [scrollP, setScrollP] = React.useState(0);
React.useEffect(() => {
let raf = 0;
const onScroll = () => {
if (raf) return;
raf = requestAnimationFrame(() => {
raf = 0;
const h = window.innerHeight || 1;
setScrollP(Math.min(Math.max(window.scrollY / h, 0), 1));
});
};
window.addEventListener('scroll', onScroll, { passive: true });
onScroll();
return () => { window.removeEventListener('scroll', onScroll); if (raf) cancelAnimationFrame(raf); };
}, []);
// ── First-paint intro gate — keep the foreground hidden until the boot
// loader has begun dismissing, then release the staggered cascade. ──
const [started, setStarted] = React.useState(false);
React.useEffect(() => {
if (REDUCED) { setStarted(true); return; }
let t;
const tick = () => {
const l = document.getElementById('tyg-loader');
if (!l || l.classList.contains('tyg-loaded')) { setStarted(true); return; }
t = setTimeout(tick, 60);
};
tick();
const safety = setTimeout(() => setStarted(true), 3000);
return () => { clearTimeout(t); clearTimeout(safety); };
}, []);
// Kick the gated intro animations — some engines won't assign a start
// time to a CSS animation that only matches once an ancestor class is
// toggled, leaving them frozen on frame 0. Nudge any null-startTime ones.
React.useEffect(() => {
if (!started) return;
const kick = () => {
document.querySelectorAll('.tyg-go .tyg-intro, .tyg-go .tyg-intro-cx, .tyg-go .tyg-grow-v, .tyg-go .tyg-grow-h, .tyg-go .tyg-grow-box')
.forEach(el => el.getAnimations().forEach(a => {
if (a.startTime === null) { try { a.startTime = document.timeline.currentTime; } catch (e) {} }
}));
};
const r = requestAnimationFrame(() => requestAnimationFrame(kick));
return () => cancelAnimationFrame(r);
}, [started, layout]);
// ── Reverse-grow on scroll ──────────────────────────────────────────
// As the wheel scrolls down, scrub the first-paint growth animations
// backward: the blueprint lines retract toward their origin and each
// frosted block shrinks back to nothing — the init "growth" played in
// reverse, so the construction un-builds as the hero scrolls away.
// Untouched until the first scroll, so the forward intro plays in full.
const growAnimsRef = React.useRef(null);
const grewBackRef = React.useRef(false);
React.useEffect(() => {
if (REDUCED || !started) return;
const RETRACT_RANGE = 0.55; // fully reversed by ~55% of vh
const t = Math.min(scrollP / RETRACT_RANGE, 1);
const rev = t * t * (3 - 2 * t); // smoothstep 0 → 1
if (rev <= 0 && !grewBackRef.current) return; // pre-scroll: leave the intro alone
if (!growAnimsRef.current) {
const list = [];
document.querySelectorAll('.tyg-grow-v, .tyg-grow-h, .tyg-grow-box').forEach(el =>
el.getAnimations().forEach(a => {
const end = a.effect && a.effect.getComputedTiming().endTime;
if (end) { try { a.pause(); } catch (e) {} list.push({ a, end }); }
}));
growAnimsRef.current = list;
}
const list = growAnimsRef.current;
if (!list.length) return;
grewBackRef.current = true;
// currentTime = endTime → fully grown; → 0 → fully retracted.
list.forEach(({ a, end }) => { try { a.currentTime = Math.max(0, end * (1 - rev)); } catch (e) {} });
}, [scrollP, started]);
// ── Scroll exit, sequenced so the frosted panels never pop ──────────────
// 1) First the "frost clears": the title + block backdrop-blur eases to 0
// while the foreground is still un-isolated (opacity 1, no transform /
// will-change), so backdrop-filter stays valid and the blur visibly melts
// away instead of snapping off.
// 2) Only AFTER the frost is gone does the foreground lift + fade. By then the
// blurred panels have dropped to `backdrop-filter: none`, so the wrapper can
// safely become a "backdrop root" (transform/opacity/will-change) without
// its descendants vanishing — the bug that made the title block disappear.
const FROST_RAMP = 0.06; // clear frost over first 6% of vh
const frost = Math.min(scrollP / FROST_RAMP, 1); // 0 → 1
const titleBlurNow = f.titleBlur * (1 - frost);
const blockBlurNow = 8 * (1 - frost); // GRID_BLOCKS rest at blur(8px)
const fgAtRest = scrollP <= FROST_RAMP; // hold transforms off until frost cleared
const op_t = Math.min(Math.max((scrollP - FROST_RAMP) / (0.74 - FROST_RAMP), 0), 1);
const fgOpacity = 1 - op_t * op_t * (3 - 2 * op_t); // smoothstep, starts after the frost clears
const fgShift = REDUCED ? 0 : -scrollP * 64;
// shared lift applied to BOTH the foreground (grid, title, crosshairs) and the
// frosted-block layer, so the blocks track the grid lines as it rises.
const layerTransform = fgAtRest ? 'none' : `translateY(${fgShift}px)`;
// whole-hero veil — as the page scrolls toward the sections, the entire
// first screen (video + foreground) eases to the background colour and
// is gone before the rising panel finishes covering it.
const veil = REDUCED ? 0 : (() => { const t = Math.min(scrollP / 0.82, 1); return t * t * (3 - 2 * t); })();
const fgStyle = {
position: 'absolute', inset: 0, zIndex: 6,
opacity: fgOpacity,
transform: layerTransform,
pointerEvents: fgOpacity < 0.04 ? 'none' : 'auto',
willChange: fgAtRest ? 'auto' : 'opacity, transform',
};
// ── Shared content fragments ──────────────────────────────────────────
const FIELDS = ['Media Art', '3DCG', 'Audio-Visual', 'Interaction Design', 'AI'];
const fieldRow = (extra) => (
{FIELDS.map((d, i) => (
{i > 0 && ·}
{d}
))}
);
// ── Three hero title compositions ─────────────────────────────────────
function renderIdentity() {
// 02 — centered monumental (block snaps symmetrically around the grid centre)
if (layout === 2) {
return (
);
}
// 03 — two-line giant; the title block snaps to a grid cell, the meta
// strip rides the row line beneath it (kept out of the block on purpose).
if (layout === 3) {
const edge = 'clamp(14px, 6vw, 62px)';
return (
TanYanggu
{/* RustyHead — subtitle, directly beneath the title. On phones the
title box is a fixed (narrow) grid cell, so the two flanking
rules FLEX to fill whatever space is left beside the text rather
than staying a fixed 44px each — otherwise the trailing rule
spills past the frosted box's right edge. Desktop keeps the
fixed-width rules (auto-width row, plenty of room). */}
RustyHead
{/* Meta strip — role headline, then fields (left) and location (right)
along the lower row line, with RustyHead now lifted into the title. */}
Visual Artist / Interactive Engineer
{fieldRow({})}
Based in Tokyo, JP
);
}
// 01 — editorial, lower-left (default). Bottom anchored to the 0.80 row
// line so the block snaps cleanly into the lower-left grid cells.
return (
TAN YANGGU
RustyHead
Visual Artist / Interactive Engineer
{fieldRow({ marginTop: 18 })}
Based in Tokyo, JP
);
}
return (
{/* Layer 0 — generative fallback */}
{!hasVideo && }
{/* Layer 1 — the video well + graded CSS filter */}
{hasVideo && (
)}
{/* Layer 2 — color tint */}
{f.tintStrength > 0 && (
)}
{/* Layer 3 — grain */}
{f.grain > 0 && (
)}
{/* Layer 4 — scanlines */}
{f.scanlines > 0 && (
)}
{/* Layer 5 — vignette + wash for legibility */}
{/* Frosted blocks — snapped to the construction grid (inset 22), so
every block's four edges land exactly on grid lines and each one
reads as an enclosed cell. They live in their OWN layer OUTSIDE the
foreground .tyg-go wrapper so that AT REST no transformed / will-change
ancestor turns this into a "backdrop root" and nulls the blur — the
backdrop-filter needs the graded video in its backdrop. On scroll the
layer takes the SAME lift as the foreground (so the blocks track the
grid lines), but only AFTER their blur has eased to 0, so the lift's
transform never nulls a live backdrop-filter. */}
{GEO.blocks.map((b, i) => {
// Per-block frost: blurred unless the block sets `blur: false`
// (then it's just a thin outline). Title box blur is separate.
const blurThis = b.blur !== false && blockBlurNow > 0.5;
return (
);
})}
{/* ── Foreground — fades + drifts up with the scroll as the
sections below rise to cover the pinned hero ─────────────── */}
{/* /Foreground wrapper */}
{/* Fade-to-background veil — turns the whole first screen into the bg
colour as it scrolls away into the sections below */}
})