/* global React, ReactDOM */
const { useState, useEffect, useRef, useContext, createContext } = React;
// ────────────────────────────────────────────────────────────
// Design tokens
// ────────────────────────────────────────────────────────────
const C = {
cream: '#F4EFE6',
creamDeep: '#EBE3D4',
ink: '#1A1A1A',
ink70: 'rgba(26,26,26,0.7)',
ink50: 'rgba(26,26,26,0.5)',
ink30: 'rgba(26,26,26,0.3)',
ink15: 'rgba(26,26,26,0.15)',
teal: '#2C7A7B',
tealDeep: '#1F5757',
tealInk: '#16403F',
tealMist: 'rgba(44,122,123,0.08)',
};
const F = {
jp: '"Shippori Mincho", "Noto Serif JP", "Hiragino Mincho ProN", serif',
brand: '"Cormorant Garamond", "EB Garamond", serif',
mono: '"JetBrains Mono", "SFMono-Regular", ui-monospace, monospace',
};
// ────────────────────────────────────────────────────────────
// Brand-kit decorations — catalog + Tweaks context
// Each deco has a stable id so the Tweaks UI can target it.
// Defaults can be overridden per-id via localStorage.
// ────────────────────────────────────────────────────────────
// Helper: convert a 375px-baseline size to a fluid clamp() string.
// Decorations shrink ~15% at narrow widths (~320), grow ~25% at wide
// widths (~480+), and stay readable across the mobile range (320–819).
const fluidSize = (base) => {
const min = Math.round(base * 0.85);
const vw = (base / 3.75).toFixed(1);
const max = Math.round(base * 1.25);
return `clamp(${min}px, ${vw}vw, ${max}px)`;
};
// Helper: anchor-axis value that scales with viewport (for top/left where
// content height also scales). Pass the 375px baseline pixel value.
const fluidAxis = (base) => {
// grow proportionally to viewport, with min 0.85x and max 1.5x of baseline
const v = base / 3.75; // vw at baseline 375
const lo = Math.round(base * 0.85);
const hi = Math.round(base * 1.5);
if (base < 0) return `clamp(${hi}px, ${v.toFixed(1)}vw, ${lo}px)`;
return `clamp(${lo}px, ${v.toFixed(1)}vw, ${hi}px)`;
};
const DECO_DEFAULTS = {
'hero-tarot-moon': { section: 'hero', label: 'Tarot — Moon', kind: 'tarot-moon', size: fluidSize(150), ratio: 1.5, rotate: 18, opacity: 0.55, color: 'teal', anchor: { top: -10, right: fluidAxis(-28) } },
'hero-cat-sit': { section: 'hero', label: 'Cat — Sit', kind: 'cat-sit', size: fluidSize(170), ratio: 1, rotate: 0, opacity: 0.9, color: 'teal', anchor: { top: fluidAxis(230), right: fluidAxis(-18) } },
'about-tarot-cup': { section: 'about', label: 'Tarot — Cup', kind: 'tarot-cup', size: fluidSize(140), ratio: 1.5, rotate: -22, opacity: 0.32, color: 'teal', anchor: { top: 40, left: fluidAxis(-38) } },
'about-cat-walk': { section: 'about', label: 'Cat — Walk', kind: 'cat-walk', size: fluidSize(110), ratio: 1, rotate: 0, opacity: 0.55, color: 'teal', anchor: { top: 28, right: fluidAxis(-8) } },
'menu-cat-curl': { section: 'menu', label: 'Cat — Curl', kind: 'cat-curl', size: fluidSize(130), ratio: 1, rotate: 0, opacity: 0.85, color: 'teal', anchor: { top: 24, right: fluidAxis(-20) } },
'menu-cat-jump': { section: 'menu', label: 'Cat — Jump', kind: 'cat-jump', size: fluidSize(110), ratio: 1, rotate: 0, opacity: 0.7, color: 'teal', anchor: { bottom: fluidAxis(60), left: fluidAxis(-16) } },
'menu-cat-walk': { section: 'menu', label: 'Cat — Walk', kind: 'cat-walk', size: fluidSize(90), ratio: 1, rotate: 0, opacity: 0.45, color: 'teal', anchor: { top: '52%', right: fluidAxis(-10) } },
'gallery-tarot-moon': { section: 'gallery', label: 'Tarot — Moon', kind: 'tarot-moon', size: fluidSize(130), ratio: 1.5, rotate: -16, opacity: 0.6, color: 'teal', anchor: { top: 30, right: fluidAxis(-28) } },
'gallery-cat-curl': { section: 'gallery', label: 'Cat — Curl', kind: 'cat-curl', size: fluidSize(120), ratio: 1, rotate: 0, opacity: 0.85, color: 'teal', anchor: { bottom: fluidAxis(80), left: fluidAxis(-22) } },
'info-cat-curl': { section: 'info', label: 'Cat — Curl', kind: 'cat-curl', size: fluidSize(140), ratio: 1, rotate: 0, opacity: 0.6, color: 'cream', anchor: { bottom: fluidAxis(70), right: fluidAxis(-28) } },
'info-cat-walk': { section: 'info', label: 'Cat — Walk', kind: 'cat-walk', size: fluidSize(88), ratio: 1, rotate: 0, opacity: 0.4, color: 'cream', anchor: { top: 40, left: fluidAxis(-10) } },
'footer-cat-sit': { section: 'footer', label: 'Cat — Sit', kind: 'cat-sit', size: fluidSize(72), ratio: 1, rotate: 0, opacity: 0.45, color: 'teal', anchor: { top: 18, right: fluidAxis(-6) } },
};
const TWEAKS_KEY = 'cafemicio-mobile-deco-tweaks-v1';
const TweaksContext = createContext({
tweaks: {},
update: () => {}, resetOne: () => {}, resetAll: () => {},
});
function TweaksProvider({ children }) {
const [tweaks, setTweaks] = useState(() => {
try { return JSON.parse(localStorage.getItem(TWEAKS_KEY) || '{}'); }
catch { return {}; }
});
useEffect(() => {
try { localStorage.setItem(TWEAKS_KEY, JSON.stringify(tweaks)); } catch {}
}, [tweaks]);
const update = (id, patch) =>
setTweaks(t => ({ ...t, [id]: { ...(t[id] || {}), ...patch } }));
const resetOne = (id) =>
setTweaks(t => { const n = { ...t }; delete n[id]; return n; });
const resetAll = () => setTweaks({});
return (
{children}
);
}
function BrandDeco({ id }) {
const { tweaks } = useContext(TweaksContext);
const def = DECO_DEFAULTS[id];
if (!def) return null;
const t = tweaks[id] || {};
if (t.enabled === false) return null;
const baseColor = def.color === 'cream' ? C.cream : C.teal;
const tx = t.x != null ? t.x : 0;
const ty = t.y != null ? t.y : 0;
const scale = t.scale != null ? t.scale : 1;
const rot = t.rot != null ? t.rot : def.rotate;
const opacity = t.opacity != null ? t.opacity : def.opacity;
const url = `/assets/brand-kit/individual/${def.kind}-mask.png`;
// Width can be a number (px) or a CSS string (e.g. clamp()).
// Height = width * ratio. Build CSS strings so both fluid + fixed work.
const widthCss = typeof def.size === 'number' ? `${def.size}px` : def.size;
const heightCss = def.ratio === 1
? widthCss
: (typeof def.size === 'number'
? `${def.size * def.ratio}px`
: `calc(${widthCss} * ${def.ratio})`);
return (
);
}
// ────────────────────────────────────────────────────────────
// Tiny illustrations
// ────────────────────────────────────────────────────────────
const CatSilhouette = ({ size = 36, color = C.teal, opacity = 1, style }) => (
);
const WalkingCat = ({ size = 60, color = C.teal, opacity = 0.16, style }) => (
);
const TarotMoon = ({ size = 56, color = C.teal, opacity = 0.45, style }) => (
);
const TarotCup = ({ size = 56, color = C.teal, opacity = 0.45, style }) => (
);
// Image placeholder — striped, with optional label
const Placeholder = ({ w = '100%', h = 200, label, tone = 'teal', radius = 0, style, src, alt }) => {
const palettes = {
teal: { bg: '#E5DDD0', stripe: 'rgba(44,122,123,0.18)', text: C.tealInk },
warm: { bg: '#E8DCC8', stripe: 'rgba(118,76,40,0.18)', text: '#5a3a1c' },
deep: { bg: '#D9CFBE', stripe: 'rgba(31,87,87,0.25)', text: C.tealDeep },
};
const p = palettes[tone] || palettes.teal;
return (
{/* striped fallback */}
{src && (
)}
{label && (
{label}
)}
{children}
);
}
// ────────────────────────────────────────────────────────────
// Brand mark
// ────────────────────────────────────────────────────────────
const BrandMark = ({ size = 18, color = C.tealDeep }) => (
);
// ────────────────────────────────────────────────────────────
// Sticky nav
// ────────────────────────────────────────────────────────────
function Nav({ onMenu, scrolled }) {
return (
);
}
// ────────────────────────────────────────────────────────────
// Section number heading
// ────────────────────────────────────────────────────────────
const SectionHead = ({ num, kanji, latin }) => (
);
// ────────────────────────────────────────────────────────────
// HERO
// ────────────────────────────────────────────────────────────
function Hero() {
return (
{/* Brand-kit decorations (tweakable) */}
{/* mono kicker */}
EST. KOBE · NADA
{/* Big vertical kanji title */}
カフェ
ミーチョ
cafemicio
神戸・灘の住宅街にひっそり、
猫と過ごす午後のカフェ。
{/* chips */}
{/* CTA */}
Instagramで見る
↗
{/* Storefront photo with vertical caption */}
{/* Vertical FIG caption */}
FIG.00 — STOREFRONT
{/* Editorial frame number */}
00
{/* scattered cat */}
);
}
const Chip = ({ label, value }) => (
{label}
{value}
);
// ────────────────────────────────────────────────────────────
// ABOUT
// ────────────────────────────────────────────────────────────
function About() {
const tags = ['街のちいさなカフェ', '自家製スイーツ', '猫モチーフ', '落ち着いた時間', 'スパイスカレー'];
const photos = [
{ label: 'fig.01 · interior', tone: 'warm', src: '/assets/photos/interior-window-01.jpg', alt: '窓辺の席' },
{ label: 'fig.02 · counter', tone: 'teal', src: '/assets/photos/interior-counter-01.jpg', alt: 'カウンター' },
{ label: 'fig.03 · the shelf', tone: 'deep', src: '/assets/photos/interior-shelf.jpg', alt: '本棚' },
];
return (
神戸・灘の住宅街、坂の途中にある小さな喫茶店。白い壁と、店内に広がる淡いティール色のタイル。自家焙煎のコーヒーと、毎朝焼き上げるケーキ。街の音が遠くなる、ささやかな午後のために。
「ミーチョ (micio)」はイタリア語で猫の愛称。肩の力を抜いて、本を開いて、ひとりでもふたりでも、ゆっくり過ごしてもらえたら。
{/* keyword tags */}
{tags.map(t => (
{t}
))}
{/* horizontal carousel */}
{photos.map((p, i) => (
))}
{menuData.map((sec, i) => {
const isOpen = open === i;
return (
{sec.note && (
※ {sec.note}
)}
{sec.items.map((it, j) => (
{it.desc && (
{it.desc}
)}
))}
);
})}
{colA.map((it, i) => (
))}
{colB.map((it, i) => (
))}
);
}
// ────────────────────────────────────────────────────────────
// INFO (dark)
// ────────────────────────────────────────────────────────────
function Info() {
return (
場所と営業時間
〒657-0823
兵庫県神戸市灘区天城通4丁目1-1
ディアコート天城マンション101
09:30 — 17:30
(L.O. 17:00)
日曜日・水曜日
070-5043-0126
@cafemicio1121
{/* Map card */}
FIG.09 — LOCATION MAP
{/* Stylized map */}
cafemicio
Google Mapsで開く
↗
);
}
const InfoRow = ({ label, jp, children, last }) => (
);
// ────────────────────────────────────────────────────────────
// Footer
// ────────────────────────────────────────────────────────────
function Footer() {
return (
);
}
// ────────────────────────────────────────────────────────────
// Sticky bottom CTA
// ────────────────────────────────────────────────────────────
function StickyCTA({ visible }) {
return (
);
}
// ────────────────────────────────────────────────────────────
// Hamburger overlay
// ────────────────────────────────────────────────────────────
function MenuOverlay({ open, onClose }) {
const links = [
{ num: '01', jp: '店について', en: 'About' },
{ num: '02', jp: 'お品書き', en: 'Menu' },
{ num: '03', jp: '店内のようす', en: 'Gallery' },
{ num: '04', jp: '場所と営業時間', en: 'Info' },
];
return (
);
}
// ────────────────────────────────────────────────────────────
// TWEAKS PANEL — bottom-sheet UI for adjusting each deco
// ────────────────────────────────────────────────────────────
function TweaksPanel() {
const { tweaks, update, resetOne, resetAll } = useContext(TweaksContext);
const [open, setOpen] = useState(false);
const [hidden, setHidden] = useState(false);
const ids = Object.keys(DECO_DEFAULTS);
const sectionList = [...new Set(ids.map(id => DECO_DEFAULTS[id].section))];
const [sec, setSec] = useState(sectionList[0]);
const idsInSection = ids.filter(id => DECO_DEFAULTS[id].section === sec);
const [curId, setCurId] = useState(idsInSection[0]);
// keep curId valid when section changes
useEffect(() => {
if (!idsInSection.includes(curId)) setCurId(idsInSection[0]);
}, [sec]);
const def = DECO_DEFAULTS[curId];
const t = tweaks[curId] || {};
const enabled = t.enabled !== false;
const x = t.x != null ? t.x : 0;
const y = t.y != null ? t.y : 0;
const scale = t.scale != null ? t.scale : 1;
const rot = t.rot != null ? t.rot : def.rotate;
const opacity = t.opacity != null ? t.opacity : def.opacity;
const copyCSS = () => {
const lines = ids.map(id => {
const tk = tweaks[id]; if (!tk) return '';
const d = DECO_DEFAULTS[id];
if (tk.enabled === false) return `[data-deco-id="${id}"] { display: none !important; }`;
const tx = tk.x != null ? tk.x : 0, ty = tk.y != null ? tk.y : 0;
const sc = tk.scale != null ? tk.scale : 1;
const rr = tk.rot != null ? tk.rot : d.rotate;
const op = tk.opacity != null ? tk.opacity : d.opacity;
return `[data-deco-id="${id}"] { transform: translate(${tx}px, ${ty}px) rotate(${rr}deg) scale(${sc}); opacity: ${op}; }`;
}).filter(Boolean).join('\n');
navigator.clipboard?.writeText(lines).catch(()=>{});
};
if (hidden) return null;
// Floating toggle (gear) — bottom-left so it doesn't conflict with StickyCTA on right
return (
<>
{/* handle / header */}
Deco Tweaks
MOBILE · v1
{/* body — scrollable */}
{/* Section chips */}
{/* Deco chips for selected section */}
DECO_DEFAULTS[id].label}
/>
{/* Enable toggle */}
{/* Sliders */}
update(curId, { x: v })} suffix="px" />
update(curId, { y: v })} suffix="px" />
update(curId, { scale: v })} format={v => v.toFixed(2)} />
update(curId, { rot: v })} suffix="°" />
update(curId, { opacity: v })} format={v => v.toFixed(2)} />
{/* Actions */}
{values.map(v => {
const active = v === current;
const txt = labelFor ? labelFor(v) : v.toUpperCase();
return (
);
})}
);
}
function Slider({ label, value, min, max, step, onChange, suffix, format }) {
const disp = format ? format(value) : `${Math.round(value)}${suffix || ''}`;
return (
);
}
// ────────────────────────────────────────────────────────────
// App
// ────────────────────────────────────────────────────────────
function App() {
const [menuOpen, setMenuOpen] = useState(false);
const [scrolled, setScrolled] = useState(false);
const [ctaVisible, setCtaVisible] = useState(false);
const scrollRef = useRef(null);
useEffect(() => {
const el = scrollRef.current;
if (!el) return;
const onScroll = () => {
setScrolled(el.scrollTop > 24);
setCtaVisible(el.scrollTop > 380);
};
el.addEventListener('scroll', onScroll, { passive: true });
return () => el.removeEventListener('scroll', onScroll);
}, []);
// Track viewport-level scroll for sticky behaviors when running outside
// the iPhone-mockup frame (full-screen mobile deployment).
useEffect(() => {
const onScroll = () => {
const y = window.scrollY;
setScrolled(y > 24);
setCtaVisible(y > 380);
};
window.addEventListener('scroll', onScroll, { passive: true });
onScroll();
return () => window.removeEventListener('scroll', onScroll);
}, []);
return (
);
}
ReactDOM.createRoot(document.getElementById('root')).render();