// sections.jsx // stellare bonin — all section components. // Exports to window so app.jsx can pick them up. const { useState, useEffect, useRef, useMemo } = React; // ─── Hooks ────────────────────────────────────────────────────────────────── function useScrollY() { const [y, setY] = useState(typeof window !== "undefined" ? window.scrollY : 0); useEffect(() => { let raf = 0; const onScroll = () => { cancelAnimationFrame(raf); raf = requestAnimationFrame(() => setY(window.scrollY)); }; window.addEventListener("scroll", onScroll, { passive: true }); onScroll(); return () => { window.removeEventListener("scroll", onScroll); cancelAnimationFrame(raf); }; }, []); return y; } function useParallax(ref, speed = 0.2) { const y = useScrollY(); const [offset, setOffset] = useState(0); useEffect(() => { if (!ref.current) return; const rect = ref.current.getBoundingClientRect(); const vh = window.innerHeight; // distance from element center to viewport center, normalised const center = rect.top + rect.height / 2 - vh / 2; setOffset(-center * speed); }, [y, speed, ref]); return offset; } // Phase 3.H: スクロールアニメ修復。threshold 0.18 → 0.1、rootMargin -40px で発火を早める。 function useReveal(threshold = 0.1) { const ref = useRef(null); const [shown, setShown] = useState(false); useEffect(() => { if (!ref.current) return; const io = new IntersectionObserver( (entries) => { entries.forEach((e) => { if (e.isIntersecting) { setShown(true); io.disconnect(); } }); }, { threshold, rootMargin: '0px 0px -40px 0px' } ); io.observe(ref.current); return () => io.disconnect(); }, [threshold]); return [ref, shown]; } // ─── Image helpers ────────────────────────────────────────────────────────── const IMG = { // Stories bonin: "assets/stories/bonin-blue.webp", // Phase 3.E: ホエール画像（尾びれだけ）が不評のため Unsplash クジラ全身画像に差し戻し whale: "https://images.unsplash.com/photo-1568430462989-44163eb1752f?w=1200&h=1500&fit=fill&fill=blur&q=80&auto=format", stars: "assets/stories/rooftop-deck.webp", // Stories No.03 用（重複解消） // Bleed coast: "assets/manifesto/ferry-funnel.webp", // Suites villa1: "assets/suites/ocean-villa.webp", villa2: "assets/suites/sky-suite.webp", villa3: "assets/suites/cetacean-pavilion.webp", villa4: "assets/suites/crest-residence.webp", // Dining dining1: "assets/dining/so-counter.webp", dining2: "assets/dining/lapa-terrace.webp", dining3: "assets/dining/nocturne.webp", // Activities snorkel: "assets/activities/snorkel.webp", // Phase 3.E: ドルフィン画像（イルカが欠けて見える）が不評のため Unsplash イルカ全体画像に差し戻し dolphin: "https://images.unsplash.com/photo-1607153333879-c174d265f1d2?w=1600&q=80&auto=format&fit=crop", stars_deck: "assets/activities/stargazing-deck.webp", // Activities 04 用（Stories とは別画像） kayak: "assets/activities/kayak.webp", forest: "assets/activities/forest.webp", spa: "assets/activities/spa.webp" }; // ─── Nav ───────────────────────────────────────────────────────────────────── function Nav() { const y = useScrollY(); // M3: Hero の高さ（window.innerHeight）を超えたらソリッドへ const solid = y > window.innerHeight; // Phase 5.1 (C5): Easter Egg — ロゴ 5 連打で制作プロセスモーダルを開く const [eggCount, setEggCount] = useState(0); const [eggOpen, setEggOpen] = useState(false); const eggTimerRef = useRef(null); // Phase 3.X: モバイルハンバーガーメニュー const [menuOpen, setMenuOpen] = useState(false); const handleBrandClick = () => { const next = eggCount + 1; if (next >= 5) { setEggOpen(true); setEggCount(0); if (eggTimerRef.current) clearTimeout(eggTimerRef.current); return; } setEggCount(next); // 2 秒以内に次のクリックが無ければカウンタをリセット if (eggTimerRef.current) clearTimeout(eggTimerRef.current); eggTimerRef.current = setTimeout(() => setEggCount(0), 2000); }; // メニュー開閉 const toggleMenu = () => setMenuOpen((v) => !v); const closeMenu = () => setMenuOpen(false); // body スクロールロック（メニュー開時） useEffect(() => { if (menuOpen) { const prev = document.body.style.overflow; document.body.style.overflow = "hidden"; return () => { document.body.style.overflow = prev; }; } }, [menuOpen]); // ESC キーで閉じる useEffect(() => { const onEsc = (e) => { if (e.key === "Escape") closeMenu(); }; window.addEventListener("keydown", onEsc); return () => window.removeEventListener("keydown", onEsc); }, []); return ( <> {/* Phase 3.X: モバイル全画面メニュー */}
{ if (e.target.classList.contains("mobile-menu")) closeMenu(); }}>
— at the quiet edge of the Pacific —
{eggOpen && setEggOpen(false)} />} ); } // ─── Phase 5.1 (C5): Easter Egg Modal ──────────────────────────────────────── function EasterEggModal({ onClose }) { useEffect(() => { const onEsc = (e) => { if (e.key === "Escape") onClose(); }; window.addEventListener("keydown", onEsc); const prevOverflow = document.body.style.overflow; document.body.style.overflow = "hidden"; return () => { window.removeEventListener("keydown", onEsc); document.body.style.overflow = prevOverflow; }; }, [onClose]); return (
{ if (e.target.classList.contains("egg-overlay")) onClose(); }} role="dialog" aria-modal="true" aria-labelledby="egg-title">
— Behind the curtain —

