Chapter {String(index + 1).padStart(2, "0")} / {String(total).padStart(2, "0")}
{title}
{lines.map((ln, i) => {
// Three discrete windows. Each line owns its third of the scroll.
// Tighter ramps for snappier crossfades between lines.
const winStart = i * 0.33;
const winEnd = (i + 1) * 0.33;
const local = (p - winStart) / (winEnd - winStart); // 0..1 within window
const RAMP_IN = 0.15; // first 15% of window
const RAMP_OUT = 0.18; // last 18% of window
const HOLD_END = 1 - RAMP_OUT;
let op = 0;
if (i === 0) {
// First line: starts at full, only ramps out.
// Slower fade-out specifically on the line 0 → line 1 handoff.
const RAMP_OUT_0 = 0.40;
const HOLD_END_0 = 1 - RAMP_OUT_0;
op = local < HOLD_END_0 ? 1 : Math.max(0, 1 - (local - HOLD_END_0) / RAMP_OUT_0);
} else if (i === 1) {
// Middle line: matching slower ramp-IN to pair with line 0's slower fade-out.
const RAMP_IN_1 = 0.30;
if (p < winStart) op = 0;
else if (local < RAMP_IN_1) op = local / RAMP_IN_1;
else if (local < HOLD_END) op = 1;
else op = Math.max(0, 1 - (local - HOLD_END) / RAMP_OUT);
} else {
// Last line: ramps in, holds to end.
if (p < winStart) op = 0;
else op = local < RAMP_IN ? Math.max(0, local / RAMP_IN) : 1;
}
const y = 0;
// Color crossfades early — finishes by the time the headline settles.
// Accent line ("NY, NJ, & PA.") stays white throughout.
const t = remap(p, 0.02, 0.22);
const txt = ln.accent
? "#fff"
: `rgb(${Math.round(lerp(10, 255, t))},${Math.round(lerp(9, 255, t))},${Math.round(lerp(8, 255, t))})`;
const shadow = t > 0.05
? `0 2px 24px rgba(10,9,8,${0.55 * t}), 0 0 40px rgba(10,9,8,${0.4 * t})`
: "none";
return (
{/* Bouncing scroll cue — bottom center. Shrinks and fades as soon as scroll begins. */}
{ln.text}
); })}
II. The Wall
Every kitchen tells a story.
{wall.map((proj, i) => {
// Distance from active in slots
const center = (i + 0.5) * SLOT_VW;
const cameraVW = (p * (totalVW - 100)) + 50;
const dist = (center - cameraVW) / SLOT_VW; // -..+, 0 at center
const absD = Math.abs(dist);
const scale = lerp(1, 0.78, Math.min(1, absD * 0.7));
const blur = Math.min(6, absD * 3);
const op = lerp(1, 0.35, Math.min(1, absD * 0.7));
return (
{/* Project number */}
);
})}
{/* Active caption — fixed at bottom */}
Nº {String(i + 1).padStart(2, "0")} / {String(N).padStart(2, "0")}
{wall[activeIdx].finish} · {wall[activeIdx].stone}
{wall[activeIdx].caption}
{wall[activeIdx].location} · {wall[activeIdx].year}
{/* CLEAR column — scrolls up */}
{/* SATIN column — counter-flow */}
{/* Center seam — splits open as scroll progresses */}
{[...clearList, ...clearList.slice(0, 3)].map((proj, i) => (
))}
{/* Top/bottom fade */}
{[...satinList, ...satinList.slice(0, 3)].map((proj, i) => (
))}
III. Two Finishes
Clear or Satin ?
Polished stone wears StoneGuard Clear: invisible. Honed stone gets StoneGuard Satin: matched matte. Same protection. Same lifetime. Different surface.
IV. The Process
One day, four steps. Then it disappears.
{/* Pin */}
);
})}
{/* Closing line */}
{c.label}
{c.title}
{c.phase}
{c.body}
By dinner, you'd never know it was there.
V. Atlas
The work lives in real homes.
From Manhattan walk-ups to weekend houses in the Hamptons — every kitchen here is somebody's. Thousands of homes protected across three states.
{dots.map((d, i) => {
const t = remap(p, settleAt(i) - 0.05, settleAt(i) + 0.18);
// Settle in from below — but keep the start position INSIDE the safe box
// so animation never drifts under the header or service map.
const startY = Math.min(96, d.y + 8);
const cx = d.x;
const cy = lerp(startY, d.y, easeOut(t));
const op = lerp(0, 1, t);
const sc = lerp(0.7, 1, easeOut(t));
const isClear = d.finish === "Clear";
// Back layer photos slightly dimmer so foreground reads first
const layerOp = [0.78, 0.92, 1.0][d.layer];
const layerScale = [0.92, 0.98, 1.0][d.layer];
return (
{d.showLabel && (
)}
);
})}
{/* Right-side ticker — slimmer panel, sits below the chapter label */}
= 90 ? 8 : 6.5,
letterSpacing: "0.16em", textTransform: "uppercase",
color: isClear ? "var(--bone)" : "var(--bronze)",
lineHeight: 1.25,
textAlign: "center",
}}>
{d.town}
Service Map
{SERVICE_AREAS.length} towns
{SERVICE_AREAS.map((area, i) => {
const prev = SERVICE_AREAS[i - 1];
const isNewRegion = !prev || prev.region !== area.region;
return (
{isNewRegion && (
);
})}
{/* Soft fade at top + bottom edges so the list trails off */}
{area.region}
)}
{area.town}
{area.finish}
{cols.map((col, ci) => (
))}
{/* Top fade */}
{/* Bottom curtain that grows as CTA arrives */}
{/* Top label */}
{col.list.map((proj, i) => (
))}
VI. The River
Five years. Thousands of homes.
0.5 ? "auto" : "none",
transform: `translateY(${lerp(40, 0, ctaOp)}px)`,
}}>
Send us your kitchen.
Yours could be next.
Send us your kitchen.
We'll send back a plan.
A photo, a few questions, a custom protection plan and quote — all free, all within 24 hours.
Tweaks
Captions
{[true, false].map(v => (
))}
Opening
{["push-in", "fade-in"].map(v => (
))}