const curtainEl = document.getElementById('curtain'); const header = document.getElementById('siteHeader'); const footer = document.getElementById('logoMeta'); const sceneMosaic = document.querySelector('.scene-mosaic'); const sceneStory = document.querySelector('.scene-story'); const bandTop = document.getElementById('bandTop'); const bandMid = document.getElementById('bandMid'); const bandBot = document.getElementById('bandBot'); const LAST = 3; const bandPhotos = [...document.querySelectorAll('.scene-mosaic img')].map((img) => img.src); function sprocketRow() { const row = document.createElement('div'); row.className = 'sprocket-row'; return row; } function sejinMark() { const mark = document.createElement('div'); mark.className = 'sejin-mark'; mark.setAttribute('aria-hidden', 'true'); 'SEJIN'.split('').forEach((letter) => { const span = document.createElement('span'); span.textContent = letter; mark.appendChild(span); }); return mark; } document.querySelectorAll('.band-track').forEach((row) => { const group = document.createElement('div'); if (row.parentElement.id === 'bandMid') { group.className = 'sejin-run'; for (let i = 0; i < 8; i += 1) group.appendChild(sejinMark()); } else { group.className = 'film-strip'; const frames = document.createElement('div'); frames.className = 'film-frames'; const shift = Number(row.dataset.shift) || 0; const count = Math.max(14, bandPhotos.length); for (let i = 0; i < count; i += 1) { const frame = document.createElement('div'); frame.className = 'film-frame'; const img = document.createElement('img'); img.src = bandPhotos[(i + shift) % bandPhotos.length]; img.alt = ''; frame.appendChild(img); frames.appendChild(frame); } group.append(sprocketRow(), frames, sprocketRow()); } row.appendChild(group); row.appendChild(group.cloneNode(true)); }); let index = 0; let push = 0; let phase = 'scenes'; let curtain = 100; let busy = false; let auto = true; let autoTimer = 0; let resumeTimer = 0; let wheelLock = 0; let drag = null; let linkHover = false; function ease(t) { return t * t * t * (t * (t * 6 - 15) + 10); } function updateChrome() { header.classList.toggle('is-off', phase !== 'scenes' || curtain < 78); } function sheetPark() { const rest = sceneMosaic.querySelector('.stack.rest'); if (!rest || !sceneMosaic.offsetWidth) return 54; return 100 - (rest.offsetLeft / sceneMosaic.offsetWidth) * 100; } function layoutColumn(colPct, shiftPx) { document.body.style.setProperty('--col', `${colPct}vw`); document.body.style.setProperty('--x', `${shiftPx}px`); } function setGridFlow(step) { sceneMosaic.querySelectorAll('.stack').forEach((stack, i) => { const track = stack.querySelector('.stack-track'); if (!track) return; const dir = i % 2 === 0 ? -1 : 1; const y = dir * stack.clientHeight * 0.28 * step; track.style.transform = `translate3d(0, ${y}px, 0)`; }); } function applyPush(p) { push = Math.min(1, Math.max(0, p)); if (phoneLayout()) { layoutColumn(100, -window.innerWidth * push); sceneMosaic.style.transform = `translate3d(${50 * (1 - push)}%,0,0)`; layer(sceneMosaic, 1); layer(sceneStory, 0); setGridFlow(push); return; } const col = 100 - push * (100 - sheetPark()); layoutColumn(col, 0); sceneMosaic.style.transform = `translate3d(${col}%,0,0)`; layer(sceneMosaic, 1); layer(sceneStory, 0); setGridFlow(push); } function rideChrome(percent) { const x = (window.innerWidth * percent) / 100; header.style.width = '100vw'; footer.style.width = '100vw'; header.style.transform = `translate3d(${x}px,0,0)`; footer.style.transform = `translate3d(${x}px,0,0)`; header.classList.add('is-mark'); } function releaseChrome() { header.style.width = ''; footer.style.width = ''; header.style.transform = ''; footer.style.transform = ''; header.classList.remove('is-mark'); } function slideOff(t) { const park = sheetPark(); layoutColumn(park, -window.innerWidth * (park / 100) * t); sceneMosaic.style.transform = `translate3d(${park * (1 - t)}%,0,0)`; layer(sceneMosaic, 1); layer(sceneStory, 0); setGridFlow(1 + t); } function slidePhoneGrid(t) { const u = Math.min(1, Math.max(0, t)); layoutColumn(100, -window.innerWidth); sceneMosaic.style.transform = `translate3d(${-50 * u}%,0,0)`; layer(sceneMosaic, 1); layer(sceneStory, 0); setGridFlow(1 + u); } function layer(el, opacity) { el.style.opacity = String(opacity); el.style.visibility = opacity > 0.02 ? 'visible' : 'hidden'; } function phoneLayout() { return window.matchMedia('(max-width: 768px)').matches; } function setCurtain(vh) { curtain = vh; curtainEl.style.transform = `translate3d(0,${vh}vh,0)`; updateChrome(); } function animateValue(from, to, ms, apply, done) { busy = true; const started = performance.now(); function tick(now) { const t = Math.min(1, (now - started) / ms); apply(from + (to - from) * ease(t)); if (t < 1) requestAnimationFrame(tick); else { busy = false; if (done) done(); } } requestAnimationFrame(tick); } function holdFor(i) { if (i === 0) return 1100; if (i === 1) return 1600; if (i === 2) return 1300; return 1700; } function schedule() { clearTimeout(autoTimer); if (!auto || busy || linkHover || phase !== 'scenes') return; autoTimer = setTimeout(() => { if (!auto || busy || linkHover || phase !== 'scenes') return; if (index < LAST) goTo(index + 1); else playFinale(); }, holdFor(index)); } function pauseAuto() { auto = false; clearTimeout(autoTimer); clearTimeout(resumeTimer); resumeTimer = setTimeout(resumeAuto, 1500); } function resumeAuto() { if (linkHover) return; auto = true; if (phase === 'bands') openOut(); else if (phase === 'scenes') schedule(); else if (phase === 'rising' || phase === 'opening') resumeTimer = setTimeout(resumeAuto, 400); } function holdForLink() { linkHover = true; document.body.classList.add('is-link-hover'); clearTimeout(autoTimer); clearTimeout(resumeTimer); } function releaseLink() { linkHover = false; document.body.classList.remove('is-link-hover'); if (!auto) { resumeTimer = setTimeout(resumeAuto, 1500); return; } if (busy || phase === 'rising' || phase === 'opening' || phase === 'revealing') return; if (phase === 'bands') { autoTimer = setTimeout(() => { if (auto && !linkHover && phase === 'bands') openOut(); }, 400); return; } schedule(); } function resetShift() { sceneMosaic.style.transform = ''; sceneStory.style.transform = ''; } function slideX(el, percent) { el.style.transform = `translate3d(${percent}%,0,0)`; layer(el, 1); } function finish(dest) { index = dest; resetShift(); if (dest <= 1) { releaseChrome(); applyPush(dest); } else if (dest === 2) { releaseChrome(); if (phoneLayout()) { layoutColumn(100, -window.innerWidth); sceneMosaic.style.transform = 'translate3d(-50%,0,0)'; layer(sceneMosaic, 1); layer(sceneStory, 0); setGridFlow(2); } else { slideOff(1); layer(sceneMosaic, 1); layer(sceneStory, 0); } } else { if (phoneLayout()) { layoutColumn(100, -window.innerWidth); sceneMosaic.style.transform = 'translate3d(-50%,0,0)'; } else slideOff(1); setGridFlow(3); layer(sceneMosaic, phoneLayout() ? 1 : 0); layer(sceneStory, 1); rideChrome(0); } updateChrome(); if (auto) schedule(); } function slideScenes(from, dest, t) { const forward = dest > from; if ((from === 1 && dest === 2) || (from === 2 && dest === 1)) { if (phoneLayout()) slidePhoneGrid(forward ? t : 1 - t); else slideOff(forward ? t : 1 - t); return; } if (phoneLayout() && ((from === 2 && dest === 3) || (from === 3 && dest === 2))) { const u = forward ? t : 1 - t; sceneMosaic.style.transform = 'translate3d(-50%,0,0)'; layer(sceneMosaic, 1); slideX(sceneStory, 100 * (1 - u)); rideChrome(100 * (1 - u)); setGridFlow(2 + u); return; } const storyPercent = forward ? 100 * (1 - t) : 100 * t; if (forward) { slideX(sceneMosaic, -100 * t); slideX(sceneStory, storyPercent); } else { slideX(sceneStory, storyPercent); slideX(sceneMosaic, -100 * (1 - t)); } if (from === LAST || dest === LAST) rideChrome(storyPercent); setGridFlow(2 + (forward ? t : 1 - t)); } function goTo(dest) { if (busy || phase !== 'scenes') return; dest = Math.max(0, Math.min(LAST, dest)); if (dest === index && (dest > 1 || Math.abs(push - dest) < 0.01)) { if (auto) schedule(); return; } clearTimeout(autoTimer); const from = index; if (phoneLayout() && from === 0 && (dest === 0 || dest === 1)) { animateValue(push, dest, 1500, applyPush, () => finish(dest)); return; } if (phoneLayout() && from === 1 && dest === 0) { animateValue(1, 0, 1500, applyPush, () => finish(0)); return; } if (from <= 1 && dest <= 1) { animateValue(push, dest, 1700, applyPush, () => finish(dest)); return; } animateValue(0, 1, 1700, (t) => slideScenes(from, dest, t), () => finish(dest)); } function layoutBands(split, open) { const band = 100 / 3; const midH = split * band + open * (100 - split * band); const side = (100 - midH) / 2; bandTop.style.height = `${side}vh`; bandBot.style.height = `${side}vh`; bandMid.style.top = `${side}vh`; bandMid.style.height = `${midH}vh`; const flowing = String(Math.max(0, split * (1 - Math.min(1, open / 0.38)))); document.querySelectorAll('.band-track').forEach((row) => { row.style.opacity = row.querySelector('.film-strip') ? '1' : flowing; }); } function syncBandSpeed() { document.querySelectorAll('.band-top .film-frames, .band-bot .film-frames').forEach((row) => { const h = Math.floor(row.getBoundingClientRect().height); if (h < 8) return; const w = Math.round(h * 16 / 10); row.querySelectorAll('.film-frame').forEach((frame) => { frame.style.width = `${w}px`; frame.style.height = `${h}px`; }); }); bandTop.offsetHeight; const tracks = [...document.querySelectorAll('.band-track')]; const midSpan = bandMid.querySelector('.band-track').scrollWidth / 2; if (!midSpan) return; const pxPerSec = midSpan / 22; tracks.forEach((row) => { const span = row.scrollWidth / 2; if (!span) return; const pace = row.parentElement.id === 'bandTop' ? 0.86 : row.parentElement.id === 'bandBot' ? 1.14 : 1; row.style.animationDuration = `${span / (pxPerSec * pace)}s`; }); } function playFinale() { if (busy || phase !== 'scenes') return; clearTimeout(autoTimer); index = LAST; phase = 'rising'; layoutBands(1, 0); requestAnimationFrame(() => requestAnimationFrame(syncBandSpeed)); updateChrome(); animateValue(100, 0, 900, setCurtain, () => { phase = 'bands'; layoutBands(1, 0); updateChrome(); if (!auto || linkHover) return; autoTimer = setTimeout(() => { if (auto && !linkHover && phase === 'bands') openOut(); }, 2000); }); } function beginSejinFlight() { const track = bandMid.querySelector('.band-track'); const hero = document.querySelector('.sejin-word'); if (!track || !hero) return null; track.style.animationPlayState = 'paused'; const marks = [...bandMid.querySelectorAll('.sejin-mark')]; let source = marks[0]; let best = Infinity; const midX = window.innerWidth / 2; marks.forEach((mark) => { const box = mark.getBoundingClientRect(); const dist = Math.abs(box.left + box.width / 2 - midX); if (dist < best) { best = dist; source = mark; } }); const fromLetters = source ? [...source.querySelectorAll('span')] : []; const toLetters = [...hero.querySelectorAll('span')]; if (!fromLetters.length || fromLetters.length !== toLetters.length) return null; const letters = fromLetters.map((fromEl, index) => { const from = fromEl.getBoundingClientRect(); const fly = document.createElement('span'); fly.className = 'sejin-fly-letter'; fly.textContent = fromEl.textContent; fly.style.left = `${from.left}px`; fly.style.top = `${from.top}px`; fly.style.width = `${from.width}px`; fly.style.height = `${from.height}px`; fly.style.fontSize = getComputedStyle(fromEl).fontSize; document.body.appendChild(fly); return { fly, from, toEl: toLetters[index], fromFont: parseFloat(getComputedStyle(fromEl).fontSize) }; }); const mark = source.getBoundingClientRect(); const rule = document.createElement('i'); rule.id = 'sejinFlyRule'; rule.style.left = `${mark.left}px`; rule.style.top = `${mark.top + mark.height / 2}px`; rule.style.width = `${mark.width}px`; rule.style.height = '1px'; document.body.appendChild(rule); source.style.visibility = 'hidden'; hero.style.opacity = '0'; return { letters, rule, fromMark: mark, hero, source, track }; } function placeSejinFlight(t, flight) { if (!flight) return; const grow = Math.max(0, (t - 0.42) / 0.58); flight.letters.forEach((letter) => { const to = letter.toEl.getBoundingClientRect(); const toFont = parseFloat(getComputedStyle(letter.toEl).fontSize); const font = letter.fromFont + (toFont - letter.fromFont) * grow; const fromCx = letter.from.left + letter.from.width / 2; const fromCy = letter.from.top + letter.from.height / 2; const toCx = to.left + to.width / 2; const toCy = to.top + to.height / 2; const cx = fromCx + (toCx - fromCx) * t; const cy = fromCy + (toCy - fromCy) * t; letter.fly.style.fontSize = `${font}px`; letter.fly.style.width = `${font}px`; letter.fly.style.height = `${font}px`; letter.fly.style.left = `${cx - font / 2}px`; letter.fly.style.top = `${cy - font / 2}px`; }); const hero = flight.hero.getBoundingClientRect(); const from = flight.fromMark; const length = from.width + (hero.height - from.width) * t; const cx = (from.left + from.width / 2) + ((hero.left + hero.width / 2) - (from.left + from.width / 2)) * t; const cy = (from.top + from.height / 2) + ((hero.top + hero.height / 2) - (from.top + from.height / 2)) * t; flight.rule.style.width = `${length}px`; flight.rule.style.height = '1px'; flight.rule.style.left = `${cx - length / 2}px`; flight.rule.style.top = `${cy}px`; flight.rule.style.transformOrigin = 'center center'; flight.rule.style.transform = `rotate(${90 * t}deg)`; } function endSejinFlight(flight) { if (!flight) return; flight.hero.style.opacity = ''; flight.letters.forEach((letter) => letter.fly.remove()); flight.rule.remove(); flight.source.style.visibility = ''; flight.track.style.animationPlayState = ''; } function openOut() { if (busy || phase !== 'bands') return; clearTimeout(autoTimer); phase = 'revealing'; releaseChrome(); applyPush(0); updateChrome(); const flight = beginSejinFlight(); animateValue(0, 1, 1400, (open) => { layoutBands(1, open); placeSejinFlight(open, flight); }, () => { setCurtain(100); layoutBands(0, 0); endSejinFlight(flight); index = 0; phase = 'scenes'; applyPush(0); updateChrome(); if (auto) schedule(); }); } function retreatCurtain() { if (busy || (phase !== 'bands' && phase !== 'opening')) return; clearTimeout(autoTimer); phase = 'rising'; animateValue(1, 0, 700, (split) => layoutBands(split, 0), () => { animateValue(0, 100, 700, setCurtain, () => { layoutBands(0, 0); slideOff(1); resetShift(); layer(sceneMosaic, 0); layer(sceneStory, 1); phase = 'scenes'; index = LAST; rideChrome(0); updateChrome(); if (auto) schedule(); }); }); } function step(dir) { if (busy) return; pauseAuto(); if (phase === 'bands' || phase === 'opening') { if (dir > 0) openOut(); else retreatCurtain(); return; } if (phase !== 'scenes') return; if (dir > 0) { if (index < LAST) goTo(index + 1); else playFinale(); } else if (index > 0) { goTo(index - 1); } } window.addEventListener('wheel', (event) => { event.preventDefault(); const now = performance.now(); if (busy || now < wheelLock) { pauseAuto(); return; } const delta = Math.abs(event.deltaX) > Math.abs(event.deltaY) ? event.deltaX : event.deltaY; if (Math.abs(delta) < 8) return; wheelLock = now + 920; step(delta > 0 ? 1 : -1); }, { passive: false }); window.addEventListener('pointerdown', (event) => { const onLink = event.target instanceof Element && event.target.closest('a'); if (onLink && event.pointerType !== 'mouse') { holdForLink(); return; } if (onLink || event.button !== 0 || busy || phase !== 'scenes') return; drag = { x: event.clientX, index, moved: false }; }); window.addEventListener('pointermove', (event) => { if (!drag || phase !== 'scenes') return; const dx = event.clientX - drag.x; if (!drag.moved) { if (Math.abs(dx) < 10) return; drag.moved = true; pauseAuto(); document.body.classList.add('is-dragging'); } if (drag.index === 0) { applyPush(Math.min(1, Math.max(0, -dx / (window.innerWidth * 0.55)))); } else if (phoneLayout() && drag.index === 1) { const span = window.innerWidth * 0.55; if (dx < 0) slidePhoneGrid(Math.min(1, -dx / span)); else applyPush(Math.max(0, 1 - dx / span)); } else if (!phoneLayout() && drag.index === 1 && dx > 0) { applyPush(Math.min(1, Math.max(0, 1 - dx / (window.innerWidth * 0.55)))); } }); function endDrag(event) { if (!drag) return; const dx = event.clientX - drag.x; const start = drag.index; const moved = drag.moved; drag = null; document.body.classList.remove('is-dragging'); if (!moved || busy || phase !== 'scenes') return; if (phoneLayout() && start === 0) { goTo(dx < -70 ? 1 : 0); return; } if (phoneLayout() && start === 1) { if (dx < -70) goTo(2); else if (dx > 70) goTo(0); else goTo(1); return; } if (start <= 1 && !(start === 1 && dx < -110)) { goTo(push > 0.5 ? 1 : 0); return; } if (dx < -110) { if (start < LAST) goTo(start + 1); else playFinale(); } else if (dx > 110) { goTo(Math.max(0, start - 1)); } else { goTo(start); } } window.addEventListener('pointerup', (event) => { endDrag(event); if (event.pointerType !== 'mouse' && linkHover) releaseLink(); }); window.addEventListener('pointercancel', (event) => { endDrag(event); if (event.pointerType !== 'mouse' && linkHover) releaseLink(); }); window.addEventListener('keydown', (event) => { if (event.key !== 'ArrowRight' && event.key !== 'ArrowDown' && event.key !== 'ArrowLeft' && event.key !== 'ArrowUp') return; event.preventDefault(); const forward = event.key === 'ArrowRight' || event.key === 'ArrowDown'; if (busy) { pauseAuto(); return; } step(forward ? 1 : -1); }); window.addEventListener('pointerover', (event) => { if (event.pointerType === 'touch') return; if (!(event.target instanceof Element) || !event.target.closest('a')) return; holdForLink(); }); window.addEventListener('pointerout', (event) => { if (event.pointerType === 'touch') return; if (!(event.target instanceof Element)) return; const link = event.target.closest('a'); if (!link) return; const next = event.relatedTarget; if (next instanceof Element && next.closest('a')) return; releaseLink(); }); window.addEventListener('resize', () => { if (phase !== 'scenes' || busy) return; if (index <= 1) applyPush(index === 1 ? 1 : 0); else setGridFlow(index); }); sceneMosaic.querySelectorAll('.stack').forEach((stack) => { const originals = [...stack.children]; const track = document.createElement('div'); track.className = 'stack-track'; originals.forEach((node) => track.appendChild(node)); originals.forEach((node) => track.appendChild(node.cloneNode(true))); originals.forEach((node) => track.appendChild(node.cloneNode(true))); stack.appendChild(track); }); applyPush(0); setCurtain(100); schedule();