// Variation C — Zine. Full-bleed scenes, immersive horizontal panels stacked // vertically. Minimal chrome, tiny serif captions, big visual rhythm. function VariationZine({ accent }) { const [view, setView] = React.useState({ page: 'index', id: null }); const [query, setQuery] = React.useState(''); const [progress, setProgress] = React.useState(0); const [menuOpen, setMenuOpen] = React.useState(false); const scrollRef = React.useRef(null); const filtered = ARTICLES.filter(a => !query || a.title.includes(query) || a.region.includes(query) || a.titleEn.toLowerCase().includes(query.toLowerCase()) ); const current = ARTICLES.find(a => a.id === view.id); const open = (id) => { setView({ page: 'article', id }); setMenuOpen(false); if (scrollRef.current) scrollRef.current.scrollTop = 0; }; const home = () => { setView({ page: 'index', id: null }); setMenuOpen(false); if (scrollRef.current) scrollRef.current.scrollTop = 0; }; const onScroll = (e) => { const el = e.currentTarget; const max = el.scrollHeight - el.clientHeight; setProgress(max > 0 ? el.scrollTop / max : 0); }; return (

{/* scroll progress */}

バイク日和

Zine · Vol. 04

{String(filtered.length).padStart(2, '0')} / {String(ARTICLES.length).padStart(2, '0')}

setMenuOpen(false)} articles={ARTICLES} currentId={view.id} onPick={open} onHome={home} accent={accent} /> {view.page === 'index' ? ( <> {/* opening spread */}

{/* 左：メインコピー */}

— Spring 2026 · A Single Journey

風と、
路面と、
静けさ。

A motorcycle journal. Routes, photographed only with words. Scroll to begin.

{/* 右：巻号・記事数 */}

Vol.

{ARTICLES.length} Routes

京都 · Kansai

2026

{/* article panels */} {filtered.map((a, i) => (

open(a.id)} className="zine-panel" style={{ cursor: 'pointer', position: 'relative', height: 560, overflow: 'hidden', }}> {/* ベース暗幕（明るい写真でも文字が読めるよう底上げ） */}

{/* 左上ラベル */}

{String(i + 1).padStart(2, '0')} {a.region}

{a.title}

{a.titleEn}

{a.excerpt}

{a.distance} {a.duration} {a.date}

))} ) : current && ( )}

); } function ZineSearch({ value, onChange }) { return ( onChange(e.target.value)} placeholder="探す / Search" className="zine-header-search" style={{ border: 0, borderBottom: '0.5px solid rgba(255,255,255,0.4)', background: 'transparent', outline: 0, color: '#fff', fontFamily: '"Noto Serif JP", serif', fontSize: 13, width: 140, padding: '4px 0', }} /> ); } function ArticleZine({ article, onBack, accent }) { return ( <>

{/* top scrim — protects the title against bright skies */}

{/* title block — anchored to the TOP, sitting in the sky area */}

{article.issue} · {article.region} · {article.date}

{article.title}

{article.titleEn}

{[ ['距離', article.distance], ['標高', article.elevation], ['所要', article.duration], ['季節', article.season], ].map(([k, v]) => (

{k}

{v}

))}

{article.body.map((p, i) => (

{p}

))}

※ ※ ※

); } window.VariationZine = VariationZine; function Backdrop({ article, style, children }) { if (article.image) { return (

{children}

); } return {children}; } function IndexDrawer({ open, onClose, articles, currentId, onPick, onHome, accent }) { React.useEffect(() => { if (!open) return; const onKey = (e) => { if (e.key === 'Escape') onClose(); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [open, onClose]); return ( <> {/* scrim */}

{/* panel */}

Index · 目次

すべての記事

{articles.map((a, i) => { const isCurrent = a.id === currentId; return ( ); })}

Esc to close {articles.length} entries

); }

風と、路面と、静けさ。

{a.title}

{article.title}

風と、
路面と、
静けさ。