// Learn — "Backsplash" edition. // The page is a marble backsplash. Each article is a stone tile set in warm grout. // Filters re-tile the wall based on selected topic. const { useState: useLS, useMemo: useLM } = React; // ============================================================ // Data — softened copy, topic-relevant imagery hints // ============================================================ const ARTICLES = [ { id: "marble-restoration", slug: "complete-guide-to-marble-countertop-restoration-from-etch-removal-to-polishing", category: "Stone Science", title: "Marble Countertop Restoration: Complete Guide to Etch Removal and Polishing.", kicker: "A step-by-step look at how a dull, etched marble countertop is brought back to a like-new finish — and when it's worth the work.", pullquote: "Etching isn't a stain — it's a tiny chemical burn on the surface. The good news is it's fixable.", author: "Thomas Chow", date: "Jan 15", read: "7 min read", img: "assets/work-clear-1.jpg", topic: "Restoration", finish: "polished", }, { id: "stoneguard-everything", slug: "everything-you-need-to-know-about-stoneguard", category: "StoneGuard", title: "Everything You Need to Know About StoneGuard.", kicker: "What the film is, how it's made, what it protects against, and why it's different from sealers and epoxies.", pullquote: "Think of it as an invisible layer of armor, sized for your exact countertop, installed in a day.", author: "Thomas Chow", date: "Oct 21, 2025", read: "3 min read", img: "assets/work-satin-3.png", topic: "StoneGuard 101", finish: "dark", }, { id: "why-marble-stains", slug: "why-marble-stains-and-how-to-stop-it", category: "Stone Science", title: "Why Marble Stains (and How to Stop It): The Science Behind Protecting Your Countertops.", kicker: "Why wine, lemon, and tomato leave their mark on marble — and what actually stops them, explained in plain language.", pullquote: "Marble is made of the same stuff as antacid tablets. That's why acidic food eats into it.", author: "Thomas Chow", date: "Aug 20, 2025", read: "5 min read", img: "assets/work-clear-3.jpg", topic: "How marble works", finish: "light", }, { id: "protect-with-power", slug: "protect-your-stone-countertops-with-the-power-of-stoneguard", category: "StoneGuard", title: "Protect Your Stone Countertops with the Power of StoneGuard.", kicker: "What a professional StoneGuard install actually looks like — from first visit and templating, to cure time, to the final hand-off.", pullquote: "One day of work. A lifetime of worry-free cooking, spilling, and living.", author: "M&T Team", date: "Oct 20, 2025", read: "3 min read", img: "assets/work-clear-4.jpg", topic: "Install day", finish: "dark", }, { id: "benefits-of-mt", slug: "the-benefits-of-using-mt-surface-protector-to-install-stoneguard", category: "StoneGuard", title: "The Benefits of Using M&T Surface Protectors to Install StoneGuard.", kicker: "Why picking the right certified installer matters as much as the film itself — and what sets M&T apart on jobs from Manhattan to Greenwich.", pullquote: "Same two guys on every job — so the work stays as careful as the day we started.", author: "M&T Team", date: "Oct 16, 2025", read: "4 min read", img: "assets/service-1.jpg", topic: "Our approach", finish: "light", }, { id: "lifesaver-marble", slug: "how-stoneguard-could-be-a-lifesaver-for-marble-stone-owners", category: "StoneGuard", title: "How StoneGuard Could Be a Lifesaver for Marble Stone Owners.", kicker: "The short read: why marble owners keep telling us StoneGuard is the single best decision they made after install.", pullquote: "Same countertop, same kids, same wine nights. One looks brand new. One doesn't.", author: "M&T Team", date: "Oct 24, 2023", read: "2 min read", img: "assets/work-clear-6.jpg", topic: "Real homes", finish: "polished", }, ]; const CATEGORIES = ["All", "Stone Science", "StoneGuard"]; // ============================================================ // STONEYARD — pendulum-physics slab browser // ============================================================ // The Learn page is a stoneyard. An overhead hoist carries slabs // (articles) along a steel I-beam track. A joystick drives the // carriage; each slab hangs from its clamp on a cable and swings // with real pendulum physics. Infinite loop. Click a slab to read. // ============================================================ // ------------------------------------------------------------ // useAnimationLoop — run an RAF loop that calls cb with dt seconds // ------------------------------------------------------------ function useAnimationLoop(cb, deps = []) { const cbRef = React.useRef(cb); cbRef.current = cb; React.useEffect(() => { let raf, last = performance.now(); const tick = (now) => { const dt = Math.min(0.05, (now - last) / 1000); // clamp to 50ms for tab-switches last = now; cbRef.current(dt); raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, deps); } // ------------------------------------------------------------ // SlabFace — the visible article slab (marble surface + content) // ------------------------------------------------------------ function SlabFace({ article, swingAngle, isCenter, onOpen }) { const a = article; const isDark = a.finish === "dark" || a.finish === "polished"; return (
{/* Stone image background */} {/* Overlay gradient for text legibility */}
{/* Polish reflection band — subtle sheen, shifts with swing */}
{/* Centered content — title, kicker, pullquote only */}
{a.title}
{a.pullquote}
{isCenter && (
Click to Read
)}
); } // ------------------------------------------------------------ // Joystick — just the circular base + stick. No panel, no counter. // ------------------------------------------------------------ function Joystick({ onChange }) { const [dx, setDx] = React.useState(0); // -1..1 const draggingRef = React.useRef(false); const rectRef = React.useRef(null); const baseRef = React.useRef(null); const [isDragging, setIsDragging] = React.useState(false); // Propagate value up React.useEffect(() => { onChange(dx); }, [dx, onChange]); // Keyboard React.useEffect(() => { const keys = { ArrowLeft: -1, ArrowRight: 1, a: -1, d: 1 }; const held = new Set(); const tick = () => { let v = 0; if (held.has('ArrowLeft') || held.has('a')) v -= 1; if (held.has('ArrowRight') || held.has('d')) v += 1; setDx(v); }; const down = (e) => { if (e.key in keys) { held.add(e.key); tick(); e.preventDefault(); } }; const up = (e) => { if (e.key in keys) { held.delete(e.key); tick(); } }; window.addEventListener('keydown', down); window.addEventListener('keyup', up); return () => { window.removeEventListener('keydown', down); window.removeEventListener('keyup', up); }; }, []); // Pointer handlers — drag the orange grip const onDown = (e) => { draggingRef.current = true; setIsDragging(true); rectRef.current = baseRef.current.getBoundingClientRect(); onMove(e); e.currentTarget.setPointerCapture?.(e.pointerId); }; const onMove = (e) => { if (!draggingRef.current || !rectRef.current) return; const r = rectRef.current; const cx = r.left + r.width / 2; const nx = (e.clientX - cx) / (r.width / 2); setDx(Math.max(-1, Math.min(1, nx))); }; const onUp = () => { draggingRef.current = false; setIsDragging(false); setDx(0); }; const stickAngle = dx * 32; // tilt degrees const ballX = dx * 42; // px shift of the ball return (
{/* Inner anchor — everything below positions relative to this, at the bottom */}
{/* Drop shadow pool on ground beneath base — cements it as a 3D object */}
{/* Circular base — multi-layered for 3D read */} {/* Outer ring (darkest, the beveled edge) */}
{/* Middle ring (dark metal, defines the rim) */}
{/* Inner dark well where the stick emerges — gives depth */}
{/* L / R labels etched on the base */}
L
R
{/* The stick — tilts left/right */}
{/* Shaft with strong side shading */}
{/* The orange grip ball — sits atop the shaft, same tilt */}
{/* Base ring on grip — attaches it to the shaft visually */}
); } // ------------------------------------------------------------ // Stoneyard — the full scene + physics // ------------------------------------------------------------ function Stoneyard() { // Normalized carriage position along the virtual track (in "slab units"). // Each slab is 1 unit apart. We loop: pos mod N. const [carriagePos, setCarriagePos] = React.useState(0); // Slab swing angle (degrees, +right, -left) — pendulum on cable const [swingAngle, setSwingAngle] = React.useState(0); // Joystick value (-1..1). Force input. const stickRef = React.useRef(0); // Internal velocity state refs (don't retrigger renders) const posRef = React.useRef(0); const velRef = React.useRef(0); // carriage velocity (slab-units/sec) const swingRef = React.useRef(0); // swing angle (deg) const swingVelRef = React.useRef(0); // swing angular velocity (deg/sec) const lastCarriageVel = React.useRef(0); // Modal state const [openArticle, setOpenArticle] = React.useState(null); const N = ARTICLES.length; // Animation loop — Euler integration of coupled hoist + pendulum useAnimationLoop((dt) => { if (openArticle) return; // pause physics while reading const stick = stickRef.current; // ─── Carriage (hoist) dynamics ────────────────────────────── // Target velocity proportional to stick. Spring toward target. // Heavy machinery: slow to accelerate AND slow to stop. const MAX_VEL = 0.85; // slab-units per second at full stick const ACCEL = 2.4; // how fast velocity approaches target const DECEL = 3.2; // how fast velocity approaches 0 when released const targetVel = stick * MAX_VEL; const diff = targetVel - velRef.current; const rate = (Math.abs(stick) > 0.02) ? ACCEL : DECEL; velRef.current += diff * Math.min(1, rate * dt); // Integrate position posRef.current += velRef.current * dt; // Compute carriage acceleration (for pendulum forcing) const carriageAccel = (velRef.current - lastCarriageVel.current) / Math.max(dt, 1e-4); lastCarriageVel.current = velRef.current; // ─── Pendulum (slab) dynamics ─────────────────────────────── // θ'' + 2ζω θ' + ω² θ = -(accel/L) * (180/π) (linearized pendulum, forced) // We work in degrees throughout. Tune by ear. const OMEGA = 2.2; // natural freq (rad/s) — lower = slower swing const ZETA = 0.12; // damping ratio — lower = swings longer const FORCING_GAIN = 38; // how strongly carriage accel kicks the slab // Spring-back to vertical + damping + carriage forcing const angAccel = - (OMEGA * OMEGA) * swingRef.current - (2 * ZETA * OMEGA) * swingVelRef.current - FORCING_GAIN * carriageAccel; swingVelRef.current += angAccel * dt; swingRef.current += swingVelRef.current * dt; // Clamp to prevent runaway if (Math.abs(swingRef.current) > 35) { swingRef.current = Math.sign(swingRef.current) * 35; swingVelRef.current *= 0.4; } // Push to state (at ~60fps — cheap enough) setCarriagePos(posRef.current); setSwingAngle(swingRef.current); }, []); // Which slab is "center" — the one the camera is looking at. // carriagePos in slab-units; center is the floor of (pos + 0.5) mod N. const centerIdx = ((Math.round(posRef.current) % N) + N) % N; // Escape key closes modal React.useEffect(() => { const onKey = (e) => { if (e.key === 'Escape') setOpenArticle(null); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, []); // Render positions: we show up to 5 slabs around center (center ±2) // to keep DOM small while giving peek of neighbors. const visible = []; for (let offset = -2; offset <= 2; offset++) { const slabIdx = ((centerIdx + offset) % N + N) % N; // Each slab is drawn at its own track position, minus the camera position const targetTrackPos = Math.round(posRef.current) + offset; // whole-slab positions nearest the camera const slabX = targetTrackPos - posRef.current; // -2..2 range in slab-units visible.push({ slabIdx, slabX, key: `${slabIdx}-${targetTrackPos}` }); } // Activity — warm glow intensity, based on current carriage velocity. // 0 when idle, ramps to 1 as machine works. const activity = Math.min(1, Math.abs(velRef.current) / 0.7); // Constants — 4:3 landscape slabs, smaller overall system const SLAB_W_VW = 34; // vw slab width (original size) const SLAB_H_VW = SLAB_W_VW * 0.75; // 4:3 = 25.5vw tall const SLAB_GAP_VW = 40; // vw between centers — wider than slabs so no overlap const CABLE_LEN = 6.5; // vh cable length from beam to slab top (unchanged) return (
{/* ─── Background texture (very subtle stone grain on bone) ─── */} {/* (floor shadow removed to keep background uniform) */} {/* ─── Overhead I-beam track — CURVED (arcs up at each side like a 3D rail) ─── */} {/* Beam metal gradient — same charcoal as straight beam */} {/* Soft drop-shadow for the beam */} {/* Beam body — extends FAR past viewport so curves never clip at edges */} {/* Top highlight line on the beam */} {/* Bottom deep-shadow line */} {/* Rivets — small dark circles marching along the beam's centerline */} {Array.from({ length: 22 }).map((_, i) => { const t = i / 21; // 0..1 along curve const x = -200 + 1400 * t; // match the parabolic approximation of the beam curve vertical // beam goes y=-80 at t=0, peak y=105 at t=0.5, y=-80 at t=1 const y = -80 + 185 * 4 * t * (1 - t); return ( ); })} {/* ─── Hoist carriage (the moving box on the beam) ─── */}
{/* Wheels on the beam */}
{/* Motor housing — taller & beefier for a sturdy industrial look */}
{/* Gold caution stripe — thicker. Stripes get warm glow when active. */}
0.02 ? `0 0 ${2 + activity * 4}px rgba(255,190,100,${activity * 0.7})` : "none", transition: "box-shadow 0.25s ease-out", }}/> {/* M&T HOIST stamp — centered on two lines, debossed, glows amber when active */}
0.02 ? `0 1px 0 rgba(0,0,0,0.85), 0 0 ${2 + activity * 4}px rgba(255,190,100,${activity * 0.85})` : "0 1px 0 rgba(0,0,0,0.85)", transition: "color 0.25s ease-out, text-shadow 0.25s ease-out", }}>
M&T
HOIST
{/* Lower horizontal seam line for detail */}
{/* ─── Slab rendering — each visible slab with its cable + clamp ─── */}
{visible.map(({ slabIdx, slabX, key }) => { const article = ARTICLES[slabIdx]; const isCenter = Math.abs(slabX) < 0.5; // Swing behavior: // The pendulum physics drives `swingAngle` when the carriage accelerates. // Each slab gets a smooth fraction of that swing based on distance from center — // no hard switch when a slab becomes "center", so you never see a pop. // At slabX=0 (dead center) → 100% swing // At slabX=±0.5 → ~78% swing (smooth) // At slabX=±1 → ~37% swing // At slabX=±2 → ~5% swing (barely tilts when peeking in) const swingFalloff = Math.exp(-Math.abs(slabX) * Math.abs(slabX) * 0.75); const slabSwing = swingAngle * swingFalloff; // Position: horizontal offset in vw, vertical = beam + cable const xOffsetVW = slabX * SLAB_GAP_VW; // ── 3D arc path, matched to beam curve (re-derived) ── // Beam cubic bezier was sampled at slabX=0 and slabX=1 and fit to a parabola: // rail_screen_y(slabX) ≈ 281.7 - 36 * slabX^2 // Pivot sits on the rail's BOTTOM edge (rail stroke is 24 → +11 offset). const absX = Math.abs(slabX); const depthScale = Math.max(0.58, 1 - absX * 0.17); // shrink with distance const pivotX = `calc(50% + ${xOffsetVW}vw)`; const pivotY = 293 - 36 * slabX * slabX; // rail bottom edge, matches curve // Cable gets LONGER as slab moves toward the edges — the rail has risen // high up there, so the cable needs extra reach to stay attached. // Also compensates for depthScale shrinking the visual cable length. const cableExtraPx = Math.min(118, absX * absX * 40); // +0 at center, +40 at ±1, +118 at ±2 return (
{/* Cable — top starts at the rail's underside, length grows toward edges */}
{/* Clamp head (small pulley/hook above slab) */}
{/* The SLAB itself — 4:3 landscape */}
setOpenArticle(article)} />
); })}
{/* ─── Joystick HUD — top-center, operator's control pedestal above the beam ─── */}
{ stickRef.current = v; }} /> {/* Simple left-right instruction with arrows */}
{/* Left arrow */} {/* Middle text */}
Overhead Gantry Crane
{/* Right arrow */}
{/* ─── Article modal (Notion-style preview) ─── */} {openArticle && ( setOpenArticle(null)} /> )}
); } // ------------------------------------------------------------ // ArticleModal — Notion-style centered preview overlay // ------------------------------------------------------------ function ArticleModal({ article, onClose }) { return (
e.stopPropagation()} style={{ position: "relative", width: "min(860px, 100%)", maxHeight: "85vh", overflow: "auto", background: "var(--bone)", color: "var(--ink)", boxShadow: "0 40px 100px rgba(0,0,0,0.75), 0 0 0 1px rgba(0,0,0,0.5)", animation: "modal-rise 0.4s cubic-bezier(.2,.7,.2,1)", }} > {/* Close button */} {/* Hero image — the slab face */}
{article.category} · {article.topic}

