/* JIRANSOFT site bundle. Order: shape data (deflate+base64, decoded at boot, used by the index hero AND the about-page smile) -> hero controller -> sections -> shared chrome + about-page controllers (appended at the end, run on every page). */ (function () { function boot() { var hasIndexHero = !!document.getElementById('dot-canvas'); if (!hasIndexHero && !document.getElementById('aboutSmile')) return; // Dot coordinates for every hero shape, packed as deflate+base64. // Decoded into window.SHAPE_DATA before the controllers start. var SHAPE_B64 = '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'; var bytes = Uint8Array.from(atob(SHAPE_B64), function (c) { return c.charCodeAt(0); }); new Response(new Blob([bytes]).stream().pipeThrough(new DecompressionStream('deflate'))).text().then(function (txt) { window.SHAPE_DATA = JSON.parse(txt); window.BRACE_DATA = window.SHAPE_DATA; if (hasIndexHero) main(); if (window.__onShapeData) window.__onShapeData(); }); function main() { (() => { const canvas = document.getElementById('dot-canvas'); const ctx = canvas.getContext('2d'); const hero = document.getElementById('hero'); const heroSticky = hero.querySelector('.hero-sticky'); const textStages = Array.from(document.querySelectorAll('.hero-text-stage')); const reducedMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; const STAGE_COUNT = 3; const INITIAL_DELAY = 1000; // ms — wait before first text fades in const TEXT_TO_BRACE_DELAY = 500; // text @1.0s, gather starts @1.5s const EDGE_SHIFT_PCT = 0.05; // shift each brace outward by 5% of viewport width let width = 0, height = 0; let dpr = Math.min(window.devicePixelRatio || 1, 2); /* ───── Background dot config ───── */ const GRID_SPACING = 26; const JITTER_RATIO = 0.55; const DOT_RADIUS = 1.0; // fixed 1px size for ALL dots // Drift narrowed and slowed so the motion no longer feels "꾸물꾸물". const BG_FLOAT_AMPLITUDE = 1.4; const BG_FLOAT_SPEED = 0.0012; // Shimmer drives ALPHA now (not size). Per-dot sin phase. const SHIMMER_SPEED = 0.0028; const BG_SHIMMER_AMP = 0.55; // bg dots: alpha varies ±55% of base const BRACE_SHIMMER_AMP = 0.18; // brace dots: subtler ±18% of base /* ───── Brace config ───── */ const BRACE_SAMPLES_PER_SIDE = 600; // Per-dot smoothing rate when its target dotTT changes (~500ms fade). const DOT_FADE_RATE = 0.08; // Initial pool: dots within INITIAL_RADIUS — fast burst. // Continuous pool: ring between INITIAL_RADIUS and CONTINUOUS_RADIUS — // trickle in slowly so the shape keeps getting denser afterward. const INITIAL_RADIUS = 50; const CONTINUOUS_RADIUS = 150; const KEEP_BG_INITIAL = 0.20; const KEEP_BG_CONTINUOUS = 0.60; // Timing tuned so the initial form completes at 2.5s wall-clock: // text @1.0s + TEXT_TO_BRACE_DELAY(0.5s) = bracesActiveAt @1.5s // then last initial dot starts at +400ms, takes 600ms → arrives @2.5s const INITIAL_WINDOW_MS = 400; const SWEEP_WINDOW_MS = 650; // meteor sweep: arrival wave travels ↘ across the shape const DOT_DURATION_INITIAL = 600; const CONTINUOUS_START_MS = 1500; // +1.5s after bracesActiveAt const CONTINUOUS_END_MS = 60000; const DOT_DURATION_CONTINUOUS = 2500; /* ───── Per-stage shape configuration ───── Each stage = array of "parts" projected onto the canvas. mode 'side' → projected next to the text column (used by braces) mode 'center' → projected horizontally centered (used by Vector 5) `shape` is a key into window.SHAPE_DATA. */ const STAGE_CONFIGS = [ // Stage 0 — { } braces (image-derived dots; 75% of the designer mock size) [ { shape: 'left', mode: 'side', side: -1, height: 446, innerX: 230, scatter: 0.0005 }, { shape: 'right', mode: 'side', side: +1, height: 446, innerX: 230, scatter: 0.0005 }, ], // Stage 1 — infinity / figure-8, X crossing through the center [ { shape: 'infinity_image', mode: 'center', height: 473, scatter: 0.0005 }, ], // Stage 2 — smile with ears and wing tail (10% smaller than the others' scale) [ { shape: 'group48128', mode: 'center', height: 432, scatter: 0.0005 }, ], ]; /* ───── Cursor interaction ───── */ const ripples = []; let rippleLastAt = 0; /* ───── Color LUTs ───── Alpha-only shimmer is implemented as a small number of cached fill styles. Per-dot bucket indices (shimIdx, colorIdx) are computed each frame and used to dispatch dots to the correct cached style. */ const COLOR_LEVELS = 8; const SHIMMER_LEVELS = 4; const BG_BASE_ALPHA = 0.40; // lighter than the previous 0.55 const BRACE_BASE_ALPHA_MIN = 0.32; // dotTT = 0 — fainter than bg so transit dots whisper const BRACE_BASE_ALPHA_MAX = 1.00; // dotTT = 1 (full orange) function shimAlpha(base, sIdx, amp) { const shimT = (sIdx + 0.5) / SHIMMER_LEVELS; const factor = (shimT - 0.5) * 2; // -1..+1 const a = base * (1 + factor * amp); return a < 0 ? 0 : (a > 1 ? 1 : a); } function buildLUTs() { const bg = new Array(SHIMMER_LEVELS); for (let s = 0; s < SHIMMER_LEVELS; s++) { const a = shimAlpha(BG_BASE_ALPHA, s, BG_SHIMMER_AMP); bg[s] = `rgba(170, 170, 170, ${a.toFixed(3)})`; } const brace = new Array(COLOR_LEVELS * SHIMMER_LEVELS); for (let c = 0; c < COLOR_LEVELS; c++) { const t = COLOR_LEVELS > 1 ? c / (COLOR_LEVELS - 1) : 0; // gray end matches the bg-dot tone (168) instead of charcoal (115), // so exploding / regathering dots read as faint, not heavy const r = (168 + (255 - 168) * t) | 0; const g = (168 + (127 - 168) * t) | 0; const b = (168 + (0 - 168) * t) | 0; const baseAlpha = BRACE_BASE_ALPHA_MIN + (BRACE_BASE_ALPHA_MAX - BRACE_BASE_ALPHA_MIN) * t; for (let s = 0; s < SHIMMER_LEVELS; s++) { const a = shimAlpha(baseAlpha, s, BRACE_SHIMMER_AMP); brace[c * SHIMMER_LEVELS + s] = `rgba(${r},${g},${b},${a.toFixed(3)})`; } } const phantom = new Array(COLOR_LEVELS * SHIMMER_LEVELS); for (let c = 0; c < COLOR_LEVELS; c++) { const t = COLOR_LEVELS > 1 ? c / (COLOR_LEVELS - 1) : 0; for (let s = 0; s < SHIMMER_LEVELS; s++) { const a = shimAlpha(t, s, BRACE_SHIMMER_AMP); phantom[c * SHIMMER_LEVELS + s] = `rgba(255, 127, 0, ${a.toFixed(3)})`; } } return { bg, brace, phantom }; } const LUT = buildLUTs(); let bgDots = []; // Sampled-point store keyed by SHAPE_DATA key: { points:[[u,v],...], aspect } const shapes = {}; let shapesReady = false; let progress = 0; let progressVel = 0; let targetProgress = 0; let activeStage = -1; let assignedStage = -1; // which stage's shape bgDots are currently mapped to let initialReleased = false; let initialReleaseAt = Infinity; let lastStageActivatedAt = Infinity; // resets on every stage change; drives TEXT_TO_BRACE_DELAY let bracesActiveAt = Infinity; // wall-clock the current stage's gather started let pendingAssignStage = -1; // stage waiting to be assigned after explosion delay let pendingAssignAt = Infinity; // wall-clock when to call assignBraceDots const mouse = { x: -9999, y: -9999, px: -9999, py: -9999, vx: 0, vy: 0, inside: false }; let cursorMode = 'parallax'; // fixed — subtle per-dot depth shift against cursor movement let cursorEase = 0; // eased cursor presence (0..1) — fades all field modes in/out let lastMx = -9999, lastMy = -9999; // last in-canvas cursor position (pivot while easing out) let pMx = null, pMy = null; // inertial-glide cursor: trails the real cursor (~0.4s settle) /* ─── SVG path → sampled points (no fetch needed) ─── */ function samplePointsFromPath(d, w, h, count, opts = {}) { const SCALE = 3; const cw = Math.ceil(w * SCALE), ch = Math.ceil(h * SCALE); const off = document.createElement('canvas'); off.width = cw; off.height = ch; const octx = off.getContext('2d'); octx.scale(SCALE, SCALE); if (opts.stroke) { octx.strokeStyle = '#ff7f00'; octx.lineWidth = opts.lineWidth || 2; if (opts.lineCap) octx.lineCap = opts.lineCap; octx.stroke(new Path2D(d)); } else { octx.fillStyle = '#ff7f00'; octx.fill(new Path2D(d)); } const data = octx.getImageData(0, 0, cw, ch).data; const candidates = []; for (let y = 0; y < ch; y++) { for (let x = 0; x < cw; x++) { if (data[(y * cw + x) * 4 + 3] > 100) candidates.push([x, y]); } } if (!candidates.length) throw new Error('no opaque pixels in path'); const n = count; const points = new Array(n); for (let i = 0; i < n; i++) { const [x, y] = candidates[Math.floor(Math.random() * candidates.length)]; points[i] = [x / cw, y / ch]; } return { points, aspect: w / h }; } /* ─── Canvas sizing + bg grid ─── */ function resize() { const rect = heroSticky.getBoundingClientRect(); width = rect.width; height = rect.height; canvas.width = Math.floor(width * dpr); canvas.height = Math.floor(height * dpr); canvas.style.width = width + 'px'; canvas.style.height = height + 'px'; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); buildBackgroundGrid(); if (activeStage >= 0) assignBraceDots(activeStage); } /* For a stage-config part, compute the canvas rectangle the SVG occupies. Viewport-fit logic: • vertical → cap height to fit, keep centered top/bottom • horizontal → if would overflow on the right (or both), the shape slides LEFT until its right edge fits inside (right side stays in view first). If after sliding the left also overflows, scale down the whole shape proportionally so nothing exits the browser. */ const VIEW_MARGIN_X = 24; const VIEW_MARGIN_TOP = 88; // leaves room for the fixed header const VIEW_MARGIN_BOT = 16; function partBox(part) { const shape = shapes[part.shape]; if (!shape) return null; const cx0 = width / 2; const cy0 = height / 2 - height * 0.02; let h = part.height; let w = h * shape.aspect; // 1) vertical cap — match top/bottom to viewport, scale proportionally const maxH = height - VIEW_MARGIN_TOP - VIEW_MARGIN_BOT; if (h > maxH) { const scale = maxH / h; h = maxH; w *= scale; } const rightLimit = width - VIEW_MARGIN_X; const leftLimit = VIEW_MARGIN_X; const avail = rightLimit - leftLimit; let cx; if (part.mode === 'side') { const narrowScale = Math.max(0.5, Math.min(1, width / 960)); h *= narrowScale; w *= narrowScale; let innerX = part.innerX + width * EDGE_SHIFT_PCT; const maxInner = Math.max(0, cx0 - w - VIEW_MARGIN_X); if (innerX > maxInner) innerX = maxInner; cx = cx0 + part.side * (innerX + w / 2); } else { cx = cx0; } let leftX = cx - w / 2; let rightX = cx + w / 2; if (w > avail) { const scale = avail / w; w *= scale; h *= scale; leftX = cx - w / 2; rightX = cx + w / 2; } if (rightX > rightLimit) { const shift = rightX - rightLimit; leftX -= shift; rightX -= shift; } if (leftX < leftLimit) { const shift = leftLimit - leftX; leftX += shift; rightX += shift; } // re-center vertically with the (possibly scaled) height const topY = cy0 - h / 2; return { leftX, topY, w, h }; } function hash2(c, r) { let h = (c * 374761393 + r * 668265263) | 0; h = (h ^ (h >>> 13)) * 1274126177 | 0; return ((h ^ (h >>> 16)) >>> 0) / 4294967295; } function buildBackgroundGrid() { bgDots = []; const cols = Math.ceil(width / GRID_SPACING) + 2; const rows = Math.ceil(height / GRID_SPACING) + 2; const offX = (width - (cols - 1) * GRID_SPACING) / 2; const offY = (height - (rows - 1) * GRID_SPACING) / 2; for (let r = 0; r < rows; r++) { for (let c = 0; c < cols; c++) { const jx = (hash2(c, r) - 0.5) * GRID_SPACING * JITTER_RATIO; const jy = (hash2(c + 7919, r + 6151) - 0.5) * GRID_SPACING * JITTER_RATIO; const baseX = offX + c * GRID_SPACING + jx; const baseY = offY + r * GRID_SPACING + jy; bgDots.push({ baseX, baseY, x: baseX, y: baseY, vx: 0, vy: 0, kickAt: -1, kickVx: 0, kickVy: 0, gatherAt: -1, phase: hash2(c + 13, r + 29) * Math.PI * 2, speedJitter: 0.7 + hash2(c + 1, r + 1) * 0.7, sizeJitter: 0.7 + hash2(c + 99, r + 101) * 0.6, shimmerPhase: hash2(c + 41, r + 53) * Math.PI * 2, shimmerSpeed: 0.5 + hash2(c + 67, r + 73) * 1.5, brace: null, dotTT: 0, dispX: 0, dispY: 0, glow: 0, glowIdx: 0, orbitAngle: 0, }); } } } /* ─── Two-pool recruitment with absolute-time delays ─── Pool A (initial, within INITIAL_RADIUS): • 80% recruited • delayMs in [0, INITIAL_WINDOW_MS] (random) • each parent also spawns a phantom companion → 2× density burst Pool B (continuous, between INITIAL_RADIUS..CONTINUOUS_RADIUS): • 40% recruited • delayMs distributed evenly across [CONTINUOUS_START_MS, CONTINUOUS_END_MS] • each parent also spawns a phantom — so each "arrival" really is a new dot becoming orange, then a second one materializing */ function assignBraceDots(stageIdx) { if (!shapesReady || !width || !height || !bgDots.length) return; const config = STAGE_CONFIGS[stageIdx]; if (!config) return; // Previous-stage phantoms crossfade out in place (anchored at baseX/Y // once their brace is cleared, alpha follows dotTT → 0); the ones that // already finished fading are dropped. All brace refs reset. bgDots = bgDots.filter(d => !(d.isPhantom && d.dotTT <= 0.03)); for (let i = 0; i < bgDots.length; i++) bgDots[i].brace = null; // Materialize every part's target positions in canvas-space, keeping // a backreference (partIdx) so we can re-project the same dot per // frame using the part's mode/side/innerX/height. const targets = []; for (let p = 0; p < config.length; p++) { const part = config[p]; const shape = shapes[part.shape]; if (!shape) continue; const box = partBox(part); if (!box) continue; for (let i = 0; i < shape.points.length; i++) { const [u, v] = shape.points[i]; targets.push({ x: box.leftX + u * box.w, y: box.topY + v * box.h, u, v, partIdx: p, }); } } if (!targets.length) return; // Bucket each bg dot into one of: initial pool, continuous pool, or // ineligible — based on its distance to the nearest brace target. const R1_SQ = INITIAL_RADIUS * INITIAL_RADIUS; const R2_SQ = CONTINUOUS_RADIUS * CONTINUOUS_RADIUS; const initialPool = []; // { dotIdx, target } const continuousPool = []; for (let i = 0; i < bgDots.length; i++) { const d = bgDots[i]; let best = null, bestD2 = Infinity; for (let t = 0; t < targets.length; t++) { const tt = targets[t]; const dx = d.baseX - tt.x; const dy = d.baseY - tt.y; const dist2 = dx * dx + dy * dy; if (dist2 < bestD2) { bestD2 = dist2; best = tt; } } if (bestD2 < R1_SQ) initialPool.push({ dotIdx: i, target: best }); else if (bestD2 < R2_SQ) continuousPool.push({ dotIdx: i, target: best }); } function shuffle(arr) { for (let i = arr.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [arr[i], arr[j]] = [arr[j], arr[i]]; } } shuffle(initialPool); shuffle(continuousPool); // 모바일(≤768px)에서는 hero 아이콘 도트 밀도를 15% 낮춘다(모집·팬텀 모두 0.85×). const densityMult = width <= 768 ? 0.85 : 1; const initialRecruit = Math.floor(initialPool.length * (1 - KEEP_BG_INITIAL) * densityMult); const continuousRecruit = Math.floor(continuousPool.length * (1 - KEEP_BG_CONTINUOUS) * densityMult); const assignNow = performance.now(); const W = width, H = height; // CSS-px viewport (positions/targets live in CSS px) const hasSequential = config.some(p => p.sequential); // Morph: if a shape is already on screen (stage change / resize), dots // glide from their current positions instead of re-entering from edges. const morph = assignedStage >= 0; function scatterDot(d, delayMs) { // Meteor sweep: every dot enters from the top/left band and rides // one shared ↘ airstream (uniform heading + gentle same-side curl), // then peels off to settle on its own target. One coherent flow — // no criss-crossing — keeps the gather calm to watch. const margin = 40 + Math.random() * 80; if (Math.random() < 0.55) { // top band d.x = -W * 0.25 + Math.random() * W * 0.95; d.y = -margin; } else { // left band d.x = -margin; d.y = -H * 0.25 + Math.random() * H * 0.85; } const ang = Math.PI * 0.21 + (Math.random() - 0.5) * 0.10; // ≈38° down-right const spd = 0.35 + Math.random() * 0.5; d.vx = Math.cos(ang) * spd; d.vy = Math.sin(ang) * spd; d.curl = 0.28 + Math.random() * 0.26; // same-side, gentle arcs d.gatherAt = assignNow + TEXT_TO_BRACE_DELAY + delayMs; } function morphDot(d, delayMs) { // Keep the current position; spring straight into the new target // along the same gentle same-side arc. Initial-pool dots reflow at // once (the shape melts into the next one); the continuous trickle // keeps its long-tail schedule. d.curl = 0.28 + Math.random() * 0.26; d.gatherAt = delayMs < CONTINUOUS_START_MS ? -1 : assignNow + delayMs; } // Assign initial pool — arrival wave sweeps ↘ across the shape // (delay follows target x+y), matching the meteor flight direction. for (let i = 0; i < initialRecruit; i++) { const { dotIdx, target } = initialPool[i]; const wave = Math.max(0, Math.min(1, (target.x + target.y) / (W + H))); const delayMs = wave * SWEEP_WINDOW_MS + Math.random() * 120; bgDots[dotIdx].brace = { u: target.u, v: target.v, partIdx: target.partIdx, delayMs, durationMs: DOT_DURATION_INITIAL, }; if (hasSequential) bgDots[dotIdx].gatherAt = -1; else if (morph) morphDot(bgDots[dotIdx], delayMs); else scatterDot(bgDots[dotIdx], delayMs); } const span = CONTINUOUS_END_MS - CONTINUOUS_START_MS; for (let i = 0; i < continuousRecruit; i++) { const { dotIdx, target } = continuousPool[i]; const t = continuousRecruit > 1 ? i / (continuousRecruit - 1) : 0; const jitter = (Math.random() - 0.5) * (span / Math.max(1, continuousRecruit)) * 0.8; const delayMs = CONTINUOUS_START_MS + t * span + jitter; bgDots[dotIdx].brace = { u: target.u, v: target.v, partIdx: target.partIdx, delayMs, durationMs: DOT_DURATION_CONTINUOUS, }; if (hasSequential) bgDots[dotIdx].gatherAt = -1; else if (morph) morphDot(bgDots[dotIdx], delayMs); else scatterDot(bgDots[dotIdx], delayMs); } // Sequential vertex gather (per part): for any part with `sequential`, // sort its INITIAL-POOL dots by angle around the part's center, bin them, // then assign delays in bin order so vertices appear one after another. for (let p = 0; p < config.length; p++) { const part = config[p]; if (!part.sequential) continue; const box = partBox(part); if (!box) continue; const cx = box.leftX + box.w / 2; const cy = box.topY + box.h / 2; const inPart = []; for (let i = 0; i < bgDots.length; i++) { const d = bgDots[i]; if (!d.brace || d.brace.partIdx !== p) continue; // only re-stagger the initial burst — leave continuous trickle alone if (d.brace.delayMs >= CONTINUOUS_START_MS) continue; const tx = box.leftX + d.brace.u * box.w; const ty = box.topY + d.brace.v * box.h; inPart.push({ d, angle: Math.atan2(ty - cy, tx - cx) }); } inPart.sort((a, b) => a.angle - b.angle); const bins = part.sequential.bins || 8; const interval = part.sequential.intervalMs || 400; for (let i = 0; i < inPart.length; i++) { const binIdx = Math.floor((i / Math.max(1, inPart.length)) * bins); inPart[i].d.brace.delayMs = binIdx * interval + Math.random() * 90; } } // Phantom strategy depends on the part: // • sequential parts → exactly ONE phantom per sample point, delayed // by the same angle-rank binning as the recruits. Every reference // dot is represented once (dense cores fill to reference density, // beyond what the bg grid can supply) and dots never read doubled. // • all other parts → PHANTOMS_PER_SAMPLE per sample point of the // shape, so every dot along the line is covered and the result // reads as a continuous line, not as clusters. const phantoms = []; for (let p = 0; p < config.length; p++) { const part = config[p]; const PHANTOMS_PER_SAMPLE = part.phantomDensity || 1; const shape = shapes[part.shape]; if (!shape) continue; const box = partBox(part); if (part.sequential) { const bins = part.sequential.bins || 8; const interval = part.sequential.intervalMs || 400; const cx = box ? box.leftX + box.w / 2 : width / 2; const cy = box ? box.topY + box.h / 2 : height / 2; const order = shape.points.map(([u, v], idx) => { const px = box ? box.leftX + u * box.w : 0; const py = box ? box.topY + v * box.h : 0; return { idx, angle: Math.atan2(py - cy, px - cx) }; }).sort((a, b) => a.angle - b.angle); const delayByIdx = new Array(shape.points.length); for (let r = 0; r < order.length; r++) { const binIdx = Math.floor((r / Math.max(1, order.length)) * bins); delayByIdx[order[r].idx] = binIdx * interval + Math.random() * 90; } for (let i = 0; i < shape.points.length; i++) { const [u, v] = shape.points[i]; const pu = u + (Math.random() - 0.5) * 0.0008; const pv = v + (Math.random() - 0.5) * 0.0008; const px = box ? box.leftX + pu * box.w : width / 2; const py = box ? box.topY + pv * box.h : height / 2; phantoms.push({ baseX: px, baseY: py, x: px, y: py, vx: 0, vy: 0, kickAt: -1, kickVx: 0, kickVy: 0, phase: Math.random() * Math.PI * 2, speedJitter: 0.7 + Math.random() * 0.7, sizeJitter: 0.7 + Math.random() * 0.6, shimmerPhase: Math.random() * Math.PI * 2, shimmerSpeed: 0.5 + Math.random() * 1.5, brace: { u: pu, v: pv, partIdx: p, delayMs: delayByIdx[i], durationMs: DOT_DURATION_INITIAL, }, isPhantom: true, dotTT: 0, dispX: 0, dispY: 0, glow: 0, glowIdx: 0, orbitAngle: 0, }); } } else { for (let i = 0; i < shape.points.length; i++) { if (densityMult < 1 && Math.random() >= densityMult) continue; // 모바일 밀도 15%↓ const [u, v] = shape.points[i]; const sc = part.scatter || 0.002; for (let k = 0; k < PHANTOMS_PER_SAMPLE; k++) { const pu = u + (Math.random() - 0.5) * sc * 2; const pv = v + (Math.random() - 0.5) * sc * 2; const px = box ? box.leftX + pu * box.w : width / 2; const py = box ? box.topY + pv * box.h : height / 2; phantoms.push({ baseX: px, baseY: py, x: px, y: py, vx: 0, vy: 0, kickAt: -1, kickVx: 0, kickVy: 0, phase: Math.random() * Math.PI * 2, speedJitter: 0.7 + Math.random() * 0.7, sizeJitter: 0.7 + Math.random() * 0.6, shimmerPhase: Math.random() * Math.PI * 2, shimmerSpeed: 0.5 + Math.random() * 1.5, brace: { u: pu, v: pv, partIdx: p, // same ↘ wave as the recruits, so in-place dots // light up in step with the arriving meteors delayMs: Math.max(0, Math.min(1, (px + py) / (width + height))) * SWEEP_WINDOW_MS + Math.random() * 120, durationMs: DOT_DURATION_INITIAL, }, isPhantom: true, dotTT: 0, dispX: 0, dispY: 0, glow: 0, glowIdx: 0, orbitAngle: 0, }); } } } } for (let i = 0; i < phantoms.length; i++) bgDots.push(phantoms[i]); } /* ─── Wheel/touch driven stage navigation ─── Scroll is locked at the document level. Stages advance/regress via wheel events (and touch swipes on mobile). targetProgress jumps to the next integer stage; tick() lerps progress smoothly toward it. */ const WHEEL_DEBOUNCE_MS = 280; const WHEEL_MIN_DELTA = 8; // After arriving on the last stage, downward scroll stays captured for // this long — the inertia of the gesture that brought you here can't // immediately shove the page into the next section. const LAST_STAGE_HOLD_MS = 650; let lastWheelAt = 0; let reachedLastAt = Infinity; // Step indicator: which of the 4 dot stages is showing / how many remain. const stageDots = Array.from(document.querySelectorAll('#heroProgress i')); function updateStageDots() { const cur = Math.max(0, Math.min(STAGE_COUNT - 1, Math.round(targetProgress))); stageDots.forEach((el, i) => el.classList.toggle('is-active', i === cur)); } function tryAdvance(dir) { const next = Math.max(0, Math.min(STAGE_COUNT - 1, Math.round(targetProgress) + dir)); if (next === targetProgress) return false; targetProgress = next; reachedLastAt = next === STAGE_COUNT - 1 ? performance.now() : Infinity; updateStageDots(); scheduleAutoAdvance(); return true; } /* ── Auto-advance: stages roll forward every 5s without user input. Any manual advance (wheel/touch/keys) restarts the countdown via tryAdvance → scheduleAutoAdvance, so the timer never fights the user. After the last stage has shown for the same interval, the page glides down into the next section on its own. ── */ /* Used by the to-top button (sections.js): returning to the page top also rewinds the hero to its first stage. progress snaps (no spring) so intermediate stages don't flash by while the page scrolls up. */ window.heroReset = () => { targetProgress = 0; progress = 0; progressVel = 0; reachedLastAt = Infinity; updateStageDots(); autoAdvanceStopped = false; // deliberate restart → the show resumes scheduleAutoAdvance(); }; const AUTO_ADVANCE_MS = 5000; let autoAdvanceTimer = 0; // Once the user scrolls UP in the hero they've taken control — the // auto-show stays off until an explicit restart (to-top button). let autoAdvanceStopped = false; function stopAutoAdvance() { autoAdvanceStopped = true; clearTimeout(autoAdvanceTimer); } function scheduleAutoAdvance() { clearTimeout(autoAdvanceTimer); if (autoAdvanceStopped || reducedMotion) return; autoAdvanceTimer = setTimeout(() => { if (!atPageTop()) { scheduleAutoAdvance(); return; } // off-hero → retry later if (onLastStage()) { // Last stage has been on screen for a full interval → // leave the hero: glide down into the next section. if (lastStageSettled() && window.pageGlide) window.pageGlide.step(1); else scheduleAutoAdvance(); // still settling → retry return; } tryAdvance(1); // reschedules itself }, AUTO_ADVANCE_MS); } function lastStageSettled() { return performance.now() - reachedLastAt > LAST_STAGE_HOLD_MS; } function atPageTop() { return (window.scrollY || document.documentElement.scrollTop || 0) <= 2; } function onLastStage() { return Math.round(targetProgress) >= STAGE_COUNT - 1; } function onWheel(e) { if (reducedMotion) return; if (!atPageTop()) return; // below hero → pageGlide owns it const dir = e.deltaY > 0 ? 1 : -1; e.preventDefault(); if (dir < 0) stopAutoAdvance(); // user took control if (dir > 0 && onLastStage()) { // last stage → glide one section down, but only once the stage // has settled (so transition inertia can't skip it) if (lastStageSettled() && window.pageGlide) window.pageGlide.step(1); return; } const now = performance.now(); if (now - lastWheelAt < WHEEL_DEBOUNCE_MS) return; if (Math.abs(e.deltaY) < WHEEL_MIN_DELTA) return; if (tryAdvance(dir)) lastWheelAt = now; } let touchStartY = 0; let touchTriggered = false; function onTouchStart(e) { touchStartY = e.touches[0].clientY; touchTriggered = false; } function onTouchMove(e) { if (reducedMotion) return; if (!atPageTop()) return; // below hero → pageGlide owns it const dyProbe = touchStartY - e.touches[0].clientY; e.preventDefault(); if (dyProbe > 0 && onLastStage()) { if (!touchTriggered && dyProbe > 40 && lastStageSettled() && window.pageGlide) { touchTriggered = true; window.pageGlide.step(1); } return; } if (touchTriggered) return; const dy = dyProbe; if (Math.abs(dy) > 40) { if (dy < 0) stopAutoAdvance(); // user took control if (tryAdvance(dy > 0 ? 1 : -1)) { lastWheelAt = performance.now(); touchTriggered = true; } } } function onKeyDown(e) { if (reducedMotion) return; if (e.key === 'ArrowDown' || e.key === 'PageDown' || e.key === ' ') { if (!atPageTop()) return; // below hero → pageGlide owns it e.preventDefault(); if (onLastStage()) { if (lastStageSettled() && window.pageGlide) window.pageGlide.step(1); return; } tryAdvance(1); } else if (e.key === 'ArrowUp' || e.key === 'PageUp') { if (!atPageTop()) return; stopAutoAdvance(); // user took control tryAdvance(-1); e.preventDefault(); } } function updateActiveText() { if (!initialReleased) return; // hold off until 2s have passed const idx = Math.round(progress); const clamped = Math.max(0, Math.min(STAGE_COUNT - 1, idx)); const dist = Math.abs(progress - clamped); const shouldShow = dist < 0.35; if (shouldShow && activeStage !== clamped) { textStages.forEach((el, i) => el.classList.toggle('is-active', i === clamped)); hero.setAttribute('data-stage', String(clamped)); activeStage = clamped; lastStageActivatedAt = performance.now(); bracesActiveAt = Infinity; // Morph transition: assign new targets immediately — dots glide // from wherever they are (old shape or grid) into the new shape // while the old in-place phantoms crossfade out. No explosion. const wasMorph = assignedStage >= 0; assignBraceDots(clamped); assignedStage = clamped; pendingAssignStage = -1; pendingAssignAt = Infinity; // On morphs the color must travel WITH the gliding dots, so skip // the text→gather delay gate (it exists for the first entrance). if (wasMorph) lastStageActivatedAt -= TEXT_TO_BRACE_DELAY; } else if (!shouldShow && activeStage !== -1) { textStages.forEach(el => el.classList.remove('is-active')); activeStage = -1; } } /* ─── Mouse ─── */ function onPointerMove(e) { const rect = canvas.getBoundingClientRect(); mouse.x = e.clientX - rect.left; mouse.y = e.clientY - rect.top; mouse.inside = true; } function onPointerLeave() { mouse.inside = false; mouse.x = -9999; mouse.y = -9999; } /* ─── Helpers ─── */ function lerp(a, b, t) { return a + (b - a) * t; } function easeInOutCubic(t) { return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2; } /* ─── Main loop ─── */ function tick(now) { if (!initialReleased && now >= initialReleaseAt) initialReleased = true; // Stiff spring so a stage change starts moving the moment the wheel // fires instead of easing in lazily. progressVel += (targetProgress - progress) * 0.105; progressVel *= 0.72; progress += progressVel; // Deferred assign: fire after explosion has had time to spread if (pendingAssignStage !== -1 && now >= pendingAssignAt) { assignBraceDots(pendingAssignStage); assignedStage = pendingAssignStage; pendingAssignStage = -1; pendingAssignAt = Infinity; } // Per-stage delay between text appearing and dots starting to gather. const bracesAllowed = activeStage !== -1 && now >= lastStageActivatedAt + TEXT_TO_BRACE_DELAY; const wantBraces = bracesAllowed && shapesReady && assignedStage === activeStage; if (bracesActiveAt === Infinity && bracesAllowed && shapesReady) { bracesActiveAt = now; } const elapsed = bracesActiveAt === Infinity ? -1 : now - bracesActiveAt; // Pre-compute each part's canvas box once per frame for the active stage. const activeConfig = activeStage >= 0 ? STAGE_CONFIGS[activeStage] : null; const partBoxes = activeConfig ? activeConfig.map(partBox) : null; // ─ Cursor velocity + ripple emission ─ if (mouse.inside) { mouse.vx = mouse.x - mouse.px; mouse.vy = mouse.y - mouse.py; const cspd = Math.sqrt(mouse.vx * mouse.vx + mouse.vy * mouse.vy); if (false && cspd > 1.5 && now - rippleLastAt > 65) { ripples.push({ x: mouse.x, y: mouse.y, r: 0, maxR: 90 + cspd * 7 }); rippleLastAt = now; } } else { mouse.vx = 0; mouse.vy = 0; } mouse.px = mouse.x; mouse.py = mouse.y; // Eased cursor presence: field modes fade in/out instead of popping. cursorEase += ((mouse.inside ? 1 : 0) - cursorEase) * 0.06; if (mouse.inside) { lastMx = mouse.x; lastMy = mouse.y; } // Inertial glide: parallax follows this trailing cursor, so motion // keeps drifting softly for a beat after the mouse stops. if (lastMx > -9000) { if (pMx === null) { pMx = lastMx; pMy = lastMy; } else { pMx += (lastMx - pMx) * 0.05; // slower trail — air-like elegance pMy += (lastMy - pMy) * 0.05; } } for (let j = ripples.length - 1; j >= 0; j--) { ripples[j].r += 3.5; if (ripples[j].r > ripples[j].maxR) ripples.splice(j, 1); } // ─ Update positions ─ for (let i = 0; i < bgDots.length; i++) { const d = bgDots[i]; const tt = (now * BG_FLOAT_SPEED * d.speedJitter) + d.phase; const driftX = Math.cos(tt) * BG_FLOAT_AMPLITUDE; const driftY = Math.sin(tt * 1.13) * BG_FLOAT_AMPLITUDE; // Per-dot dotTT comes from absolute-time scheduling: // target = (elapsed - delayMs) / durationMs (when active) // target = 0 (between stages) // d.dotTT smooths toward target so stage on/off is gentle. let dotTT_target = 0; if (wantBraces && d.brace && elapsed >= 0) { const dotElapsed = elapsed - d.brace.delayMs; if (dotElapsed > 0) { dotTT_target = Math.min(1, dotElapsed / d.brace.durationMs); } } d.dotTT += (dotTT_target - d.dotTT) * DOT_FADE_RATE; const dotTT = d.dotTT; // Anchor logic: // • phantom dot → always at the brace target // • recruited bg dot → grid spot lerped toward brace target by dotTT // • plain bg dot → grid spot let anchorX, anchorY; const part = d.brace && partBoxes ? partBoxes[d.brace.partIdx] : null; if (d.isPhantom && part) { anchorX = part.leftX + d.brace.u * part.w; anchorY = part.topY + d.brace.v * part.h; } else if (d.brace && part) { const bx = part.leftX + d.brace.u * part.w; const by = part.topY + d.brace.v * part.h; anchorX = d.baseX + (bx - d.baseX) * dotTT; anchorY = d.baseY + (by - d.baseY) * dotTT; } else { anchorX = d.baseX; anchorY = d.baseY; } // Drift fades out as the dot reaches its brace target so the line // stays crisp; background dots keep their full drift. const driftScale = d.brace ? (1 - dotTT) : 1; let fx = anchorX + driftX * driftScale; let fy = anchorY + driftY * driftScale; // apply staggered explosion kick if (d.kickAt > 0 && now >= d.kickAt) { d.vx = d.kickVx; d.vy = d.kickVy; d.kickAt = -1; } // ─ Cursor interaction (velocity-based modes) ─ // lens/spotlight/orbit/parallax are displacement-field modes and are // handled after integration — they never inject velocity. if (mouse.inside) { const cx = d.x - mouse.x, cy = d.y - mouse.y; const dist2 = cx * cx + cy * cy; const R = 180; if (dist2 < R * R && dist2 > 1) { const dist = Math.sqrt(dist2); const falloff = Math.pow(1 - dist / R, 1.2); const jitter = d.speedJitter || 1; if (cursorMode === 'repel') { // 밀어내기 const s = 3.5 * falloff * jitter; d.vx += (cx / dist) * s; d.vy += (cy / dist) * s; } else if (cursorMode === 'attract') { // 끌어당기기 const s = 2.8 * falloff * jitter; d.vx += (-cx / dist) * s; d.vy += (-cy / dist) * s; } else if (cursorMode === 'vortex') { // 소용돌이: 접선 + 인력 혼합 const s = 2.2 * falloff * jitter; d.vx += (-cy / dist) * s * 0.7 + (-cx / dist) * s * 0.3; d.vy += (cx / dist) * s * 0.7 + (-cy / dist) * s * 0.3; } else if (cursorMode === 'wave') { // 파동: 커서 이동 방향으로 밀기 const mspd = Math.sqrt(mouse.vx * mouse.vx + mouse.vy * mouse.vy); if (mspd > 0.5) { const s = 2.5 * falloff * jitter; d.vx += (mouse.vx / mspd) * s; d.vy += (mouse.vy / mspd) * s; } } } } const hasVelocity = d.vx * d.vx + d.vy * d.vy > 0.04; const gatherReady = d.brace && (d.gatherAt < 0 || now >= d.gatherAt); if (gatherReady) { // spring toward actual brace target — flies in from scattered position let bx = fx, by = fy; if (part) { bx = part.leftX + d.brace.u * part.w; by = part.topY + d.brace.v * part.h; } // distance-adaptive spring: stronger pull when far, gentle near target const distToBrace = Math.sqrt((bx - d.x) ** 2 + (by - d.y) ** 2); const k = 0.04 + Math.min(distToBrace / 800, 0.06) + dotTT * 0.02; const damp = distToBrace < 20 ? 0.78 : 0.92; // Curl steers the approach sideways while still far away and // fades out near the target, so dots sweep in along an arc and // settle precisely — never orbiting forever. const swirl = (d.curl || 0) * Math.min(distToBrace / 420, 1); d.vx = d.vx * damp + (bx - d.x) * k + (by - d.y) * k * swirl; d.vy = d.vy * damp + (by - d.y) * k - (bx - d.x) * k * swirl; d.x += d.vx; d.y += d.vy; } else if (hasVelocity) { // free coast — pure damping, no spring to grid position d.vx *= 0.93; d.vy *= 0.93; d.x += d.vx; d.y += d.vy; } else { const hx = fx - d.x, hy = fy - d.y; if (hx * hx + hy * hy > 4) { // released / waiting dot far from its anchor — glide home, // never snap (the old teleport read as flicker) d.x += hx * 0.07; d.y += hy * 0.07; d.vx = 0; d.vy = 0; } else { d.x = fx; d.y = fy; d.vx = 0; d.vy = 0; } } /* ─ Displacement-field cursor modes (lens/spotlight/orbit/parallax) ─ These never inject velocity. Each frame computes a target offset that is a pure function of the cursor, and the dot's rendered offset eases toward it — everything settles the moment the cursor rests, and glides back (never snaps) when it leaves. */ let tDX = 0, tDY = 0, tGlow = 0; if (cursorEase > 0.002) { const mx = mouse.inside ? mouse.x : lastMx; const my = mouse.inside ? mouse.y : lastMy; if (cursorMode === 'lens') { // 렌즈: 커서 주변이 볼록렌즈처럼 부풀어 오름 + 은은한 점등 const ox = d.x - mx, oy = d.y - my; const dist = Math.sqrt(ox * ox + oy * oy); if (dist < 200) { const t = 1 - dist / 200; const ease = t * t * (3 - 2 * t); // smoothstep const safe = Math.max(dist, 8); tDX = (ox / safe) * 26 * ease; tDY = (oy / safe) * 26 * ease; tGlow = ease * 0.35; } } else if (cursorMode === 'spotlight') { // 스포트라이트: 위치는 그대로, 커서 주변만 오렌지로 점등 const ox = d.x - mx, oy = d.y - my; const dist = Math.sqrt(ox * ox + oy * oy); if (dist < 170) { const t = 1 - dist / 170; tGlow = t * t * (3 - 2 * t); } } else if (cursorMode === 'orbit') { // 궤도(정제): 힘 주입 대신 회전장 — 반경 유지 공전, 떠나면 되감기 const ox = d.x - mx, oy = d.y - my; const dist = Math.sqrt(ox * ox + oy * oy); if (mouse.inside && dist < 200 && dist > 1) { const t = 1 - dist / 200; d.orbitAngle += 0.02 * t * t * (3 - 2 * t); // coherent — no per-dot jitter tGlow = t * 0.3; } else { d.orbitAngle *= 0.93; // smooth unwind, no snap } if (d.orbitAngle > 0.0005) { const ca = Math.cos(d.orbitAngle), sa = Math.sin(d.orbitAngle); tDX = ox * ca - oy * sa - ox; tDY = ox * sa + oy * ca - oy; } } else if (cursorMode === 'parallax' && pMx !== null) { // 패럴랙스: 깊이 3층 분리 — 배경 격자(얕음) / 도형 도트(깊음) / // DOM 텍스트(고정). 입력은 관성 글라이드 커서(pMx/pMy)라 // 마우스가 멈춘 뒤에도 한 박자 부드럽게 따라온다. const jit = (d.sizeJitter - 0.7) / 0.6; const z = (d.brace || d.isPhantom) ? 0.7 + jit * 0.15 : 0.28 + jit * 0.1; tDX = -((pMx - width / 2) / (width / 2)) * 10 * z; tDY = -((pMy - height / 2) / (height / 2)) * 8 * z; // 시선 글로우: 커서 주변에만 아주 옅은 오렌지 틴트(자극 최소) const gx = d.x - pMx, gy = d.y - pMy; const g2 = gx * gx + gy * gy; if (g2 < 150 * 150) { const t = 1 - Math.sqrt(g2) / 150; tGlow = t * t * (3 - 2 * t) * 0.12; } } } if (cursorMode !== 'orbit') d.orbitAngle = 0; d.dispX += (tDX * cursorEase - d.dispX) * 0.085; d.dispY += (tDY * cursorEase - d.dispY) * 0.085; d.glow += (tGlow * cursorEase - d.glow) * 0.10; d.glowIdx = Math.min(COLOR_LEVELS - 1, (d.glow * COLOR_LEVELS) | 0); // Bucket indices for the cached LUT styles. const shimVal = (Math.sin(now * SHIMMER_SPEED * d.shimmerSpeed + d.shimmerPhase) + 1) * 0.5; d.shimIdx = Math.min(SHIMMER_LEVELS - 1, (shimVal * SHIMMER_LEVELS) | 0); d.colorIdx = Math.min(COLOR_LEVELS - 1, (dotTT * COLOR_LEVELS) | 0); } // ─ Draw ─ ctx.clearRect(0, 0, width, height); // Dots scale up slightly when moving fast (Antigravity-style velocity pulse). // R is still the base; per-dot radius computed inline below. const R = DOT_RADIUS * (width <= 768 ? 0.675 : 1); // 모바일은 점 굵기 ↓ // Above this speed² a dot is drawn as a comet streak along its velocity // (antigravity.google-style motion trail) instead of a circle. const STREAK_SPD2 = 2.0; // 1) Background dots — gray, alpha shimmers via SHIMMER_LEVELS buckets. for (let s = 0; s < SHIMMER_LEVELS; s++) { ctx.fillStyle = LUT.bg[s]; ctx.beginPath(); for (let i = 0; i < bgDots.length; i++) { const d = bgDots[i]; if (d.brace || d.isPhantom) continue; if (d.shimIdx !== s) continue; if (d.glow > 0.04) continue; // drawn in the lit pass below const spd2 = d.vx * d.vx + d.vy * d.vy; if (spd2 > STREAK_SPD2) continue; // drawn as a streak below const r = R * (1 + Math.min(spd2 / 600, 1.8)); ctx.moveTo(d.x + d.dispX + r, d.y + d.dispY); ctx.arc(d.x + d.dispX, d.y + d.dispY, r, 0, Math.PI * 2); } ctx.fill(); } // 1b) Cursor-lit background dots — tinted gray→orange by glow bucket // (reuses the brace LUT) and slightly enlarged. for (let c = 0; c < COLOR_LEVELS; c++) { for (let s = 0; s < SHIMMER_LEVELS; s++) { ctx.fillStyle = LUT.brace[c * SHIMMER_LEVELS + s]; ctx.beginPath(); for (let i = 0; i < bgDots.length; i++) { const d = bgDots[i]; if (d.brace || d.isPhantom) continue; if (d.glow <= 0.04) continue; if (d.glowIdx !== c || d.shimIdx !== s) continue; const r = R * (1 + d.glow * 1.1); ctx.moveTo(d.x + d.dispX + r, d.y + d.dispY); ctx.arc(d.x + d.dispX, d.y + d.dispY, r, 0, Math.PI * 2); } ctx.fill(); } } // 2) Recruited brace dots — color blended gray→orange by dotTT bucket, // alpha further modulated by shimmer bucket. for (let c = 0; c < COLOR_LEVELS; c++) { for (let s = 0; s < SHIMMER_LEVELS; s++) { ctx.fillStyle = LUT.brace[c * SHIMMER_LEVELS + s]; ctx.beginPath(); for (let i = 0; i < bgDots.length; i++) { const d = bgDots[i]; if (!d.brace || d.isPhantom) continue; if (d.colorIdx !== c || d.shimIdx !== s) continue; const spd2 = d.vx * d.vx + d.vy * d.vy; if (spd2 > STREAK_SPD2) continue; // drawn as a streak below const r = R * (1 + Math.min(spd2 / 600, 1.8)) * (1 + d.glow * 0.6); ctx.moveTo(d.x + d.dispX + r, d.y + d.dispY); ctx.arc(d.x + d.dispX, d.y + d.dispY, r, 0, Math.PI * 2); } ctx.fill(); } } // 3) Phantom dots — pure orange, alpha = dotTT * shimmer. for (let c = 0; c < COLOR_LEVELS; c++) { for (let s = 0; s < SHIMMER_LEVELS; s++) { ctx.fillStyle = LUT.phantom[c * SHIMMER_LEVELS + s]; ctx.beginPath(); for (let i = 0; i < bgDots.length; i++) { const d = bgDots[i]; if (!d.isPhantom) continue; if (d.dotTT <= 0.01) continue; if (d.colorIdx !== c || d.shimIdx !== s) continue; const r = R * (1 + d.glow * 0.6); ctx.moveTo(d.x + d.dispX + r, d.y + d.dispY); ctx.arc(d.x + d.dispX, d.y + d.dispY, r, 0, Math.PI * 2); } ctx.fill(); } } // 4) Comet streaks — fast-moving dots render as short motion trails // along their velocity (round caps), reusing the same color LUTs. ctx.lineWidth = R * 1.7; ctx.lineCap = 'round'; for (let s = 0; s < SHIMMER_LEVELS; s++) { ctx.strokeStyle = LUT.bg[s]; ctx.beginPath(); for (let i = 0; i < bgDots.length; i++) { const d = bgDots[i]; if (d.brace || d.isPhantom) continue; if (d.shimIdx !== s) continue; const spd2 = d.vx * d.vx + d.vy * d.vy; if (spd2 <= STREAK_SPD2) continue; const spd = Math.sqrt(spd2); const st = Math.min(2 + spd * 1.8, 12); const px = d.x + d.dispX, py = d.y + d.dispY; ctx.moveTo(px - (d.vx / spd) * st, py - (d.vy / spd) * st); ctx.lineTo(px, py); } ctx.stroke(); } for (let c = 0; c < COLOR_LEVELS; c++) { for (let s = 0; s < SHIMMER_LEVELS; s++) { ctx.strokeStyle = LUT.brace[c * SHIMMER_LEVELS + s]; ctx.beginPath(); for (let i = 0; i < bgDots.length; i++) { const d = bgDots[i]; if (!d.brace || d.isPhantom) continue; if (d.colorIdx !== c || d.shimIdx !== s) continue; const spd2 = d.vx * d.vx + d.vy * d.vy; if (spd2 <= STREAK_SPD2) continue; const spd = Math.sqrt(spd2); const st = Math.min(2 + spd * 1.8, 12); const px = d.x + d.dispX, py = d.y + d.dispY; ctx.moveTo(px - (d.vx / spd) * st, py - (d.vy / spd) * st); ctx.lineTo(px, py); } ctx.stroke(); } } updateActiveText(); if (!reducedMotion) requestAnimationFrame(tick); } /* ─── Init ─── */ function init() { resize(); progress = 0; progressVel = 0; targetProgress = 0; activeStage = -1; // no stage yet hero.removeAttribute('data-stage'); textStages.forEach(el => el.classList.remove('is-active')); updateStageDots(); initialReleaseAt = reducedMotion ? performance.now() : performance.now() + INITIAL_DELAY; scheduleAutoAdvance(); requestAnimationFrame(tick); const SD = window.SHAPE_DATA || window.BRACE_DATA; if (!SD) { console.error('braces.js did not set window.SHAPE_DATA'); return; } for (const key of Object.keys(SD)) { const data = SD[key]; try { if (Array.isArray(data.points)) { // Pre-baked points (e.g. extracted from an image). Use directly. shapes[key] = { points: data.points, aspect: data.aspect }; } else { shapes[key] = samplePointsFromPath(data.d, data.w, data.h, Math.max(data.samples || 0, BRACE_SAMPLES_PER_SIDE), { stroke: data.stroke, lineWidth: data.lineWidth, lineCap: data.lineCap, }); } } catch (e) { console.error(`shape "${key}":`, e); } } shapesReady = Object.keys(shapes).length > 0; // If a stage has already activated while shapes were loading, recruit now. if (activeStage >= 0) { assignBraceDots(activeStage); assignedStage = activeStage; } } window.addEventListener('resize', () => { dpr = Math.min(window.devicePixelRatio || 1, 2); resize(); }); window.addEventListener('wheel', onWheel, { passive: false }); window.addEventListener('touchstart', onTouchStart, { passive: false }); window.addEventListener('touchmove', onTouchMove, { passive: false }); window.addEventListener('keydown', onKeyDown); canvas.addEventListener('pointermove', onPointerMove); canvas.addEventListener('pointerleave', onPointerLeave); init(); })(); (() => { const reducedMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; /* ── Page glide: one smooth snap per scroll gesture ── Snap targets: hero top → orbit section → each of the 5 stats phases. The hero owns the wheel while the page is at the very top (its four dot stages advance in place); once the last stage settles it calls pageGlide.step(1) to hand over. Below the top, the handlers here capture every gesture and glide exactly one target per input. */ window.pageGlide = (() => { let animating = false; function targets() { const vh = window.innerHeight; const orbitTop = document.getElementById('orbitSection').offsetTop; const stats = document.getElementById('statsSection'); const span = stats.offsetHeight - vh; const list = [0, orbitTop]; for (let k = 0; k < 5; k++) { list.push(Math.round(stats.offsetTop + span * ((k + 0.5) / 5))); } const maxY = document.documentElement.scrollHeight - vh; const news = document.getElementById('newsSection'); if (news) list.push(Math.min(news.offsetTop, maxY)); const footer = document.getElementById('footer'); if (footer) list.push(Math.min(footer.offsetTop, maxY)); return list; } function currentIndex(T) { const y = window.scrollY || 0; let best = 0, bd = Infinity; T.forEach((ty, i) => { const d = Math.abs(ty - y); if (d < bd) { bd = d; best = i; } }); return best; } function glideTo(targetY, dur, soak) { if (reducedMotion) { window.scrollTo(0, targetY); animating = false; return; } animating = true; const startY = window.scrollY || 0; const dist = targetY - startY; const DUR = dur || 600; const t0 = performance.now(); const ease = t => (t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2); function frame(now) { const t = Math.min(1, (now - t0) / DUR); window.scrollTo(0, startY + dist * ease(t)); if (t < 1) requestAnimationFrame(frame); else setTimeout(() => { animating = false; }, soak); // soak up gesture tail } requestAnimationFrame(frame); } // Stats phases are targets[2..6]; hops between them are short, so // they glide faster (and unlock sooner) than full-section moves — // the wheel feels snappy while scrubbing through the five stats. const STATS_FIRST = 2, STATS_LAST = 6; function step(dir) { if (animating) return true; const T = targets(); const i = currentIndex(T); const ni = Math.max(0, Math.min(T.length - 1, i + dir)); if (ni === i) return false; const inStats = Math.min(i, ni) >= STATS_FIRST && Math.max(i, ni) <= STATS_LAST; glideTo(T[ni], inStats ? 360 : 600, inStats ? 40 : 120); return true; } return { step, get animating() { return animating; } }; })(); // Below the hero, every gesture snaps exactly one target. window.addEventListener('wheel', (e) => { if (reducedMotion) return; if ((window.scrollY || 0) <= 2) return; // hero controller owns the top e.preventDefault(); if (window.pageGlide.animating) return; if (Math.abs(e.deltaY) < 8) return; window.pageGlide.step(e.deltaY > 0 ? 1 : -1); }, { passive: false }); window.addEventListener('keydown', (e) => { if (reducedMotion) return; if ((window.scrollY || 0) <= 2) return; if (e.key === 'ArrowDown' || e.key === 'PageDown' || e.key === ' ') { e.preventDefault(); window.pageGlide.step(1); } else if (e.key === 'ArrowUp' || e.key === 'PageUp') { e.preventDefault(); window.pageGlide.step(-1); } }); let glideTouchY = 0; window.addEventListener('touchstart', (e) => { glideTouchY = e.touches[0].clientY; }, { passive: true }); window.addEventListener('touchmove', (e) => { if (reducedMotion) return; if ((window.scrollY || 0) <= 2) return; e.preventDefault(); const dy = glideTouchY - e.touches[0].clientY; if (Math.abs(dy) > 40 && !window.pageGlide.animating) { glideTouchY = e.touches[0].clientY; window.pageGlide.step(dy > 0 ? 1 : -1); } }, { passive: false }); /* ── News carousel: arrows step one card at a time ── */ const newsTrack = document.getElementById('newsTrack'); if (newsTrack) { const cardStep = () => { const card = newsTrack.querySelector('.news-card'); return card ? card.getBoundingClientRect().width + 40 : 600; }; document.querySelector('.news-prev').addEventListener('click', () => newsTrack.scrollBy({ left: -cardStep(), behavior: reducedMotion ? 'auto' : 'smooth' })); document.querySelector('.news-next').addEventListener('click', () => newsTrack.scrollBy({ left: cardStep(), behavior: reducedMotion ? 'auto' : 'smooth' })); // Always present the first card in full on initial render. newsTrack.scrollLeft = 0; } /* Header dark-section inversion and the to-top button live in the shared chrome section at the end of this bundle. */ /* ── Orbit section ── Gray ring draws at its own pace; nodes pop 보안→웹에디터→협업→AI every 1.5s, each with a star sparkle. An orange line grows from 보안 along the ring, reaching each node exactly as it appears; after AI it closes the full circle. Hover/click on a node grows its label and opens the related panel inside the ring (click pins it). */ const orbit = document.getElementById('orbitSection'); if (orbit) { const progress = orbit.querySelector('.orbit-progress'); const track = orbit.querySelector('.orbit-track'); // Measure the real path length: the old hardcoded 1823 undershot it, // so the dash never reached back to the start point and the closed // ring showed a small gap at the seam. const RING = track.getTotalLength(); // Translucent head layers (DOM order: far, mid, near) — each leads // the solid line by this many px so the tip fades out in steps. const tips = Array.from(orbit.querySelectorAll('.orbit-progress-tip')); const TIP_LEAD = [66, 44, 22]; [track, progress, ...tips].forEach(p => { p.style.strokeDasharray = RING; p.style.strokeDashoffset = RING; }); // exact CCW fractions from 보안: 웹에디터 140°, 협업 196°, AI 266°, close const FRACS = [140 / 360, 196 / 360, 266 / 360, 1.0]; const STEP = 1000; // keep in sync with node --d delays (index.html) // and the .orbit-progress 1s transition (CSS) // Snap every node dead-center onto the ring: positions come from the // path geometry itself, so the progress line tip and the dots always // coincide regardless of rounding or viewport size. const NODE_FRACS = { security: 0, editor: FRACS[0], collab: FRACS[1], ai: FRACS[2] }; let rotOffset = 0; // planetary drift along the ring (0..1) function placeNodes() { const L = track.getTotalLength(); orbit.querySelectorAll('.orbit-node').forEach(n => { const f = (NODE_FRACS[n.dataset.node] + rotOffset) % 1; const p = track.getPointAtLength(L * f); n.style.left = (p.x / 720 * 100).toFixed(3) + '%'; n.style.top = (p.y / 720 * 100).toFixed(3) + '%'; }); } placeNodes(); window.addEventListener('resize', placeNodes); /* Planetary rotation: once the intro completes, the four dots drift slowly along the ring (full revolution ≈ 80s). Paused while a panel is open / a node is hovered so hit targets stay put. */ const ROTATION_PERIOD_MS = 80000; function startRotation() { if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return; let lastT = 0; function rotate(now) { if (!lastT) lastT = now; const dt = now - lastT; lastT = now; if (!orbit.classList.contains('has-active')) { rotOffset = (rotOffset + dt / ROTATION_PERIOD_MS) % 1; placeNodes(); } requestAnimationFrame(rotate); } requestAnimationFrame(rotate); } const io = new IntersectionObserver((entries) => { for (const en of entries) { if (en.isIntersecting) { orbit.classList.add('is-played'); // inline offset (set above) overrides the CSS rule, so the // gray track's draw-in is released here instead track.style.strokeDashoffset = 0; if (reducedMotion) { progress.style.strokeDashoffset = 0; tips.forEach((tip) => { tip.style.strokeDashoffset = 0; }); orbit.classList.add('is-complete'); io.disconnect(); break; } FRACS.forEach((f, i) => { setTimeout(() => { const off = RING * (1 - f); progress.style.strokeDashoffset = off.toFixed(1); tips.forEach((tp, k) => { tp.style.strokeDashoffset = Math.max(0, off - TIP_LEAD[k]).toFixed(1); }); }, i * STEP + 80); }); setTimeout(() => { orbit.classList.add('is-complete'); startRotation(); }, FRACS.length * STEP + 300); io.disconnect(); break; } } }, { threshold: 0.45 }); io.observe(orbit); const nodes = Array.from(orbit.querySelectorAll('.orbit-node')); const panels = Array.from(orbit.querySelectorAll('.orbit-panel')); let pinned = null; function setActive(key) { nodes.forEach(n => { const active = !!key && n.dataset.node === key; n.classList.toggle('is-active', active); n.setAttribute('aria-expanded', active ? 'true' : 'false'); }); panels.forEach(p => { const active = !!key && p.dataset.panel === key; p.classList.toggle('is-open', active); p.setAttribute('aria-hidden', active ? 'false' : 'true'); }); orbit.classList.toggle('has-active', !!key); if (key) orbit.classList.add('was-explored'); // retire the click hint } nodes.forEach(n => { const key = n.dataset.node; n.addEventListener('mouseenter', () => setActive(key)); n.addEventListener('mouseleave', () => { if (!pinned) setActive(null); }); n.addEventListener('focus', () => setActive(key)); n.addEventListener('blur', () => { if (!pinned) setActive(null); }); n.addEventListener('click', () => { pinned = (pinned === key) ? null : key; setActive(pinned); }); }); orbit.addEventListener('keydown', (event) => { if (event.key !== 'Escape') return; pinned = null; setActive(null); }); } /* ── Stats section: 5 scroll phases (intro + 4 stats) ── Phase 0 shows only the headline + smile mark. Each later phase swaps the left copy, and the number counts up by TIME (촤르륵, ~1.1s rAF) the moment its phase becomes active — not scrubbed by scroll position. */ const stats = document.getElementById('statsSection'); if (stats) { const sticky = stats.querySelector('.stats-sticky'); const intro = stats.querySelector('.stats-intro'); const texts = Array.from(stats.querySelectorAll('.stat-text')); const icons = Array.from(stats.querySelectorAll('.stat-icon')); const numberEl = stats.querySelector('.stat-number'); const unitEl = stats.querySelector('.stat-unit'); const DATA = [ { value: 1, unit: '위' }, { value: 32, unit: '년' }, { value: 129, unit: '개국' }, { value: 30000, unit: '고객사' }, ]; const PHASES = DATA.length + 1; const phaseProgress = stats.querySelector('#statsProgress'); const phaseDots = Array.from(stats.querySelectorAll('#statsProgress i')); let raf = 0; let lastPhase = -1; let countRaf = 0; /* Heartbeat pulse: the moment a count-up lands on its target, one soft ring ripples gently outward from the number and fades — like the pulse around a heart-rate indicator. Plays once. */ const numberWrap = stats.querySelector('.stat-number-wrap'); function firePulse() { const old = numberWrap.querySelector('.stat-pulse'); if (old) old.remove(); const p = document.createElement('i'); p.className = 'stat-pulse'; numberWrap.appendChild(p); setTimeout(() => p.remove(), 1800); } function animateCount(statIdx) { cancelAnimationFrame(countRaf); numberEl.classList.remove('is-landed'); // re-arm the landing hit const d = DATA[statIdx]; const DURATION = 1100; const t0 = performance.now(); unitEl.textContent = d.unit; // Reserve the final string's width before counting: the grid // column (1fr → minmax(auto, 1fr)) sizes itself once, up front, // instead of chasing the growing digits every frame — which // shook the icon above. offsetWidth ignores the scale transform. numberEl.textContent = d.value.toLocaleString('en-US'); numberWrap.style.minWidth = numberEl.offsetWidth + 'px'; function step(now) { const t = Math.min(1, (now - t0) / DURATION); const k = 1 - Math.pow(1 - t, 3); // easeOutCubic numberEl.textContent = Math.round(d.value * k).toLocaleString('en-US'); numberEl.style.transform = `scale(${(0.78 + 0.22 * k).toFixed(4)})`; if (t < 1) countRaf = requestAnimationFrame(step); else { firePulse(); // Landing hit: CSS bounce + glow (animations outrank the // inline per-frame transform, so no fight with the loop). numberEl.classList.add('is-landed'); } } countRaf = requestAnimationFrame(step); } function update() { raf = 0; const vh = window.innerHeight; const rect = stats.getBoundingClientRect(); const total = Math.max(1, rect.height - vh); const p = Math.max(0, Math.min(1, -rect.top / total)); const phase = Math.min(PHASES - 1, (p * PHASES) | 0); intro.classList.toggle('is-active', phase === 0); sticky.classList.toggle('show-stats', phase >= 1); texts.forEach((el, i) => el.classList.toggle('is-active', i === phase - 1)); icons.forEach((el, i) => el.classList.toggle('is-active', i === phase - 1)); phaseDots.forEach((el, i) => el.classList.toggle('is-active', i === phase)); // fixed-position indicator: only while the sticky viewport is pinned phaseProgress.classList.toggle('is-visible', rect.top <= 0 && rect.bottom >= vh); if (phase !== lastPhase) { if (phase >= 1) animateCount(phase - 1); lastPhase = phase; } } function onScroll() { if (!raf) raf = requestAnimationFrame(update); } window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', onScroll); update(); } })(); } } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', boot); } else { boot(); } })(); /* ════ Shared chrome + about-page controllers (every page) ════ */ (function () { function start() { /* ── Shared page chrome — identical on every page ── 1. Header: always visible; inverts (white-on-dark) while any section marked data-header-dark sits under it, so the menu stays legible. 2. To-top button: appears past half a viewport; its outer ring fills with scroll progress; click glides back to the very top. */ (function () { const header = document.querySelector('.header'); const navButton = header && header.querySelector('.nav-burger'); const nav = header && header.querySelector('#site-gnb'); if (header && navButton && nav && navButton.dataset.ready !== 'true') { navButton.dataset.ready = 'true'; const media = window.matchMedia('(max-width: 768px)'); const links = Array.from(nav.querySelectorAll('a')); links.forEach((link) => { try { const linkUrl = new URL(link.href, window.location.href); const currentPath = (window.location.pathname || '/').replace(/\/+$/, '') || '/'; const linkPath = linkUrl.pathname.replace(/\/+$/, '') || '/'; if (linkUrl.origin === window.location.origin && linkPath === currentPath) { link.classList.add('is-current'); link.setAttribute('aria-current', 'page'); } } catch (e) {} }); function setNavEnabled(enabled) { if ('inert' in nav) { nav.inert = !enabled; } else { links.forEach((link) => { if (!link.hasAttribute('data-nav-tabindex')) { link.setAttribute('data-nav-tabindex', link.getAttribute('tabindex') || ''); } const old = link.getAttribute('data-nav-tabindex'); if (enabled) { if (old) link.setAttribute('tabindex', old); else link.removeAttribute('tabindex'); } else { link.setAttribute('tabindex', '-1'); } }); } } function syncNav(open) { const mobile = media.matches; open = Boolean(open && mobile); navButton.setAttribute('aria-expanded', open ? 'true' : 'false'); navButton.setAttribute('aria-label', open ? '메뉴 닫기' : '메뉴 열기'); header.classList.toggle('is-nav-open', open); document.body.classList.toggle('nav-open', open); if (mobile) { nav.setAttribute('aria-hidden', open ? 'false' : 'true'); setNavEnabled(open); } else { nav.removeAttribute('aria-hidden'); setNavEnabled(true); } } function closeNav(restoreFocus) { if (navButton.getAttribute('aria-expanded') !== 'true') return; syncNav(false); if (restoreFocus) navButton.focus(); } navButton.addEventListener('click', () => { syncNav(navButton.getAttribute('aria-expanded') !== 'true'); }); document.addEventListener('click', (event) => { if (navButton.getAttribute('aria-expanded') === 'true' && !header.contains(event.target)) closeNav(true); }, true); document.addEventListener('keydown', (event) => { if (event.key === 'Escape') closeNav(true); }); links.forEach((link) => link.addEventListener('click', () => closeNav(false))); const onMediaChange = () => syncNav(false); if (media.addEventListener) media.addEventListener('change', onMediaChange); else media.addListener(onMediaChange); syncNav(false); } const main = document.querySelector('main'); if (main && !document.getElementById('main-content')) main.id = 'main-content'; const darkSections = Array.from(document.querySelectorAll('[data-header-dark]')); if (header && darkSections.length) { const HEADER_MID = 40; // vertical midpoint of the 80px bar function updateHeaderTheme() { const dark = darkSections.some(sec => { const r = sec.getBoundingClientRect(); return r.top <= HEADER_MID && r.bottom >= HEADER_MID; }); header.classList.toggle('is-inverted', dark); } window.addEventListener('scroll', updateHeaderTheme, { passive: true }); window.addEventListener('resize', updateHeaderTheme); updateHeaderTheme(); } const toTop = document.getElementById('toTop'); if (toTop) { const ringFill = toTop.querySelector('.ring-fill'); const RING_C = 169.65; // = stroke-dasharray (2π × r27) function updateToTop() { toTop.classList.toggle('is-visible', (window.scrollY || 0) > window.innerHeight * 0.5); if (ringFill) { const max = document.documentElement.scrollHeight - window.innerHeight; const p = max > 0 ? Math.min(1, (window.scrollY || 0) / max) : 0; ringFill.style.strokeDashoffset = (RING_C * (1 - p)).toFixed(2); } } window.addEventListener('scroll', updateToTop, { passive: true }); window.addEventListener('resize', updateToTop); updateToTop(); toTop.addEventListener('click', () => { const reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; window.scrollTo({ top: 0, behavior: reduced ? 'auto' : 'smooth' }); if (window.heroReset) window.heroReset(); // index: rewind the hero show }); } })(); /* ── Hero smile: same dot data AND same rendering recipe as the index hero's third stage — fixed 1px dots, full orange, gentle ±18% alpha shimmer (static under reduced motion). ── */ window.__onShapeData = () => { const cv = document.getElementById('aboutSmile'); const SD = window.SHAPE_DATA && window.SHAPE_DATA.group48128; if (!cv || !SD) return; const ctx = cv.getContext('2d'); const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches; const DOT_R = 1.0; // index: DOT_RADIUS = 1.0 const SHIMMER_AMP = 0.18; // index: BRACE_SHIMMER_AMP const SHIMMER_SPEED = 0.0028; // index: SHIMMER_SPEED let W = 0, H = 0, dpr = 1; // deterministic per-dot phase — stable across resizes const phases = SD.points.map((p, i) => (Math.abs(Math.sin(i * 12.9898) * 43758.5453)) % (Math.PI * 2)); function resize() { dpr = window.devicePixelRatio || 1; W = cv.clientWidth; H = W / (SD.aspect || 1.5363); cv.width = Math.round(W * dpr); cv.height = Math.round(H * dpr); cv.style.height = H + 'px'; } function draw(now) { ctx.setTransform(dpr, 0, 0, dpr, 0, 0); ctx.clearRect(0, 0, W, H); ctx.fillStyle = '#FF7F00'; for (let i = 0; i < SD.points.length; i++) { const tw = reduced ? 0 : Math.sin(now * SHIMMER_SPEED + phases[i]); ctx.globalAlpha = Math.min(1, Math.max(0, 1 + tw * SHIMMER_AMP)); ctx.beginPath(); ctx.arc(SD.points[i][0] * W, SD.points[i][1] * H, DOT_R, 0, Math.PI * 2); ctx.fill(); } } resize(); if (reduced) { draw(0); } else { requestAnimationFrame(function loop(now) { draw(now); requestAnimationFrame(loop); }); } window.addEventListener('resize', () => { resize(); if (reduced) draw(0); }); }; /* ── Awards toggle: swap the panning era grid for an aggregated 수상/표창 list; the head (title + button) stays put. ── */ (() => { const section = document.querySelector('.about-history'); const btn = document.getElementById('awardsToggle'); const grid = document.querySelector('.about-history-grid'); const list = document.getElementById('awardsList'); const panel = document.getElementById('aboutAwards'); if (!section || !btn || !grid || !list || !panel) return; const SHIELD = ''; grid.querySelectorAll('li.award').forEach((li) => { const clone = li.cloneNode(true); clone.classList.remove('award'); const em = clone.querySelector('em'); if (em) em.outerHTML = SHIELD; // ✦ → 지란지교데이터 shield list.appendChild(clone); }); const label = btn.querySelector('.awards-btn-label'); const ico = btn.querySelector('.awards-btn-ico'); const ICO_SPARKLE = ''; const ICO_PIN = ''; btn.addEventListener('click', () => { const on = section.classList.toggle('awards-mode'); panel.hidden = !on; btn.setAttribute('aria-pressed', on ? 'true' : 'false'); label.textContent = on ? '전체 보기' : '수상 내역 모아보기'; ico.innerHTML = on ? ICO_PIN : ICO_SPARKLE; if (window.__historyReset) window.__historyReset(); }); })(); /* ── About-page entrances + section glide ── Progressive enhancement: without JS or with reduced motion the page scrolls normally and every block is simply visible. */ (() => { const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches; if (reduced || !('IntersectionObserver' in window)) return; /* Venn: circles meet → copy left/right/center → orange lens draws. Plays once, when the diagram is ~40% on screen. */ const venn = document.querySelector('.about-venn'); if (venn) { venn.classList.add('venn-anim'); const io = new IntersectionObserver((entries) => { if (entries.some(e => e.isIntersecting)) { venn.classList.add('is-played'); io.disconnect(); } }, { threshold: 0.4 }); io.observe(venn); } /* Vision: items stack one at a time — every 2s on their own; a downward wheel while parked on the section advances early. Reveal order is BOTTOM-UP: the widest ring first, the orange lead last (reversed from DOM order). */ const vision = document.querySelector('.about-vision'); const items = vision ? Array.from(vision.querySelectorAll('.vision-item')).reverse() : []; let visionStep = 0; let visionTimer = 0; let visionStarted = false; function visionAdvance() { clearTimeout(visionTimer); if (visionStep >= items.length) return; items[visionStep++].classList.add('is-shown'); if (visionStep < items.length) visionTimer = setTimeout(visionAdvance, 2000); } if (vision && items.length) { vision.classList.add('vision-anim'); const vio = new IntersectionObserver((entries) => { if (entries.some(e => e.isIntersecting) && !visionStarted) { visionStarted = true; visionAdvance(); // first item now, rest every 2s vio.disconnect(); } }, { threshold: 0.25 }); vio.observe(vision); } /* Section glide: one gesture moves exactly one stop, like the index page. Stops: intro → mission → vision → history → brand → contact. While parked on vision with items left, a down-gesture reveals the next item instead of leaving. */ const stopEls = ['.about-intro', '.about-mission', '.about-vision', '.about-history', '.about-brand', '.about-contact'] .map(sel => document.querySelector(sel)).filter(Boolean); if (!stopEls.length) return; const HEADER_PAD = 90; let animating = false; let lastGestureAt = 0; function targets() { const maxY = document.documentElement.scrollHeight - window.innerHeight; return stopEls.map((el, i) => { // dark-interior stops keep a header gap; light sections // align flush so no dark sliver lingers behind the bar const pad = el.closest('.about-dark') ? HEADER_PAD : 0; const y = i === 0 ? 0 : el.getBoundingClientRect().top + (window.scrollY || 0) - pad; return Math.max(0, Math.min(maxY, Math.round(y))); }); } function currentIndex(T) { const y = window.scrollY || 0; let best = 0; for (let i = 0; i < T.length; i++) { if (Math.abs(T[i] - y) < Math.abs(T[best] - y)) best = i; } return best; } function glideTo(target) { const from = window.scrollY || 0; const dist = target - from; if (!dist) return; animating = true; const D = 650; const t0 = performance.now(); requestAnimationFrame(function tick(now) { const t = Math.min(1, (now - t0) / D); const k = 1 - Math.pow(1 - t, 3); // easeOutCubic window.scrollTo(0, from + dist * k); if (t < 1) requestAnimationFrame(tick); else animating = false; }); } /* History: while parked on the section, gestures pan the era strip horizontally (down → next era, up → previous) and only leave once the strip has reached its end. */ const history = document.querySelector('.about-history'); const histTrack = document.querySelector('.about-history-grid'); let histIndex = 0; function histStops() { const cols = Array.from(histTrack.children); if (!cols.length) return [0]; const max = Math.max(0, histTrack.offsetWidth - window.innerWidth); const base = cols[0].offsetLeft; const xs = cols.map(c => Math.min(c.offsetLeft - base, max)); return xs.filter((x, k) => k === 0 || x > xs[k - 1] + 4); } const histProgress = document.getElementById('historyProgress'); function histSyncProgress() { if (!histProgress) return; const n = histStops().length; while (histProgress.children.length > n) histProgress.lastChild.remove(); while (histProgress.children.length < n) histProgress.appendChild(document.createElement('i')); Array.from(histProgress.children).forEach((el, k) => el.classList.toggle('is-active', k === histIndex)); } function histGo(k) { const xs = histStops(); histIndex = Math.max(0, Math.min(xs.length - 1, k)); histTrack.style.transform = 'translateX(' + (-xs[histIndex]) + 'px)'; histSyncProgress(); } window.__historyReset = () => { histGo(0); }; histSyncProgress(); window.addEventListener('resize', histSyncProgress); function step(dir) { const T = targets(); const i = currentIndex(T); if (dir > 0 && stopEls[i] === vision && visionStep < items.length) { visionAdvance(); // hold the stop, reveal next item return; } if (history && histTrack && stopEls[i] === history && !history.classList.contains('awards-mode')) { const last = histStops().length - 1; if (dir > 0 && histIndex < last) { histGo(histIndex + 1); return; } if (dir < 0 && histIndex > 0) { histGo(histIndex - 1); return; } } const ni = Math.max(0, Math.min(T.length - 1, i + dir)); if (ni !== i) glideTo(T[ni]); } window.addEventListener('wheel', (e) => { e.preventDefault(); if (animating) return; if (Math.abs(e.deltaY) < 8) return; const now = performance.now(); if (now - lastGestureAt < 450) return; // one stop per gesture lastGestureAt = now; step(e.deltaY > 0 ? 1 : -1); }, { passive: false }); let touchY = 0; window.addEventListener('touchstart', (e) => { touchY = e.touches[0].clientY; }, { passive: true }); window.addEventListener('touchmove', (e) => { e.preventDefault(); if (animating) return; const dy = touchY - e.touches[0].clientY; if (Math.abs(dy) > 40) { touchY = e.touches[0].clientY; step(dy > 0 ? 1 : -1); } }, { passive: false }); })(); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', start); } else { start(); } })();