냥과 사는 남자 · THE CAT'S WARDEN

— 제 9조 · 2026 —

); } // ---------- Page 2 — Historical record ---------- function Page2Historical({ next }) { const lines = [ "단종은 열일곱의 나이에", "홀로 영월에 유배되었다.", "조정은 그의 시신조차 거두지 말라 명했다.", "그러나 한 이름 없는 사내가", "죽음을 무릅쓰고 그를 거두었다 — 엄흥도(嚴興道).", "", "그가 왕을 향한 마음은 충성이었으나,", "어린 단종을 바라본 시선은 부모의 것이었다."]; const [revealed, setRevealed] = useState1(0); const [seal, setSeal] = useState1(false); useEffect1(() => { const timers = lines.map((_, i) => setTimeout(() => setRevealed(i + 1), 500 + i * 600)); const st = setTimeout(() => setSeal(true), 500 + lines.length * 600 + 300); return () => {timers.forEach(clearTimeout);clearTimeout(st);}; }, []); return (

= lines.length ? next : undefined}> {/* Hanji background */}

— 史 · 魯山君 —

{lines.map((line, i) =>

{line || '\u00A0'}

)}

嚴

{revealed >= lines.length &&

— 클릭하여 계속 —

}

); } // ---------- Page 3 — "우리 주변에도 있다" (먹빛 글자 번짐 · 한지 페이드) ---------- function Page3AroundUs({ next }) { const [progress, setProgress] = useState1(0); // chars revealed const lines = [ "단종과 엄흥도의", "애틋한 관계,", "", "우리 주변에도 있다는", "사실을 아시나요?"]; const totalChars = lines.reduce((s, l) => s + l.length, 0); useEffect1(() => { let acc = 0; let advanced = false; const overScrollLimit = 500; // after all chars revealed, scroll this much more to advance const onWheel = (e) => { e.preventDefault(); acc += e.deltaY; const step = Math.max(0, Math.min(totalChars, Math.floor(acc / 28))); setProgress(step); // Once all text is revealed, additional scroll naturally moves to next page if (!advanced && step >= totalChars && acc > totalChars * 28 + overScrollLimit) { advanced = true; next(); } }; window.addEventListener('wheel', onWheel, { passive: false }); return () => window.removeEventListener('wheel', onWheel); }, [totalChars, next]); // Global index per character let charIdx = 0; return (

{/* Hanji fade overlay on right */}

{/* Hanji paper texture */}

")`, mixBlendMode: 'multiply', opacity: 0.45, pointerEvents: 'none' }} /> {/* Faint vertical hanji lines */}

{/* Typography panel — 오른쪽으로 조금 이동 (left padding 확대) */}

— 世 · 間 · 之 · 情 —

{lines.map((l, i) =>

{l.length === 0 ? '\u00A0' : l.split('').map((ch, j) => { const myIdx = charIdx++; const isVisible = myIdx < progress; const isNewest = myIdx === progress - 1; return ( {ch}); })}

)}

{/* Scroll hint */}

↓ 휠을 굴려 먹을 풀어보세요

