/* Sauna + Flow — Smart brand-slide carousel.
Recreates the design-system brand deck (Title / Statement / Pillars / Stat /
Image / Quote / Identity / Mark) as a self-advancing, swipeable carousel
framed inside the marketing page. The slides are authored on a fixed
1280×720 canvas and scaled to the frame width so they stay brand-accurate. */
const SF_SLIDE_W = 1280,SF_SLIDE_H = 720;
function BrandSlides() {
const eb = (txt, style) => {txt}
;
const pillars = [
[asset("assets/pillar-physical.png"), "Physical", "Heat. Cold. Breathe.", "For a stronger body and better health."],
[asset("assets/pillar-social.png"), "Social", "Connection. Community.", "A space to belong and be together."],
[asset("assets/pillar-spiritual.png"), "Spiritual", "Rest. Restore.", "For clarity, calm and inner balance."]];
return [
// 1 — TITLE
Reset where you play.
,
// 2 — STATEMENT
{eb("The Ritual", { marginBottom: 26 })}
Sweat.Connect.
,
// 3a–3c — PILLARS (one slide each)
...pillars.map(([ic, t, s, d]) =>
{eb("Built on three pillars", { color: "rgba(35,31,32,.5)", marginBottom: 40 })}
{t}
{s}
{d}
{eb("A 60-minute nervous-system reset", { marginBottom: 40 })}
{eb("Mobile · London", { marginBottom: 16 })}
Heat. Cold.Connect.
Sauna and cold plunge for London's sports venues and communities.
,
// 6 — QUOTE
“
There's something pure and simple about heat. It's one of the oldest wellness practices we have.
,
// CLOSING MARK
Reset where you play.
];
}
function BrandCarousel() {
const slides = React.useMemo(() => BrandSlides(), []);
const N = slides.length;
const [idx, setIdx] = React.useState(0);
const [paused, setPaused] = React.useState(false);
const frameRef = React.useRef(null);
const canvasRef = React.useRef(null);
const [scale, setScale] = React.useState(1);
const reduce = React.useRef(typeof matchMedia !== "undefined" && matchMedia("(prefers-reduced-motion: reduce)").matches);
const DURATION = 6000;
const go = React.useCallback((n) => setIdx((n % N + N) % N), [N]);
const next = React.useCallback(() => go(idx + 1), [idx, go]);
const prev = React.useCallback(() => go(idx - 1), [idx, go]);
// Scale the fixed canvas to the frame width
React.useEffect(() => {
const frame = frameRef.current;if (!frame) return;
const ro = new ResizeObserver(() => setScale(frame.clientWidth / SF_SLIDE_W));
ro.observe(frame);setScale(frame.clientWidth / SF_SLIDE_W);
return () => ro.disconnect();
}, []);
// Autoplay (paused on hover/focus, off-screen, or reduced motion)
const [progress, setProgress] = React.useState(0);
React.useEffect(() => {
if (reduce.current || paused) {setProgress(0);return;}
let raf,t0 = performance.now();
const tick = (now) => {
const p = Math.min(1, (now - t0) / DURATION);
setProgress(p);
if (p >= 1) {go(idx + 1);return;}
raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, [idx, paused, go]);
// Pause when the section is scrolled out of view
React.useEffect(() => {
const el = frameRef.current;if (!el) return;
const io = new IntersectionObserver(([e]) => setPaused((p) => {return !e.isIntersecting ? true : false;}), { threshold: 0.35 });
io.observe(el);return () => io.disconnect();
}, []);
// Tap to jump to Connect (no drag-to-scroll hijack — page scrolls normally)
const onFrameClick = () => scrollToId("contact");
return (
setPaused(true)} onMouseLeave={() => setPaused(false)} style={{ padding: "132px 0px" }}>
setPaused(true)}
onBlur={() => setPaused(false)}
onKeyDown={(e) => {if (e.key === "ArrowRight") next();if (e.key === "ArrowLeft") prev();}}
role="group" aria-roledescription="carousel" aria-label="Brand slides">
{slides.map((s, i) =>
{s}
)}
{slides.map((_, i) =>
go(i)} aria-label={"Go to slide " + (i + 1)}>
)}
{String(idx + 1).padStart(2, "0")} / {String(N).padStart(2, "0")}
);
}
Object.assign(window, { BrandCarousel }); ![Sauna + Flow]({asset("assets/logo-wordmark-trim.svg")}){kind=logo}
![]({asset("assets/hero-mobile-sauna.jpg")})
![Sauna + Flow flame badge]({asset("assets/badge-flame-gold.png")}){kind=icon}