);
}
/* celestial diagram of the four movements — crafted, Co-Star-flavoured (hover a body to reveal it) */
function ApproachPillars() {
const pillars = [
["I", "Sense", "The body reads a room before the mind does.", "sense", "locked/hotel-materials.jpg", "#8a8272"],
["II", "Shape", "Order in the space becomes order in the head.", "shape", "locked/destino-akari.jpg", "#b1a48c"],
["III", "Regulate", "Light, air and materials tuned to your nervous system.", "regulate", "locked/hero-candles.jpg", "#a99b86"],
["IV", "Restore", "A space that gives energy back, not takes it.", "restore", "locked/hotel-tea.jpg", "#6f6a60"],
];
return (
The Approach
We design how a space makes you feel.
Four movements behind every Monics space, from the first sense of a room to its lasting restoration.
);
}
/* booking steps — editorial numbered index */
function BookSteps() {
const steps = [
["01", "Tell us about your space"],
["02", "We talk it through"],
["03", "A path forward"],
];
return (
{steps.map(([n, t]) => (
{n}{t}
))}
);
}
function HomeLive() {
const [level, setLevel] = useState("Subtle");
// apply rise distance as CSS var
useEffect(() => {
document.documentElement.style.setProperty("--rise", LEVELS[level].rise + "px");
}, [level]);
// reveal-on-scroll
useEffect(() => {
const els = document.querySelectorAll(".reveal, .stag, .sensory");
const io = new IntersectionObserver((entries) => {
entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } });
}, { threshold: 0.18, rootMargin: "0px 0px -8% 0px" });
els.forEach(el => io.observe(el));
return () => io.disconnect();
}, []);
// parallax drift
useEffect(() => {
let raf = null;
const update = () => {
raf = null;
const range = LEVELS[level].par;
const wh = window.innerHeight;
document.querySelectorAll("[data-par]").forEach(el => {
const frame = el.parentElement;
const r = frame.getBoundingClientRect();
if (r.bottom < -300 || r.top > wh + 300) return;
// progress: 0 when frame just enters from bottom, 1 when it just leaves at top
const progress = (wh - r.top) / (wh + r.height);
const t = (0.5 - progress) * range; // +range/2 (low) → -range/2 (high) as we scroll down
el.style.transform = `translate3d(0, ${t.toFixed(1)}px, 0)`;
});
};
const onScroll = () => { if (!raf) raf = requestAnimationFrame(update); };
update();
window.addEventListener("scroll", onScroll, { passive: true });
window.addEventListener("resize", onScroll, { passive: true });
return () => { window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); if (raf) cancelAnimationFrame(raf); };
}, [level]);
return (