const { useEffect, useRef, useState } = React; const DEFAULT_SOLUTIONS_MANIFEST_DOC_ID = 'solutions-manifest'; const DEFAULT_SOLUTIONS_MANIFEST_TITLE = 'solutions-manifest'; const ORBIT_SECTORS = [ { id: 'security', label: '보안' }, { id: 'collaboration', label: '협업' }, { id: 'ai', label: 'AI' }, ]; function OrbitProduct({ product }) { const content = ( <> {product.name} {product.description} ); return product.href ? ( {content} ) :

{content}

; } function OrbitProductGrid({ products }) { return (

{(products || []).map((product) => )}

); } function OrbitPanelContent({ section, status }) { if (status === 'loading') return

솔루션을 불러오는 중입니다.

; if (status === 'error' || !section) { return

솔루션 정보를 불러오지 못했습니다. 솔루션 페이지에서 보기

; } if (Array.isArray(section.groups) && section.groups.length) { return section.groups.map((group) => (

{group.label}

)); } return ( <>

{section.heading}

); } function HeroSection() { return (

지란지교소프트 — 기술로 사람을 이롭게, 신뢰로 관계를 지킵니다.

); } function OrbitSection({ sections, status }) { const byId = new Map((sections || []).map((section) => [section.id, section])); return (

AI 오피스 주요 영역

보안·협업·AI가
하나로 연결되는
AI 오피스의 표준

{ORBIT_SECTORS.map((sector, index) => ( ))} {ORBIT_SECTORS.map((sector) => ( ))}

); } function StatsSection() { return (

함께 쌓아온 신뢰,
결과로 증명합니다.

공공·기업
DLP 시장 점유율

국내 공공기관과 기업의 선택으로
DLP 시장을 선도하며 정보보호 혁신을 이끌고 있습니다.

창립 이후 정보보호 기술로
노하우를 쌓아온 기간

30년이 넘는 정보보호 기술력과 경험으로
고객의 소중한 데이터를 안전하게 보호합니다.

지란지교소프트 제품을
선택한 해외 고객 수

전 세계 129개국 고객이 선택한
검증된 정보보호 솔루션을 제공합니다.

지란지교소프트와
함께하는 파트너 및 고객사

수많은 고객과 파트너가 함께 만들어온
신뢰를 바탕으로 지속적인 성장을 이어가고 있습니다.

위

); } const SHAPE_B64 = "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"; let shapeDataPromise; function loadShapeData() { if (!shapeDataPromise) { shapeDataPromise = (async () => { const bytes = Uint8Array.from(atob(SHAPE_B64), (character) => character.charCodeAt(0)); if (typeof DecompressionStream !== 'function') { throw new Error('This browser does not support DecompressionStream.'); } const stream = new Blob([bytes]).stream().pipeThrough(new DecompressionStream('deflate')); return JSON.parse(await new Response(stream).text()); })(); } return shapeDataPromise; } function isInteractiveKeyboardTarget(target) { const element = target && target.nodeType === 1 ? target : target?.parentElement; return Boolean(element?.closest( 'a[href], button, input, select, textarea, summary, ' + '[contenteditable]:not([contenteditable="false"]), ' + '[role="button"], [role="link"], [role="menuitem"]', )); } function hasOpenNavigation() { return document.body.classList.contains('nav-open'); } function shouldIgnoreStoryKey(event) { return ( event.defaultPrevented || event.repeat || event.isComposing || event.metaKey || event.ctrlKey || event.altKey || (event.shiftKey && event.key !== ' ') || hasOpenNavigation() || isInteractiveKeyboardTarget(event.target) ); } function normalizeWheelDelta(event) { const scale = event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? window.innerHeight : 1; return event.deltaY * scale; } function createEffectRuntime(isDisposed) { const listeners = []; const observers = new Set(); const animationFrames = new Set(); const timeouts = new Set(); function listen(target, type, handler, options) { if (!target || typeof target.addEventListener !== 'function') return handler; target.addEventListener(type, handler, options); listeners.push([target, type, handler, options]); return handler; } function unlisten(target, type, handler, options) { if (!target || typeof target.removeEventListener !== 'function') return; target.removeEventListener(type, handler, options); const index = listeners.findIndex((entry) => ( entry[0] === target && entry[1] === type && entry[2] === handler && entry[3] === options )); if (index >= 0) listeners.splice(index, 1); } function requestAnimationFrame(callback) { let id = 0; id = window.requestAnimationFrame((now) => { animationFrames.delete(id); if (!isDisposed()) callback(now); }); animationFrames.add(id); return id; } function cancelAnimationFrame(id) { animationFrames.delete(id); window.cancelAnimationFrame(id); } function setTimeout(callback, delay, ...args) { let id = 0; id = window.setTimeout(() => { timeouts.delete(id); if (!isDisposed()) callback(...args); }, delay); timeouts.add(id); return id; } function clearTimeout(id) { timeouts.delete(id); window.clearTimeout(id); } function IntersectionObserver(callback, options) { if (typeof window.IntersectionObserver === 'function') { const observer = new window.IntersectionObserver(callback, options); observers.add(observer); return observer; } const fallback = { observe(target) { setTimeout(() => callback([{ target, isIntersecting: true, intersectionRatio: 1, }], fallback), 0); }, unobserve() {}, disconnect() {}, }; observers.add(fallback); return fallback; } function MutationObserver(callback) { if (typeof window.MutationObserver === 'function') { const observer = new window.MutationObserver(callback); observers.add(observer); return observer; } const fallback = { observe() {}, disconnect() {}, }; observers.add(fallback); return fallback; } function dispose() { listeners.splice(0).forEach(([target, type, handler, options]) => { target.removeEventListener(type, handler, options); }); observers.forEach((observer) => observer.disconnect()); observers.clear(); animationFrames.forEach((id) => window.cancelAnimationFrame(id)); animationFrames.clear(); timeouts.forEach((id) => window.clearTimeout(id)); timeouts.clear(); } return { listen, unlisten, requestAnimationFrame, cancelAnimationFrame, setTimeout, clearTimeout, IntersectionObserver, MutationObserver, dispose, }; } function runHomeControllers(shapeData, runtime) { const { listen, unlisten, requestAnimationFrame, cancelAnimationFrame, setTimeout, clearTimeout, IntersectionObserver, MutationObserver, } = runtime; // Page snapping is private to this widget. Shared chrome communicates with // the home experience through the documented `jiransoft:home-reset` event. let pageGlide = null; (() => { 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 reducedMotionQuery = window.matchMedia('(prefers-reduced-motion: reduce)'); 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(); const RENDER_BUCKET_COUNT = COLOR_LEVELS * SHIMMER_LEVELS; const renderBuckets = { background: Array.from({ length: SHIMMER_LEVELS }, () => []), litBackground: Array.from({ length: RENDER_BUCKET_COUNT }, () => []), brace: Array.from({ length: RENDER_BUCKET_COUNT }, () => []), phantom: Array.from({ length: RENDER_BUCKET_COUNT }, () => []), }; function resetRenderBuckets() { for (let s = 0; s < SHIMMER_LEVELS; s++) { renderBuckets.background[s].length = 0; } for (let index = 0; index < RENDER_BUCKET_COUNT; index++) { renderBuckets.litBackground[index].length = 0; renderBuckets.brace[index].length = 0; renderBuckets.phantom[index].length = 0; } } 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 let heroFrame = 0; let heroInView = false; 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 gentleGatherCurl() { const direction = Math.random() < 0.5 ? -1 : 1; return direction * (0.035 + Math.random() * 0.035); } 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 = gentleGatherCurl(); // subtle mixed arcs, no field-wide spin 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 = gentleGatherCurl(); 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_INTENT_THRESHOLD = 72; const WHEEL_IDLE_RESET_MS = 160; const WHEEL_INTENT_WINDOW_MS = 280; // A sliding idle timeout alone can stay locked forever while a physical // wheel keeps firing at a steady cadence. This deadline is set once per // accepted step and is never extended by the gesture tail. const WHEEL_LOCK_MAX_MS = 1000; // 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 wheelIntent = 0; let wheelDirection = 0; let wheelLastAt = 0; let wheelGestureLocked = false; let wheelLockDeadline = 0; let reachedLastAt = Infinity; function softSnapEnabled() { return !reducedMotionQuery.matches && window.innerWidth >= 769; } function resetWheelIntent() { wheelIntent = 0; wheelDirection = 0; wheelLastAt = 0; wheelGestureLocked = false; wheelLockDeadline = 0; } function collectWheelIntent(delta, now) { const direction = delta > 0 ? 1 : -1; const idle = now - wheelLastAt > (wheelGestureLocked ? WHEEL_IDLE_RESET_MS : WHEEL_INTENT_WINDOW_MS); if ( wheelGestureLocked && direction === wheelDirection && !idle && wheelLockDeadline && now >= wheelLockDeadline ) { // Consume the event that expires the old gesture. A following // wheel event starts a fresh intent instead of inheriting tail. resetWheelIntent(); return false; } if (idle || direction !== wheelDirection) { wheelIntent = 0; wheelGestureLocked = false; wheelLockDeadline = 0; wheelDirection = direction; } wheelLastAt = now; if (wheelGestureLocked) return false; wheelIntent += Math.min(Math.abs(delta), 120); if (wheelIntent < WHEEL_INTENT_THRESHOLD) return false; wheelGestureLocked = true; wheelLockDeadline = now + WHEEL_LOCK_MAX_MS; wheelIntent = 0; return true; } // Step indicator: which of the three dot stages is showing / how many remain. const stageDots = Array.from(document.querySelectorAll('#heroProgress i')); const autoAdvanceToggle = document.querySelector('[data-hero-autoplay-toggle]'); 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)); updateAutoAdvanceControl(); } 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. The final stage remains in place; navigation into the next section is always controlled by the visitor. Any direct interaction pauses the sequence until the adjacent play control (or a home-reset event) explicitly resumes it. ── */ /* Shared chrome dispatches `jiransoft:home-reset` when its to-top control returns home. Rewinding snaps progress so intermediate stages do not flash while the page scrolls upward. */ function resetHero() { targetProgress = 0; progress = 0; progressVel = 0; reachedLastAt = Infinity; autoAdvanceStopped = false; updateStageDots(); scheduleAutoAdvance(); } const AUTO_ADVANCE_MS = 5000; let autoAdvanceTimer = 0; let autoAdvanceStopped = false; function autoAdvanceContextActive() { return ( !autoAdvanceStopped && !reducedMotionQuery.matches && heroInView && !document.hidden && atPageTop() && !onLastStage() ); } function updateAutoAdvanceControl() { const completed = onLastStage(); const running = autoAdvanceContextActive() && Boolean(autoAdvanceTimer); hero.dataset.autoplay = running ? 'running' : 'paused'; if (!autoAdvanceToggle) return; autoAdvanceToggle.disabled = reducedMotionQuery.matches; autoAdvanceToggle.setAttribute('aria-pressed', running ? 'false' : 'true'); if (reducedMotionQuery.matches) { autoAdvanceToggle.setAttribute('aria-label', '모션 감소 설정으로 히어로 자동 전환이 중지됨'); } else if (completed) { autoAdvanceToggle.setAttribute('aria-label', '히어로 자동 전환 처음부터 재생'); } else if (running) { autoAdvanceToggle.setAttribute('aria-label', '히어로 자동 전환 일시정지'); } else { autoAdvanceToggle.setAttribute('aria-label', '히어로 자동 전환 재생'); } } function stopAutoAdvance() { autoAdvanceStopped = true; clearTimeout(autoAdvanceTimer); autoAdvanceTimer = 0; updateAutoAdvanceControl(); } function resumeAutoAdvance() { if (reducedMotionQuery.matches) return; if (onLastStage()) { targetProgress = 0; reachedLastAt = Infinity; updateStageDots(); } autoAdvanceStopped = false; scheduleAutoAdvance(); } function scheduleAutoAdvance() { clearTimeout(autoAdvanceTimer); autoAdvanceTimer = 0; if (!autoAdvanceContextActive()) { updateAutoAdvanceControl(); return; } autoAdvanceTimer = setTimeout(() => { autoAdvanceTimer = 0; if (!autoAdvanceContextActive()) { updateAutoAdvanceControl(); return; } tryAdvance(1); }, AUTO_ADVANCE_MS); updateAutoAdvanceControl(); } function syncAutoAdvance() { if (!autoAdvanceContextActive()) { clearTimeout(autoAdvanceTimer); autoAdvanceTimer = 0; updateAutoAdvanceControl(); return; } if (!autoAdvanceTimer) scheduleAutoAdvance(); } function toggleAutoAdvance() { if (reducedMotionQuery.matches) return; if (autoAdvanceStopped || onLastStage() || !autoAdvanceTimer) { resumeAutoAdvance(); } else { stopAutoAdvance(); } } 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 (!softSnapEnabled() || e.ctrlKey || hasOpenNavigation()) return; if (!atPageTop()) return; // below hero → pageGlide owns it const delta = normalizeWheelDelta(e); if (!delta) return; stopAutoAdvance(); const dir = delta > 0 ? 1 : -1; // At the first stage the upward boundary belongs to native scrolling. // Do not consume it, even though the viewport cannot move any farther. if (dir < 0 && Math.round(targetProgress) <= 0) { resetWheelIntent(); return; } e.preventDefault(); const now = performance.now(); if (pageGlide?.animating) { if (dir !== pageGlide.direction) { pageGlide.cancel(); resetWheelIntent(); return; } if (!wheelGestureLocked) { wheelLockDeadline = now + WHEEL_LOCK_MAX_MS; } wheelGestureLocked = true; wheelDirection = dir; wheelLastAt = now; return; } if (!collectWheelIntent(delta, now)) return; 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() && pageGlide) pageGlide.step(1); return; } tryAdvance(dir); } let touchStartY = 0; let touchTriggered = false; let touchStartedAtFirst = false; let touchStartedAtLast = false; let singleTouchGesture = false; function resetTouchGesture() { singleTouchGesture = false; touchTriggered = false; touchStartedAtFirst = false; touchStartedAtLast = false; } function onTouchStart(e) { if (atPageTop()) stopAutoAdvance(); if (e.touches.length !== 1) { resetTouchGesture(); return; } singleTouchGesture = true; touchStartY = e.touches[0].clientY; touchTriggered = false; touchStartedAtFirst = Math.round(targetProgress) <= 0; touchStartedAtLast = onLastStage(); } function onTouchMove(e) { if (reducedMotionQuery.matches) return; if (!atPageTop()) return; // below hero → pageGlide owns it if (!singleTouchGesture || e.touches.length !== 1) { resetTouchGesture(); return; } const dyProbe = touchStartY - e.touches[0].clientY; // Touch keeps native page scrolling at both hero boundaries. Only the // in-place hero stages use swipe navigation on mobile/tablet. if (!touchTriggered && dyProbe > 0 && touchStartedAtLast && onLastStage()) { return; } if (!touchTriggered && dyProbe < 0 && touchStartedAtFirst && Math.round(targetProgress) <= 0) { return; } if (e.cancelable) e.preventDefault(); if (touchTriggered) return; const dy = dyProbe; if (Math.abs(dy) > 40) { if (tryAdvance(dy > 0 ? 1 : -1)) { touchTriggered = true; } } } function onTouchEnd(e) { if (!e.touches.length) resetTouchGesture(); } const HERO_WHEEL_OPTIONS = { passive: false }; const HERO_TOUCH_MOVE_OPTIONS = { passive: false }; let heroWheelListenerAttached = false; let heroTouchMoveListenerAttached = false; function syncHeroInputOwnership() { const ownsHero = heroInView && atPageTop() && !document.hidden; const shouldListenForWheel = ownsHero && softSnapEnabled(); const shouldListenForTouchMove = ownsHero && !reducedMotionQuery.matches; if (shouldListenForWheel && !heroWheelListenerAttached) { listen(window, 'wheel', onWheel, HERO_WHEEL_OPTIONS); heroWheelListenerAttached = true; } else if (!shouldListenForWheel && heroWheelListenerAttached) { unlisten(window, 'wheel', onWheel, HERO_WHEEL_OPTIONS); heroWheelListenerAttached = false; resetWheelIntent(); } if (shouldListenForTouchMove && !heroTouchMoveListenerAttached) { listen(window, 'touchmove', onTouchMove, HERO_TOUCH_MOVE_OPTIONS); heroTouchMoveListenerAttached = true; } else if (!shouldListenForTouchMove && heroTouchMoveListenerAttached) { unlisten(window, 'touchmove', onTouchMove, HERO_TOUCH_MOVE_OPTIONS); heroTouchMoveListenerAttached = false; resetTouchGesture(); } } function onKeyDown(e) { if (!softSnapEnabled() || shouldIgnoreStoryKey(e)) return; if (e.key === 'ArrowDown' || e.key === 'PageDown' || e.key === ' ') { if (!atPageTop()) return; // below hero → pageGlide owns it stopAutoAdvance(); if (e.key === ' ' && e.shiftKey) { if (tryAdvance(-1)) e.preventDefault(); return; } if (onLastStage()) { if (pageGlide?.step(1)) e.preventDefault(); return; } if (tryAdvance(1)) e.preventDefault(); } else if (e.key === 'ArrowUp' || e.key === 'PageUp') { if (!atPageTop()) return; stopAutoAdvance(); if (tryAdvance(-1)) e.preventDefault(); } } function onHeroPointerDown(event) { if (event.target.closest('[data-hero-autoplay-toggle]')) return; stopAutoAdvance(); } 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) { heroFrame = 0; 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 ─ resetRenderBuckets(); 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.76 : 0.88; // 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); const colorBucket = d.colorIdx * SHIMMER_LEVELS + d.shimIdx; if (d.isPhantom) { if (d.dotTT > 0.01) renderBuckets.phantom[colorBucket].push(d); } else if (d.brace) { renderBuckets.brace[colorBucket].push(d); } else if (d.glow > 0.04) { const glowBucket = d.glowIdx * SHIMMER_LEVELS + d.shimIdx; renderBuckets.litBackground[glowBucket].push(d); } else { renderBuckets.background[d.shimIdx].push(d); } } // ─ 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); // 모바일은 점 굵기 ↓ // Each dot was classified exactly once during the update pass above. // The preallocated buckets retain the prior paint order without // rescanning the full field for every color/shimmer combination. // 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(); const bucket = renderBuckets.background[s]; for (let i = 0; i < bucket.length; i++) { const d = bucket[i]; const spd2 = d.vx * d.vx + d.vy * d.vy; 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++) { const bucketIndex = c * SHIMMER_LEVELS + s; ctx.fillStyle = LUT.brace[bucketIndex]; ctx.beginPath(); const bucket = renderBuckets.litBackground[bucketIndex]; for (let i = 0; i < bucket.length; i++) { const d = bucket[i]; 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++) { const bucketIndex = c * SHIMMER_LEVELS + s; ctx.fillStyle = LUT.brace[bucketIndex]; ctx.beginPath(); const bucket = renderBuckets.brace[bucketIndex]; for (let i = 0; i < bucket.length; i++) { const d = bucket[i]; const spd2 = d.vx * d.vx + d.vy * d.vy; 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++) { const bucketIndex = c * SHIMMER_LEVELS + s; ctx.fillStyle = LUT.phantom[bucketIndex]; ctx.beginPath(); const bucket = renderBuckets.phantom[bucketIndex]; for (let i = 0; i < bucket.length; i++) { const d = bucket[i]; 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(); } } updateActiveText(); scheduleHeroFrame(); } function heroCanAnimate() { return ( !reducedMotionQuery.matches && heroInView && !document.hidden ); } function stopHeroFrame() { if (!heroFrame) return; cancelAnimationFrame(heroFrame); heroFrame = 0; } function scheduleHeroFrame(force = false) { if (heroFrame || (!force && !heroCanAnimate())) return; heroFrame = requestAnimationFrame(tick); } function syncHeroAnimation() { if (heroCanAnimate()) scheduleHeroFrame(); else stopHeroFrame(); } /* ─── 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 = reducedMotionQuery.matches ? performance.now() : performance.now() + INITIAL_DELAY; scheduleAutoAdvance(); // Draw one deterministic first frame even in reduced-motion mode. // The continuous loop starts only while the hero is visible. scheduleHeroFrame(true); const SD = shapeData; if (!SD) { console.error('home-experience shape data is unavailable'); 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; } } function onMotionPreferenceChange() { resetWheelIntent(); clearTimeout(autoAdvanceTimer); autoAdvanceTimer = 0; syncAutoAdvance(); syncHeroAnimation(); syncHeroInputOwnership(); } const heroObserver = new IntersectionObserver((entries) => { const entry = entries.find((candidate) => candidate.target === hero); if (!entry) return; const intersectionRect = entry.intersectionRect; const hasIntersectionArea = intersectionRect ? intersectionRect.width > 0 && intersectionRect.height > 0 : entry.intersectionRatio > 0; heroInView = Boolean(entry.isIntersecting && entry.intersectionRatio > 0 && hasIntersectionArea); syncHeroAnimation(); syncAutoAdvance(); syncHeroInputOwnership(); }, { threshold: [0, 0.001] }); heroObserver.observe(hero); function onVisibilityChange() { syncHeroAnimation(); syncAutoAdvance(); syncHeroInputOwnership(); } function onHeroScroll() { syncAutoAdvance(); syncHeroInputOwnership(); } listen(document, 'visibilitychange', onVisibilityChange); listen(window, 'scroll', onHeroScroll, { passive: true }); listen(window, 'resize', () => { dpr = Math.min(window.devicePixelRatio || 1, 2); resize(); if (!softSnapEnabled()) resetWheelIntent(); syncAutoAdvance(); syncHeroInputOwnership(); }); listen(reducedMotionQuery, 'change', onMotionPreferenceChange); listen(window, 'touchstart', onTouchStart, { passive: true }); listen(window, 'touchend', onTouchEnd, { passive: true }); listen(window, 'touchcancel', resetTouchGesture, { passive: true }); listen(window, 'keydown', onKeyDown); listen(hero, 'pointerdown', onHeroPointerDown); listen(autoAdvanceToggle, 'click', toggleAutoAdvance); listen(window, 'jiransoft:home-reset', resetHero); listen(canvas, 'pointermove', onPointerMove); listen(canvas, 'pointerleave', onPointerLeave); init(); })(); (() => { const reducedMotionQuery = window.matchMedia('(prefers-reduced-motion: reduce)'); const WHEEL_INTENT_THRESHOLD = 72; const WHEEL_IDLE_RESET_MS = 160; const WHEEL_INTENT_WINDOW_MS = 280; const WHEEL_LOCK_MAX_MS = 1000; const STORY_EDGE_EPSILON = 6; function softSnapEnabled() { return !reducedMotionQuery.matches && window.innerWidth >= 769; } /* ── Page glide: soft snap within the story only ── News top is an exit anchor so the final pinned stat does not hand off mid-viewport. Once news is aligned, its content and the footer use native scrolling, as do touch, narrow viewports and reduced motion. */ pageGlide = (() => { let animating = false; let glideFrame = 0; let glideDirection = 0; function targets() { const vh = window.innerHeight; const orbit = document.getElementById('orbitSection'); const stats = document.getElementById('statsSection'); const news = document.getElementById('newsSection'); if (!orbit || !stats) return [0]; const orbitTop = orbit.offsetTop; 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))); } if (news) list.push(Math.round(news.offsetTop)); return list; } function destinationIndex(T, dir) { const y = window.scrollY || 0; if (dir > 0) { return T.findIndex((target) => target > y + STORY_EDGE_EPSILON); } for (let index = T.length - 1; index >= 0; index -= 1) { if (T[index] < y - STORY_EDGE_EPSILON) return index; } return -1; } function nearestIndex(T, y) { let best = 0; let distance = Infinity; T.forEach((target, index) => { const nextDistance = Math.abs(target - y); if (nextDistance < distance) { distance = nextDistance; best = index; } }); return best; } function withinStory(T = targets()) { const y = window.scrollY || 0; const last = T[T.length - 1] || 0; return y >= -STORY_EDGE_EPSILON && y <= last + STORY_EDGE_EPSILON; } function ownsInputRange() { if (!softSnapEnabled()) return false; const T = targets(); const y = window.scrollY || 0; const last = T[T.length - 1] || 0; return y > 2 && y < last - STORY_EDGE_EPSILON; } function glideTo(targetY, duration) { if (reducedMotionQuery.matches) { window.scrollTo(0, targetY); animating = false; glideDirection = 0; return; } animating = true; const startY = window.scrollY || 0; const dist = targetY - startY; glideDirection = dist > 0 ? 1 : -1; const durationMs = duration || 480; 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) / durationMs); window.scrollTo(0, startY + dist * ease(t)); if (t < 1) glideFrame = requestAnimationFrame(frame); else { glideFrame = 0; animating = false; glideDirection = 0; } } glideFrame = requestAnimationFrame(frame); } function cancel() { cancelAnimationFrame(glideFrame); glideFrame = 0; animating = false; glideDirection = 0; } // 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 canStep(dir) { if (!softSnapEnabled() || animating || !dir) return false; const T = targets(); if (!withinStory(T)) return false; return destinationIndex(T, dir) >= 0; } function step(dir) { if (animating) { if (dir === glideDirection) return true; cancel(); } if (!softSnapEnabled() || !dir) return false; const T = targets(); if (!withinStory(T)) return false; const ni = destinationIndex(T, dir); if (ni < 0) return false; const i = nearestIndex(T, window.scrollY || 0); const inStats = Math.min(i, ni) >= STATS_FIRST && Math.max(i, ni) <= STATS_LAST; const crossesNewsExit = Math.min(i, ni) === STATS_LAST && Math.max(i, ni) === STATS_LAST + 1; glideTo(T[ni], inStats ? 320 : crossesNewsExit ? 520 : 480); return true; } return { step, canStep, cancel, withinStory, ownsInputRange, get animating() { return animating; }, get direction() { return glideDirection; }, }; })(); let wheelIntent = 0; let wheelDirection = 0; let wheelLastAt = 0; let wheelGestureLocked = false; let wheelLockDeadline = 0; function resetWheelIntent() { wheelIntent = 0; wheelDirection = 0; wheelLastAt = 0; wheelGestureLocked = false; wheelLockDeadline = 0; } function collectWheelIntent(delta, now) { const direction = delta > 0 ? 1 : -1; const idle = now - wheelLastAt > WHEEL_INTENT_WINDOW_MS; if (idle || direction !== wheelDirection) { wheelIntent = 0; wheelGestureLocked = false; wheelLockDeadline = 0; wheelDirection = direction; } wheelLastAt = now; if (wheelGestureLocked) return false; wheelIntent += Math.min(Math.abs(delta), 120); if (wheelIntent < WHEEL_INTENT_THRESHOLD) return false; wheelGestureLocked = true; wheelLockDeadline = now + WHEEL_LOCK_MAX_MS; wheelIntent = 0; return true; } // Below the hero, a deliberate desktop wheel gesture snaps one target. function onPageWheel(e) { if (!softSnapEnabled() || e.ctrlKey || hasOpenNavigation()) return; if ((window.scrollY || 0) <= 2) return; // hero controller owns the top const delta = normalizeWheelDelta(e); if (!delta) return; const direction = delta > 0 ? 1 : -1; const now = performance.now(); if (pageGlide.animating) { if (direction !== pageGlide.direction) { pageGlide.cancel(); resetWheelIntent(); return; } e.preventDefault(); if (!wheelGestureLocked) { wheelLockDeadline = now + WHEEL_LOCK_MAX_MS; } wheelGestureLocked = true; wheelDirection = direction; wheelLastAt = now; return; } if (wheelGestureLocked) { const idle = now - wheelLastAt > WHEEL_IDLE_RESET_MS; if (!idle && direction === wheelDirection) { e.preventDefault(); const hardExpired = wheelLockDeadline && now >= wheelLockDeadline; if (hardExpired) { // Do not reinterpret the final tail event as a new step. // The next physical-wheel event can start fresh. resetWheelIntent(); return; } wheelLastAt = now; return; } resetWheelIntent(); if (!idle && direction !== wheelDirection) return; } // The first/last story boundaries are native-scroll release points. if (!pageGlide.canStep(direction)) { resetWheelIntent(); return; } e.preventDefault(); if (!collectWheelIntent(delta, now)) return; if (!pageGlide.step(direction)) resetWheelIntent(); } const PAGE_WHEEL_OPTIONS = { passive: false }; let pageWheelListenerAttached = false; function syncPageWheelOwnership() { const shouldListen = pageGlide.ownsInputRange() && !document.hidden; if (shouldListen && !pageWheelListenerAttached) { listen(window, 'wheel', onPageWheel, PAGE_WHEEL_OPTIONS); pageWheelListenerAttached = true; } else if (!shouldListen && pageWheelListenerAttached) { unlisten(window, 'wheel', onPageWheel, PAGE_WHEEL_OPTIONS); pageWheelListenerAttached = false; resetWheelIntent(); } } syncPageWheelOwnership(); listen(window, 'scroll', syncPageWheelOwnership, { passive: true }); listen(document, 'visibilitychange', syncPageWheelOwnership); listen(window, 'keydown', (e) => { if (!softSnapEnabled() || shouldIgnoreStoryKey(e)) return; if ((window.scrollY || 0) <= 2) return; let direction = 0; if (e.key === 'ArrowDown' || e.key === 'PageDown' || e.key === ' ') { direction = e.key === ' ' && e.shiftKey ? -1 : 1; } else if (e.key === 'ArrowUp' || e.key === 'PageUp') { direction = -1; } if (direction && pageGlide.step(direction)) e.preventDefault(); }); const releasePageGlide = () => { pageGlide.cancel(); resetWheelIntent(); }; listen(window, 'resize', () => { if (!softSnapEnabled()) releasePageGlide(); syncPageWheelOwnership(); }); listen(reducedMotionQuery, 'change', () => { releasePageGlide(); syncPageWheelOwnership(); }); /* 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; }); const STEP = 1000; // keep in sync with node --d delays (index.html) // and the .orbit-progress 1s transition (CSS) const nodes = Array.from(orbit.querySelectorAll('.orbit-node')); const panels = Array.from(orbit.querySelectorAll('.orbit-panel')); const FRACS = nodes.map((_, index) => (index + 1) / nodes.length); // 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 = Object.fromEntries( nodes.map((node, index) => [node.dataset.node, index / nodes.length]), ); 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(); listen(window, 'resize', placeNodes); /* Planetary rotation: once the intro completes, the three 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; let orbitInView = false; let introStarted = false; let introComplete = false; let rotationFrame = 0; let lastRotationAt = 0; function setNodeInteractive(node, interactive) { node.tabIndex = interactive ? 0 : -1; node.classList.toggle('is-interactive', interactive); if (interactive) node.removeAttribute('aria-hidden'); else node.setAttribute('aria-hidden', 'true'); } function setNodesInteractive(interactive) { nodes.forEach((node) => setNodeInteractive(node, interactive)); } setNodesInteractive(false); function rotationCanRun() { return ( introComplete && orbitInView && !document.hidden && !reducedMotionQuery.matches ); } function stopRotation() { if (rotationFrame) cancelAnimationFrame(rotationFrame); rotationFrame = 0; lastRotationAt = 0; } function rotate(now) { rotationFrame = 0; if (!rotationCanRun()) return; if (!lastRotationAt) lastRotationAt = now; const dt = Math.min(100, now - lastRotationAt); lastRotationAt = now; if (!orbit.classList.contains('has-active')) { rotOffset = (rotOffset + dt / ROTATION_PERIOD_MS) % 1; placeNodes(); } rotationFrame = requestAnimationFrame(rotate); } function syncRotation() { if (!rotationCanRun()) { stopRotation(); return; } if (!rotationFrame) rotationFrame = requestAnimationFrame(rotate); } function completeIntro() { if (introComplete) return; introComplete = true; orbit.classList.add('is-complete'); setNodesInteractive(true); syncRotation(); } function revealIntroImmediately() { if (!introStarted) { introStarted = true; orbit.classList.add('is-played'); track.style.strokeDashoffset = 0; } progress.style.strokeDashoffset = 0; tips.forEach((tip) => { tip.style.strokeDashoffset = 0; }); completeIntro(); } function startIntro() { if (introStarted) return; introStarted = true; 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 (reducedMotionQuery.matches) { revealIntroImmediately(); return; } nodes.forEach((node, index) => { setTimeout(() => { if (!introComplete) setNodeInteractive(node, true); }, index * STEP + 350); }); FRACS.forEach((fraction, index) => { setTimeout(() => { if (introComplete || reducedMotionQuery.matches) return; const offset = RING * (1 - fraction); progress.style.strokeDashoffset = offset.toFixed(1); tips.forEach((tip, tipIndex) => { tip.style.strokeDashoffset = Math.max( 0, offset - TIP_LEAD[tipIndex], ).toFixed(1); }); }, index * STEP + 80); }); setTimeout(completeIntro, FRACS.length * STEP + 300); } listen(document, 'keydown', (event) => { if (event.key === 'Tab' && !introComplete) revealIntroImmediately(); }, true); const io = new IntersectionObserver((entries) => { const entry = entries.find( (candidate) => candidate.target === orbit, ); if (!entry) return; orbitInView = entry.isIntersecting; if (orbitInView) startIntro(); syncRotation(); }, { threshold: 0 }); io.observe(orbit); listen(document, 'visibilitychange', syncRotation); listen(reducedMotionQuery, 'change', () => { if (reducedMotionQuery.matches && introStarted) { revealIntroImmediately(); } syncRotation(); }); 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; listen(n, 'mouseenter', () => setActive(key)); listen(n, 'mouseleave', () => { if (!pinned) setActive(null); }); listen(n, 'focus', () => setActive(key)); listen(n, 'blur', () => { if (!pinned) setActive(null); }); listen(n, 'click', () => { pinned = (pinned === key) ? null : key; setActive(pinned); }); }); listen(orbit, '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: 34000, unit: '고객사' }, ]; const visualGrid = stats.querySelector('.stats-grid'); if (visualGrid) visualGrid.setAttribute('aria-hidden', 'true'); if (!stats.querySelector('.stats-semantic-list')) { const semanticList = document.createElement('ol'); semanticList.className = 'stats-semantic-list sr-only'; semanticList.setAttribute('aria-label', '지란지교소프트 주요 성과'); texts.forEach((text, index) => { const item = document.createElement('li'); const heading = document.createElement('h3'); const description = document.createElement('p'); const value = document.createElement('p'); heading.textContent = text.querySelector('h3')?.innerText || ''; description.textContent = text.querySelector('p')?.innerText || ''; value.textContent = `${DATA[index].value.toLocaleString('ko-KR')}${DATA[index].unit}`; item.append(heading, description, value); semanticList.appendChild(item); }); const grid = stats.querySelector('.stats-grid'); if (grid) sticky.insertBefore(semanticList, grid); else sticky.appendChild(semanticList); } 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'; if (reducedMotionQuery.matches) { numberEl.style.transform = 'scale(1)'; numberEl.classList.add('is-landed'); return; } 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); } listen(window, 'scroll', onScroll, { passive: true }); listen(window, 'resize', onScroll); listen(reducedMotionQuery, 'change', () => { if (reducedMotionQuery.matches && lastPhase >= 1) { animateCount(lastPhase - 1); } }); update(); } })(); } function activateStaticHomeFallback(root, runtime) { if (!root) return; const hero = root.querySelector('#hero'); if (hero) { hero.dataset.stage = '0'; hero.dataset.autoplay = 'paused'; hero.classList.add('is-static-fallback'); } const heroStages = [...root.querySelectorAll('.hero-text-stage')]; heroStages.forEach((stage, index) => { stage.classList.toggle('is-active', index === 0); }); const heroProgress = [...root.querySelectorAll('#heroProgress i')]; heroProgress.forEach((dot, index) => { dot.classList.toggle('is-active', index === 0); }); const autoAdvanceToggle = root.querySelector('[data-hero-autoplay-toggle]'); if (autoAdvanceToggle) { autoAdvanceToggle.disabled = true; autoAdvanceToggle.setAttribute('aria-pressed', 'true'); autoAdvanceToggle.setAttribute('aria-label', '히어로 자동 전환을 사용할 수 없음'); } const orbit = root.querySelector('#orbitSection'); if (orbit) { orbit.classList.add('is-played', 'is-complete'); const nodes = [...orbit.querySelectorAll('.orbit-node')]; const panels = [...orbit.querySelectorAll('.orbit-panel')]; let pinned = null; const setActive = (key) => { nodes.forEach((node) => { const active = Boolean(key) && node.dataset.node === key; node.classList.toggle('is-active', active); node.setAttribute('aria-expanded', active ? 'true' : 'false'); }); panels.forEach((panel) => { const active = Boolean(key) && panel.dataset.panel === key; panel.classList.toggle('is-open', active); panel.setAttribute('aria-hidden', active ? 'false' : 'true'); }); orbit.classList.toggle('has-active', Boolean(key)); }; nodes.forEach((node) => { node.tabIndex = 0; node.removeAttribute('aria-hidden'); const key = node.dataset.node; runtime.listen(node, 'focus', () => setActive(key)); runtime.listen(node, 'blur', () => { if (!pinned) setActive(null); }); runtime.listen(node, 'mouseenter', () => setActive(key)); runtime.listen(node, 'mouseleave', () => { if (!pinned) setActive(null); }); runtime.listen(node, 'click', () => { pinned = pinned === key ? null : key; setActive(pinned); }); }); runtime.listen(orbit, 'keydown', (event) => { if (event.key !== 'Escape') return; pinned = null; setActive(null); }); orbit.querySelectorAll('.orbit-track, .orbit-progress, .orbit-progress-tip').forEach((path) => { path.style.strokeDashoffset = '0'; }); } } async function loadSolutionsManifest() { const constants = typeof Constants !== 'undefined' && Constants ? Constants : {}; const docId = constants.manifestDocId || DEFAULT_SOLUTIONS_MANIFEST_DOC_ID; const title = constants.manifestTitle || DEFAULT_SOLUTIONS_MANIFEST_TITLE; const byId = await API.Docs_GetDocument(docId).catch(() => null); let document = byId && byId.document; if (!document) { const list = await API.Docs_GetDocumentList({ type: 'JSON', limit: 100, startOffset: 0, contentLength: 0 }); const documents = (list && list.documents) || []; const match = documents.find((item) => item.id === docId) || documents.find((item) => item.title === title); if (!match) throw new Error('solutions manifest not found'); const full = await API.Docs_GetDocument(match.id); document = full && full.document; } const parsed = JSON.parse((document && document.content) || '{}'); const sourceSections = Array.isArray(parsed.sections) ? parsed.sections : []; return ORBIT_SECTORS.map((sector) => sourceSections.find((section) => section.id === sector.id)).filter(Boolean); } export default function HomeExperience() { const rootRef = useRef(null); const [solutionSections, setSolutionSections] = useState([]); const [solutionStatus, setSolutionStatus] = useState('loading'); useEffect(() => { let active = true; loadSolutionsManifest().then((sections) => { if (!active) return; if (sections.length !== ORBIT_SECTORS.length) throw new Error('solutions manifest sector mismatch'); setSolutionSections(sections); setSolutionStatus('ok'); }).catch(() => { if (!active) return; setSolutionSections([]); setSolutionStatus('error'); }); return () => { active = false; }; }, []); useEffect(() => { let disposed = false; const runtime = createEffectRuntime(() => disposed); runtime.listen(document, 'click', (event) => { if (window.innerWidth > 768) return; const orbit = document.getElementById('orbitSection'); if (!orbit || !orbit.classList.contains('has-active')) return; if (event.target.closest('.orbit-node') || event.target.closest('.orbit-panel')) return; const active = orbit.querySelector('.orbit-node.is-active'); if (active) active.click(); }, true); loadShapeData().then((shapeData) => { if (disposed || !rootRef.current) return; runHomeControllers(shapeData, runtime); }).catch((error) => { if (!disposed) { activateStaticHomeFallback(rootRef.current, runtime); console.warn('home-experience switched to its static fallback:', error); } }); return () => { disposed = true; runtime.dispose(); }; }, []); return (

); }

{group.label}

{section.heading}

지란지교소프트 — 기술로 사람을 이롭게, 신뢰로 관계를 지킵니다.

AI 오피스 주요 영역

함께 쌓아온 신뢰,결과로 증명합니다.

공공·기업DLP 시장 점유율

창립 이후 정보보호 기술로노하우를 쌓아온 기간

지란지교소프트 제품을선택한 해외 고객 수

지란지교소프트와함께하는 파트너 및 고객사

함께 쌓아온 신뢰,
결과로 증명합니다.

공공·기업
DLP 시장 점유율

창립 이후 정보보호 기술로
노하우를 쌓아온 기간

지란지교소프트 제품을
선택한 해외 고객 수

지란지교소프트와
함께하는 파트너 및 고객사