{/* After fully revealed — subtle "scroll for next" hint */} {progress >= totalChars &&

계속 스크롤 ↓

}

); } // ---------- Page 4 — 3D Relationship Gallery Cinematic ---------- // RAF 기반 부드러운 스크롤 이징 + 카드별 blur/opacity/scale DoF + cinematic 엔딩 function Page4Gallery({ next }) { const [mouse, setMouse] = useState1({ x: 0, y: 0 }); const [currentDepth, setCurrentDepth] = useState1(0); const [focused, setFocused] = useState1(false); const [zoomIn, setZoomIn] = useState1(false); const depthRef = useRef1(0); const targetRef = useRef1(0); // 9장 — 공간감 있는 깊이 배치, pet 카드가 가장 안쪽 몰입 목적지 // num: assets/slides/page4/{NN}.jpg 슬롯. pet=09 가 page4_final 의 자리 (마지막 등장) const cards = React.useMemo(() => ([ { id: 'grand', num: '01', x: 18, y: 30, z: 180, w: 230, h: 280, rx: -4, ry: 8 }, { id: 'couple', num: '02', x: 82, y: 40, z: 80, w: 210, h: 260, rx: 4, ry: -8 }, { id: 'army', num: '03', x: 22, y: 78, z: -180, w: 190, h: 230, rx: -5, ry: 5 }, { id: 'parent', num: '04', x: 35, y: 18, z: -420, w: 185, h: 225, rx: 3, ry: -4 }, { id: 'friend', num: '05', x: 70, y: 22, z: -520, w: 175, h: 210, rx: -4, ry: 5 }, { id: 'team', num: '06', x: 88, y: 62, z: -700, w: 170, h: 200, rx: 5, ry: -4 }, { id: 'mentor', num: '07', x: 14, y: 52, z: -950, w: 150, h: 180, rx: 3, ry: 8 }, { id: 'class', num: '08', x: 66, y: 78, z:-1120, w: 150, h: 180, rx: 5, ry: 4 }, { id: 'pet', num: '09', x: 50, y: 50, z:-1550, w: 340, h: 430, rx: 0, ry: 0, main: true } ]), []); // 이벤트 리스너 — focused/zoomIn ref 로 읽어 리스너 재바인딩 최소화 const focusedRef = useRef1(focused); const zoomInRef = useRef1(zoomIn); focusedRef.current = focused; zoomInRef.current = zoomIn; useEffect1(() => { const onMouseMove = (e) => { const nx = (e.clientX / window.innerWidth - 0.5) * 2; const ny = (e.clientY / window.innerHeight - 0.5) * 2; setMouse({ x: nx, y: ny }); }; const onWheel = (e) => { if (focusedRef.current) return; e.preventDefault(); targetRef.current = Math.max(-100, Math.min(1450, targetRef.current + e.deltaY * 1.15)); if (targetRef.current >= 1380 && !zoomInRef.current) { setZoomIn(true); setTimeout(() => setFocused(true), 950); } }; window.addEventListener('mousemove', onMouseMove); window.addEventListener('wheel', onWheel, { passive: false }); return () => { window.removeEventListener('mousemove', onMouseMove); window.removeEventListener('wheel', onWheel); }; }, []); // RAF 이징 — 델타가 0.15 이하일 땐 setState 스킵해서 idle 시 재렌더 방지 useEffect1(() => { let frame; const animate = () => { const diff = targetRef.current - depthRef.current; depthRef.current += diff * 0.075; if (Math.abs(diff) > 0.15) { setCurrentDepth(depthRef.current); } frame = requestAnimationFrame(animate); }; animate(); return () => cancelAnimationFrame(frame); }, []); const parX = mouse.x * 32; const parY = mouse.y * 24; return (

{/* paper texture */}

")`, mixBlendMode: 'multiply', opacity: 0.38, pointerEvents: 'none' }} /> {/* vignette */}

{/* center question */}

당신에게
끝까지 지키고 싶은 관계는
무엇인가요?

{/* 3D camera */}

{cards.map((c) => { const sceneZ = c.z + currentDepth; const distance = Math.abs(sceneZ); const isMain = c.main; // DoF — 거리에 따른 blur const blur = isMain ? Math.max(0, Math.min(5, distance * 0.002)) : Math.max(0.2, Math.min(7, distance * 0.0035)); // pet 카드는 depth 550~ 에서 서서히 등장, 일반 카드는 깊이 들어갈수록 감쇠 const opacity = isMain ? Math.max(0, Math.min(1, (currentDepth - 550) / 520)) : Math.max(0.2, 1 - currentDepth / 1600); // pet 카드 근접시 확대, 일반 카드는 sceneZ에 비례 미세 확대 const scale = isMain ? 1 + Math.max(0, currentDepth - 900) * 0.00035 : 1 + sceneZ * 0.00018; const shadowPower = isMain ? 0.38 : 0.2; const shadowY = isMain ? 36 : 22; // 세피아 톤 변주 (image asset 없이 자연스러운 사진 톤) const sepiaHue = 24 + (c.x * 0.7 + c.y * 0.3) % 18; const sepiaTop = `hsl(${sepiaHue}, 34%, 74%)`; const sepiaBot = `hsl(${sepiaHue - 4}, 30%, 54%)`; return (

{ if (isMain && !zoomIn) { setZoomIn(true); setTimeout(() => setFocused(true), 850); } }} style={{ position: 'absolute', left: `${c.x}%`, top: `${c.y}%`, width: c.w, height: c.h, transform: ` translate(-50%, -50%) translateZ(${c.z}px) rotateY(${c.ry || 0}deg) rotateX(${c.rx || 0}deg) scale(${scale}) `, transformStyle: 'preserve-3d', opacity, filter: `blur(${blur}px)`, zIndex: isMain ? 20 : 'auto', cursor: isMain ? 'pointer' : 'default', transition: 'opacity 0.45s ease, filter 0.45s ease', willChange: 'transform, opacity, filter' }}>

{/* 실 이미지 — assets/slides/page4/{num}.jpg, 로드 실패 시 그라디언트 폴백 */}

{ e.currentTarget.style.display = 'none'; }} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center', display: 'block', /* 비메인은 세피아 톤, 메인은 풀컬러 + 약한 따뜻한 톤 */ filter: isMain ? 'saturate(1.05) contrast(1.04)' : 'sepia(0.42) saturate(0.85) contrast(0.96) brightness(0.96)' }} /> {/* 톤 오버레이 */}

{/* 내부 비네트 (non-main) */} {!isMain &&

}

); })}