stellare bonin について
About this portfolio

このサイトは、Luna（インフラエンジニア・AI実験者）と Claude （Anthropic のAI）が協働で作ったポートフォリオ作品です。 stellare bonin は架空のリゾートですが、 設計の問いは実在します—

サイトに「必然性」を感じさせるには？
嘘をつかないコピーをどう書くか？
写真に語らせるには？

生成AIと人間の協働で、商業レベルのラグジュアリーホテルLPが どこまで成立するかの実験記録です。

— Luna, 2026 Designed with Claude
); } // ─── Hero ──────────────────────────────────────────────────────────────────── const HERO_SLIDES = [ { src: "assets/hero/cove-overlook.webp", caption: ["The Pacific Horizon · 27°N · May 2026", "South Cape, 14:08 JST"] }, { src: "assets/hero/bay-overlook.webp", caption: ["The Bonin Blue Bay · 27°N · June 2026", "Sakaiura, 09:18 JST"] }, { src: "assets/hero/coral-staghorn.webp", caption: ["The Staghorn Garden · 27°N · April 2026", "−4 m, 11:02 JST"] }, { src: "assets/hero/milkyway.webp", caption: ["The Milky Way · 27°N · December 2026", "Chichijima, 23:47 JST"] }, ]; function Hero() { const mediaRef = useRef(null); const offset = useParallax(mediaRef, 0.18); const [active, setActive] = useState(0); const [pause, setPause] = useState(false); useEffect(() => { if (pause) return; const id = setInterval(() => { setActive((i) => (i + 1) % HERO_SLIDES.length); }, 6500); return () => clearInterval(id); }, [pause]); const current = HERO_SLIDES[active]; const pad = (n) => String(n).padStart(2, "0"); return (
{HERO_SLIDES.map((s, i) => /* Phase 3.E: 枝珊瑚（スライド3）は小笠原素材として静止画で残す。Phase 3.A の動画化は取りやめ */ /* Phase 3.N: 1 枚目のみ eager+fetchpriority=high、2-4 枚目は lazy で document_idle 詰まり解消 */ {s.caption[0]} )}
); } // ─── Prologue ──────────────────────────────────────────────────────────────── function Prologue() { const [ref, shown] = useReveal(); return (
— Prologue · 序 —

飛行機の届かない場所に、
いま、ひとつの島がある。

東京・竹芝から、おがさわら丸でおよそ24時間。海は次第に深く、群青から、誰も名づけえぬ青へと変わってゆく。1830年、欧米から渡った最初の移住者たちが、この群島をBonin Islandsと呼んだ——「無人」を意味する、静謐な響きで。

stellare bonin は、その島のもっとも遠いひと隅で、わずか十七室。海と、空と、夜のために設えた、星のかたちをした宿。

); } // ─── Story blocks ──────────────────────────────────────────────────────────── function Story({ no, en, ja, body, meta, img, caption, reverse }) { const [ref, shown] = useReveal(); const mediaRef = useRef(null); const offset = useParallax(mediaRef, 0.08); // Phase 3.G: Phase 3.F の