{article.title}

{/* Body */}
by {article.author} · {article.date} · {article.read}

{article.kicker}

“ {article.pullquote} ”

This is a preview of the full article. In the live site, the full body would appear here — Michael and Thomas's full write-up on this topic, with photos, diagrams, and the kind of plain-English explanations you won't find on a manufacturer's PDF.

For now, the essentials are above: the topic, the author, and the core idea.

); } // ============================================================ // Masthead — warmer, more personal copy // ============================================================ function LearnMasthead() { return (
{/* Breadcrumb */}
M&T  · Learn

What we've learned.
Written down for you.

Plain-English writing on stone care — why things stain, what StoneGuard actually does, and how to keep your countertop looking the day it was installed.

Written by Michael and Thomas, in between jobs. No jargon. Each piece is a slab in our yard — use the crane below to move through them.

); } // ============================================================ // Bottom CTA — warmer copy // ============================================================ function LearnFooterCTA() { return (
Running into something we didn't cover?

Shoot us a text —
we'll see how we can help.

Send us a photo of your countertop and tell us what's going on — we'll tell you what stone it is, how it's holding up, and what we'd do to protect it. Usually within the hour. No pressure, no sales script, just a real person with advice.

); } // ============================================================ // Main // ============================================================ function LearnPage() { return ( <>