{/* cinematic focus reveal */} {focused && (

엄흥도와 단종의 관계는,
시대를 넘어 여전히 반복되고 있습니다.

{/* 고양이 발바닥 버튼 — 원래 디자인 복구 */}

)} {!focused && (

MOVE MOUSE · SCROLL TO FLY FORWARD · 안쪽으로 진입하세요

)}

); } // ---------- Page 5 — Around Text (center card deck, wheel-driven) ---------- function Page5AroundText({ next }) { // 상단 인트로 — 두 줄로 나누고 두 번째 줄 들여쓰기 const headlineLine1 = "우연한 만남이 애정으로, 그 애정이 곁에 머무는 순간들 —"; const headlineLine2 = "화면 너머 우리 일상에도 있습니다."; // Each card = relationship snapshot. img 경로에 실제 이미지 넣으면 전체를 덮음. // (page5_01.png ~ page5_06.png 기대. 없으면 bg 색 placeholder 로 대체) const cards = [ { label: '골목길의 첫 눈 맞춤', num: '001', bg: '#c9b89a', fg: '#3a2a14', img: 'assets/slides/page5/01.png' }, { label: '처음 건넨 사료 한 줌', num: '002', bg: '#8aa6b8', fg: '#0e1e2a', img: 'assets/slides/page5/02.png' }, { label: '창가에서 보낸 오후', num: '003', bg: '#a8b89a', fg: '#1a2a12', img: 'assets/slides/page5/03.png' }, { label: '함께한 조용한 밤', num: '004', bg: '#3a3a4a', fg: '#e8e8f0', img: 'assets/slides/page5/04.png' }, { label: '병원 가는 긴 길', num: '005', bg: '#c9a0a0', fg: '#3a1414', img: 'assets/slides/page5/05.png' }, { label: '오늘의 당신', num: '006', bg: '#d9b35a', fg: '#2a1a06', hi: true, img: 'assets/slides/page5/06.png' }]; const total = cards.length; // progress: float 0 .. total. i < progress → card i has passed; int part = currently-centered card const [progress, setProgress] = useState1(0); const accRef = useRef1(0); useEffect1(() => { const onWheel = (e) => { e.preventDefault(); accRef.current += e.deltaY; // slow reveal — 240px per card const p = Math.max(0, Math.min(total, accRef.current / 240)); setProgress(p); }; window.addEventListener('wheel', onWheel, { passive: false }); return () => window.removeEventListener('wheel', onWheel); }, [total]); return (

{/* Paper grain */}

")`, mixBlendMode: 'multiply', opacity: 0.4 }} /> {/* Top headline — "AROUND US · 05" 라벨 제거, 두 줄 + 두 번째 줄 들여쓰기 */}

{headlineLine1}

{/* 두 번째 줄 — "순간들 —" 뒤로 들여쓰기 */}

{headlineLine2}

{/* Center card deck — 3D 공간감 강화 (perspective ↑ + rotateX 기울기 + Z 축 분산) */}

