// HomeSections — everything below the cinematic hero on the Home route: // 1) Selected Works (4 cards, scroll-revealed) 2) condensed About // 3) social footer (Instagram / X / Xiaohongshu — links are placeholders). (function () { const { ProjectCard, Eyebrow, DateCode, Divider, Button } = window.TanYangguDesignSystem_bf6778; const BASE = window.TYG_BASE || ''; const REDUCED = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; // ── Reveal — rise + un-blur as the element scrolls into view. Pure CSS // (scroll-driven `animation-timeline: view()` on a stable className) so a // re-render of the host can't reset it. `index` offsets the entry range // slightly for a staggered cascade; falls back to visible where the CSS // feature or reduced-motion applies. ────────────────────────────────── function Reveal({ index = 0, children, style }) { const off = Math.min(index, 4) * 5; // % stagger by position in a group return (
{children}
); } // ── Section header — eyebrow + index + big light title ───────────────── function SectionHead({ index, eyebrow, children }) { return (
{index} {eyebrow}

{children}

); } // ── Social icons ─────────────────────────────────────────────────────── function IgIcon() { return ( ); } function XIcon() { return ( ); } function XhsIcon() { return ( RED ); } function Social({ label, href, children }) { const [hover, setHover] = React.useState(false); const isMail = /^mailto:/.test(href); return ( setHover(true)} onMouseLeave={() => setHover(false)} style={{ width: 46, height: 46, borderRadius: 13, display: 'flex', alignItems: 'center', justifyContent: 'center', boxSizing: 'border-box', border: '1px solid ' + (hover ? 'var(--tyg-accent)' : 'var(--tyg-line-soft)'), color: hover ? 'var(--tyg-accent)' : 'var(--tyg-fg-dim)', background: hover ? 'rgba(0,127,255,0.06)' : 'transparent', transform: hover ? 'translateY(-2px)' : 'none', transition: 'color var(--tyg-dur-fast) var(--tyg-ease), border-color var(--tyg-dur-fast) var(--tyg-ease), background var(--tyg-dur-fast) var(--tyg-ease), transform var(--tyg-dur) var(--tyg-ease)' }}> {children} ); } // ── GSAP infinite-loop engine (Osmo) ─────────────────────────────────── const gsap = window.gsap, Draggable = window.Draggable, InertiaPlugin = window.InertiaPlugin; function horizontalLoop(items, config) { let timeline; items = gsap.utils.toArray(items); config = config || {}; gsap.context(() => { let onChange = config.onChange, lastIndex = 0, tl = gsap.timeline({ repeat: config.repeat, onUpdate: onChange && function () { let i = tl.closestIndex(); if (lastIndex !== i) { lastIndex = i; onChange(items[i], i); } }, paused: config.paused, defaults: { ease: 'none' }, onReverseComplete: () => tl.totalTime(tl.rawTime() + tl.duration() * 100) }), length = items.length, startX = items[0].offsetLeft, times = [], widths = [], spaceBefore = [], xPercents = [], curIndex = 0, indexIsDirty = false, center = config.center, pixelsPerSecond = (config.speed || 1) * 100, snap = config.snap === false ? v => v : gsap.utils.snap(config.snap || 1), timeOffset = 0, container = center === true ? items[0].parentNode : gsap.utils.toArray(center)[0] || items[0].parentNode, totalWidth, getTotalWidth = () => items[length - 1].offsetLeft + xPercents[length - 1] / 100 * widths[length - 1] - startX + spaceBefore[0] + items[length - 1].offsetWidth * gsap.getProperty(items[length - 1], 'scaleX') + (parseFloat(config.paddingRight) || 0), populateWidths = () => { let b1 = container.getBoundingClientRect(), b2; items.forEach((el, i) => { widths[i] = parseFloat(gsap.getProperty(el, 'width', 'px')); xPercents[i] = snap(parseFloat(gsap.getProperty(el, 'x', 'px')) / widths[i] * 100 + gsap.getProperty(el, 'xPercent')); b2 = el.getBoundingClientRect(); spaceBefore[i] = b2.left - (i ? b1.right : b1.left); b1 = b2; }); gsap.set(items, { xPercent: i => xPercents[i] }); totalWidth = getTotalWidth(); }, timeWrap, populateOffsets = () => { timeOffset = center ? tl.duration() * (container.offsetWidth / 2) / totalWidth : 0; center && times.forEach((t, i) => { times[i] = timeWrap(tl.labels['label' + i] + tl.duration() * widths[i] / 2 / totalWidth - timeOffset); }); }, getClosest = (values, value, wrap) => { let i = values.length, closest = 1e10, index = 0, d; while (i--) { d = Math.abs(values[i] - value); if (d > wrap / 2) d = wrap - d; if (d < closest) { closest = d; index = i; } } return index; }, populateTimeline = () => { let i, item, curX, distanceToStart, distanceToLoop; tl.clear(); for (i = 0; i < length; i++) { item = items[i]; curX = xPercents[i] / 100 * widths[i]; distanceToStart = item.offsetLeft + curX - startX + spaceBefore[0]; distanceToLoop = distanceToStart + widths[i] * gsap.getProperty(item, 'scaleX'); tl.to(item, { xPercent: snap((curX - distanceToLoop) / widths[i] * 100), duration: distanceToLoop / pixelsPerSecond }, 0) .fromTo(item, { xPercent: snap((curX - distanceToLoop + totalWidth) / widths[i] * 100) }, { xPercent: xPercents[i], duration: (curX - distanceToLoop + totalWidth - curX) / pixelsPerSecond, immediateRender: false }, distanceToLoop / pixelsPerSecond) .add('label' + i, distanceToStart / pixelsPerSecond); times[i] = distanceToStart / pixelsPerSecond; } timeWrap = gsap.utils.wrap(0, tl.duration()); }, refresh = (deep) => { let progress = tl.progress(); tl.progress(0, true); populateWidths(); deep && populateTimeline(); populateOffsets(); deep && tl.draggable ? tl.time(times[curIndex], true) : tl.progress(progress, true); }, onResize = () => refresh(true), proxy; gsap.set(items, { x: 0 }); populateWidths(); populateTimeline(); populateOffsets(); window.addEventListener('resize', onResize); function toIndex(index, vars) { vars = vars || {}; (Math.abs(index - curIndex) > length / 2) && (index += index > curIndex ? -length : length); let newIndex = gsap.utils.wrap(0, length, index), time = times[newIndex]; if (time > tl.time() !== index > curIndex && index !== curIndex) { time += tl.duration() * (index > curIndex ? 1 : -1); } if (time < 0 || time > tl.duration()) { vars.modifiers = { time: timeWrap }; } curIndex = newIndex; vars.overwrite = true; gsap.killTweensOf(proxy); return vars.duration === 0 ? tl.time(timeWrap(time)) : tl.tweenTo(time, vars); } tl.toIndex = (index, vars) => toIndex(index, vars); tl.closestIndex = setCurrent => { let index = getClosest(times, tl.time(), tl.duration()); if (setCurrent) { curIndex = index; indexIsDirty = false; } return index; }; tl.current = () => indexIsDirty ? tl.closestIndex(true) : curIndex; tl.next = vars => toIndex(tl.current() + 1, vars); tl.previous = vars => toIndex(tl.current() - 1, vars); tl.times = times; tl.progress(1, true).progress(0, true); if (config.reversed) { tl.vars.onReverseComplete(); tl.reverse(); } if (config.draggable && typeof (Draggable) === 'function') { proxy = document.createElement('div'); let wrap = gsap.utils.wrap(0, 1), ratio, startProgress, draggable, lastSnap, initChangeX, wasPlaying, align = () => tl.progress(wrap(startProgress + (draggable.startX - draggable.x) * ratio)), syncIndex = () => tl.closestIndex(true); draggable = Draggable.create(proxy, { trigger: items[0].parentNode, type: 'x', onPressInit() { let x = this.x; gsap.killTweensOf(tl); wasPlaying = !tl.paused(); tl.pause(); startProgress = tl.progress(); refresh(); ratio = 1 / totalWidth; initChangeX = (startProgress / -ratio) - x; gsap.set(proxy, { x: startProgress / -ratio }); }, onDrag: align, onThrowUpdate: align, overshootTolerance: 0, inertia: true, snap(value) { if (Math.abs(startProgress / -ratio - this.x) < 10) return lastSnap + initChangeX; let time = -(value * ratio) * tl.duration(), wrappedTime = timeWrap(time), snapTime = times[getClosest(times, wrappedTime, tl.duration())], dif = snapTime - wrappedTime; Math.abs(dif) > tl.duration() / 2 && (dif += dif < 0 ? tl.duration() : -tl.duration()); lastSnap = (time + dif) / tl.duration() / -ratio; return lastSnap; }, onRelease() { syncIndex(); draggable.isThrowing && (indexIsDirty = true); }, onThrowComplete: () => { syncIndex(); wasPlaying && tl.play(); } })[0]; tl.draggable = draggable; } tl.closestIndex(true); lastIndex = curIndex; onChange && onChange(items[curIndex], curIndex); timeline = tl; return () => window.removeEventListener('resize', onResize); }); return timeline; } // ── WorksSlider — infinite offset slider with counter, nav & autoplay ── const pad = n => (n < 10 ? '0' + n : '' + n); const wsCorner = { position: 'absolute', display: 'block', width: 11, height: 11, borderTop: '1px solid currentColor', borderLeft: '1px solid currentColor', borderTopLeftRadius: 4 }; const WorksSlider = React.memo(function WorksSlider({ works, lang }) { const rootRef = React.useRef(null); React.useLayoutEffect(() => { const root = rootRef.current; if (!root || !gsap) return; if (Draggable) gsap.registerPlugin(Draggable); if (InertiaPlugin) gsap.registerPlugin(InertiaPlugin); const slides = gsap.utils.toArray(root.querySelectorAll('[data-slider="slide"]')); if (!slides.length) return; const stepsCol = root.querySelector('[data-ws="steps-col"]'); const totalEl = root.querySelector('[data-ws="total"]'); const total = slides.length; totalEl.textContent = pad(total); stepsCol.innerHTML = ''; slides.forEach((_, i) => { const d = document.createElement('div'); d.setAttribute('data-ws-step', ''); d.style.cssText = 'width:2.2ch;line-height:1;text-align:center;'; d.textContent = pad(i + 1); stepsCol.appendChild(d); }); const allSteps = stepsCol.querySelectorAll('[data-ws-step]'); let activeElement; const loop = horizontalLoop(slides, { paused: true, draggable: true, center: false, onChange: (element, index) => { const D = REDUCED ? 0 : 0.5; if (activeElement && activeElement !== element.nextElementSibling) { activeElement.classList.remove('active'); gsap.to(activeElement, { opacity: 0.26, duration: D, overwrite: 'auto' }); const oc = activeElement.querySelector('.tyg-ws-cap'); if (oc) gsap.to(oc, { opacity: 0, y: 10, duration: D, overwrite: 'auto' }); } const next = element.nextElementSibling || slides[0]; next.classList.add('active'); gsap.to(next, { opacity: 1, duration: D, overwrite: 'auto' }); const nc = next.querySelector('.tyg-ws-cap'); if (nc) gsap.to(nc, { opacity: 1, y: 0, duration: REDUCED ? 0 : 0.55, delay: REDUCED ? 0 : 0.26, overwrite: 'auto' }); activeElement = next; gsap.to(allSteps, { y: (-100 * index) + '%', ease: 'power3', duration: REDUCED ? 0 : 0.45 }); } }); slides.forEach((slide, i) => slide.addEventListener('click', () => { if (slide.classList.contains('active')) { location.hash = slide.getAttribute('data-href'); } else loop.toIndex(i - 1, { ease: 'power3', duration: 0.725 }); })); const nextBtn = root.querySelector('[data-slider="button-next"]'); const prevBtn = root.querySelector('[data-slider="button-prev"]'); nextBtn.addEventListener('click', () => loop.next({ ease: 'power3', duration: 0.725 })); prevBtn.addEventListener('click', () => loop.previous({ ease: 'power3', duration: 0.725 })); // autoplay — pauses only while hovering the active (fully-shown) slide; respects reduced-motion let timer = null, overActive = false; const stop = () => { if (timer) { clearInterval(timer); timer = null; } }; const start = () => { if (REDUCED) return; stop(); timer = setInterval(() => loop.next({ ease: 'power3', duration: 0.9 }), 3800); }; slides.forEach((slide) => { slide.addEventListener('pointerenter', () => { if (slide.classList.contains('active')) { overActive = true; stop(); } }); slide.addEventListener('pointerleave', () => { if (slide.classList.contains('active')) { overActive = false; start(); } }); }); root.addEventListener('pointerdown', stop); root.addEventListener('pointerup', () => { if (!overActive) start(); }); start(); return () => { stop(); loop && loop.kill && loop.kill(); }; }, []); const NavBtn = ({ dir }) => ( ); return (
{/* left overlay — big counter + nav buttons, over a gradient fade */}
{/* counter */}
06
{/* nav */}
{/* the slider track */}
{works.map((w) => (
{window.TYG_PICK(w,
{window.TYG_PICK(w, lang).title} {w.date}
))}
); }); function HomeSections({ lang }) { const data = window.TYG_DATA; const works = data.works; const p = data.profile; const ja = lang === 'JA'; const bioShort = ja ? '中国・四川省生まれ、東京を拠点に活動。武蔵野美術大学デザイン情報学コース修士課程修了。リアルタイムCGを軸に、インタラクティブ・インスタレーション、CG映像、VRなど多岐にわたる分野で制作している。' : 'Born in Sichuan, China; now based in Tokyo. MFA, Musashino Art University. Working primarily with real-time CG across interactive installation, CG video, and VR — multisensory experiences focused on the human side of technology.'; const facts = [ ['Based', ja ? '東京 / Tokyo' : 'Tokyo, Japan'], ['Education', 'MFA — Musashino Art University'], ['Project', 'Synesthesia Array (w/ DNS)'], ]; // ── Rising-seam blur — as this panel lifts up over the pinned hero, its // top edge is heavily blurred at first and eases to crisp as it rises. ── const [sp, setSp] = React.useState(0); React.useEffect(() => { let raf = 0; const on = () => { if (raf) return; raf = requestAnimationFrame(() => { raf = 0; const h = window.innerHeight || 1; setSp(Math.min(Math.max(window.scrollY / h, 0), 1)); }); }; window.addEventListener('scroll', on, { passive: true }); on(); return () => { window.removeEventListener('scroll', on); if (raf) cancelAnimationFrame(raf); }; }, []); const seamEase = sp * sp * (3 - 2 * sp); // smoothstep const feather = REDUCED ? 0 : (1 - seamEase) * 150; // px of alpha-feathered top edge return (
{/* The panel's top edge feathers into the hero via the animated alpha gradient above — no backdrop blur, so the hero's bottom stays crisp as the second page rises to cover it. */} {/* ── 01 — Selected Works ───────────────────────────────────── */}
{ja ? <>リアルタイムCGと
オーディオビジュアル : <>Real-time CG &
audiovisual performance} {ja ? 'すべて見る' : 'View all'} →
{/* ── 02 — About (condensed profile) ────────────────────────── */}
{p.nameJa}
{p.nameEn}
{p.nameEn}/ {p.alias}

{bioShort}

{facts.map((f, i) => (
{f[0]} {f[1]}
))}
{/* ── Footer — socials + colophon ───────────────────────────── */}
); } window.HomeSections = HomeSections; })();