{cards.map((c, i) => { // d=0 현재 중심, d<0 지나간 카드, d>0 뒤에서 기다리는 카드 const d = i - progress; // Y 이동: 아래에서 위로 흐름 const y = d * 200; // Z 축: 중앙 카드가 앞, 양쪽 멀수록 뒤로 (3D 깊이감) const zDepth = -Math.abs(d) * 180; // X 축: 카드가 흐를수록 살짝 좌우 흩어짐 (holo card 느낌) const xOffset = d * 20; // 크기: 중앙에서 멀수록 작게 const scale = Math.max(0.68, 1 - Math.abs(d) * 0.1); // 회전: Y축 (좌우 기울기) + X축 (앞뒤 기울기) const rotY = d * -8; // 지나간 카드는 왼쪽으로, 앞 카드는 오른쪽으로 const rotX = d * 6; // 위쪽으로 갈수록 뒤로 기울임 // opacity: 양끝에서 서서히 사라짐 const opacity = Math.max(0, 1 - Math.abs(d) * 0.3); const isFocus = Math.abs(d) < 0.5; const zIndex = Math.round(100 - Math.abs(d) * 10); return (

{/* 실제 이미지 — 카드 전체 커버. 로드 실패 시 bg 색 placeholder */}

{ e.target.style.display = 'none'; }} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center', display: 'block' }} /> {/* 글래스 상단 하이라이트 — 위에서 비친 듯한 반사광 */}

{/* 하단 미묘한 그림자 — 두께의 하단면 느낌 */}

{/* 내부 굴절 테두리 — 유리 가장자리의 빛 번짐 */}

{/* 대각선 미세 스펙큘러 — 유리의 반사 질감 */}

); })}

{/* Progress indicator (right side) */}

{cards.map((_, i) => { const active = Math.abs(i - progress) < 0.5; const passed = i < progress; return (

); })}

{/* Scroll hint */}

↓ 휠을 천천히 굴려보세요

{progress >= total - 0.5 && }

); } // ---------- Page 6 — Discover (hanji paper, title.png reuse, friend DM popup) ---------- function Page6Discover({ next }) { const [phase, setPhase] = useState1(0); // 0: brand lockup, 1: title shown, 2: DM popup useEffect1(() => { const t1 = setTimeout(() => setPhase(1), 1400); const t2 = setTimeout(() => setPhase(2), 3200); return () => {clearTimeout(t1);clearTimeout(t2);}; }, []); return (

= 2 ? 'pointer' : 'default' }} onClick={phase >= 2 ? next : undefined}> {/* Hanji paper base */}

{/* Hanji grain */}

")`, mixBlendMode: 'multiply', opacity: 0.55, pointerEvents: 'none' }} /> {/* Long fibers */}

")`, mixBlendMode: 'multiply', opacity: 0.4, pointerEvents: 'none' }} /> {/* Soft vignette */}

{/* Brand lockup — small, centered. Moves to top in phase 1 */}

{"Cat's Warden.".split('').map((ch, i) => {ch === ' ' ? '\u00A0' : ch} )}

{/* Reused title.png — centered */}

= 1 ? 1 : 0, transform: phase >= 1 ? 'translateY(0) scale(1)' : 'translateY(16px) scale(0.98)', filter: phase >= 1 ? 'blur(0)' : 'blur(6px)', transition: 'opacity 1.4s ease, transform 1.4s cubic-bezier(.2,.85,.25,1), filter 1.2s ease', mixBlendMode: 'multiply' }} />

{/* DM popup sliding from bottom */}

= 2 ? 'translate(-50%, 0)' : 'translate(-50%, 180%)', opacity: phase >= 2 ? 1 : 0, transition: 'transform 1.1s cubic-bezier(.2,.85,.3,1), opacity 0.6s ease', width: 360, background: 'rgba(38,38,38,0.95)', backdropFilter: 'blur(10px)', borderRadius: 14, padding: '14px 16px', display: 'flex', alignItems: 'center', gap: 12, color: '#fff', fontFamily: 'var(--sans)', boxShadow: '0 16px 48px rgba(0,0,0,0.35)', border: '1px solid rgba(255,255,255,0.06)' }}>

yaho_friend

야, 나 얼마 전에 고양이 데려와서…

now

); } Object.assign(window, { Page1Intro, Page2Historical, Page3AroundUs, Page4Gallery, Page5AroundText, Page6Discover });