// scenes.jsx — OfferGlow Studio 15s promo. Scene components + helpers.
// Loaded after animations.jsx; uses window globals (Sprite, useSprite, Easing, clamp, interpolate).
// ── Palette ──────────────────────────────────────────────────────────────────
const OG = {
paper: '#fcfaf5',
paper2: '#f7f1e8',
charcoal: '#2a2520',
charcoalSoft: '#6b6358',
gold: '#b8924a',
goldBright:'#d4ad62',
goldDeep: '#8f6e33',
sage: '#5e7a63',
cream: '#f8f3ea',
};
const FD = "'Cormorant Garamond', Georgia, serif"; // display
const FB = "'Source Serif 4', Georgia, serif"; // body
const FM = "'JetBrains Mono', ui-monospace, monospace"; // mono
// ── Custom cubic-bezier easing (ease-lux) ───────────────────────────────────
function cubicBezier(x1, y1, x2, y2) {
const A = (a, b) => 1 - 3 * b + 3 * a;
const B = (a, b) => 3 * b - 6 * a;
const C = (a) => 3 * a;
const calc = (t, a, b) => ((A(a, b) * t + B(a, b)) * t + C(a)) * t;
const slope = (t, a, b) => 3 * A(a, b) * t * t + 2 * B(a, b) * t + C(a);
const getT = (x) => {
let t = x;
for (let i = 0; i < 6; i++) {
const s = slope(t, x1, x2);
if (s === 0) break;
t -= (calc(t, x1, x2) - x) / s;
}
return t;
};
return (x) => (x <= 0 ? 0 : x >= 1 ? 1 : calc(getT(x), y1, y2));
}
const easeLux = cubicBezier(0.16, 1, 0.3, 1);
// ── SceneFade: gates content to [start,end] with crossfade in/out ────────────
function SceneFade({ start, end, fadeIn = 0.5, fadeOut = 0.5, z = 1, children }) {
return (
{({ localTime }) => {
const d = end - start;
let o = 1;
if (localTime < fadeIn) o = clamp(localTime / fadeIn, 0, 1);
else if (localTime > d - fadeOut) o = clamp((d - localTime) / fadeOut, 0, 1);
return (
{children}
);
}}
);
}
// ── GoldWipe: before→after reveal driven by `p` (0..1), gold line follows edge ─
function GoldWipe({ before, after, p, width, height, radius = 0, beforeFilter, lineW = 5 }) {
const linePx = p * width;
const showLine = p > 0.002 && p < 0.998;
return (
{showLine && (
{/* soft warm glow ahead of the line */}
{/* the gold line */}
)}
);
}
// ── Vignette + grain overlay for full-bleed photo scenes ─────────────────────
function PhotoVignette() {
return (
);
}
// ── Mono chip (BEFORE label / tile labels) ───────────────────────────────────
function MonoChip({ text, dark = true, gold = false, style }) {
return (
{text}
);
}
// ═══════════════════════════════════════════════════════════════════════════
// SCENE 1 — Intro [0–3s]: empty living room, "BEFORE", "Empty rooms don't sell."
// ═══════════════════════════════════════════════════════════════════════════
function SceneIntro({ W, H }) {
const { localTime } = useSprite();
// slow ken-burns push-in
const scale = 1.04 + 0.05 * Easing.easeOutSine(clamp(localTime / 3, 0, 1));
// BEFORE chip fade
const chipO = clamp((localTime - 0.25) / 0.5, 0, 1);
// headline rise
const hP = clamp((localTime - 1.0) / 0.9, 0, 1);
const hEase = easeLux(hP);
return (
{/* bottom scrim for text */}
{/* BEFORE chip top-left */}
{/* headline */}
);
}
// ═══════════════════════════════════════════════════════════════════════════
// SCENE 2 — Hero reveal [3–7s]: gold wipe living-before → living-after
// ═══════════════════════════════════════════════════════════════════════════
function SceneHero({ W, H }) {
const { localTime } = useSprite();
// wipe runs from t=0.2 to t=1.7 (within this scene), ease-lux
const wipeP = easeLux(clamp((localTime - 0.2) / 1.5, 0, 1));
const scale = 1.0 + 0.04 * Easing.easeOutSine(clamp(localTime / 4, 0, 1));
// BEFORE chip fades out as wipe begins
const beforeO = clamp(1 - (localTime - 0.15) / 0.5, 0, 1);
// AFTER pill in after wipe
const afterP = clamp((localTime - 1.55) / 0.5, 0, 1);
const afterE = Easing.easeOutCubic(afterP);
// headline rise after wipe
const hP = clamp((localTime - 1.85) / 0.8, 0, 1);
const hE = easeLux(hP);
return (
{/* BEFORE chip fading out */}
{/* AFTER · STAGED gold pill top-right */}
{/* headline bottom-left */}
);
}
// ═══════════════════════════════════════════════════════════════════════════
// SCENE 3 — Montage [7–11s]: 3 reveals + Glow Score gauge
// ═══════════════════════════════════════════════════════════════════════════
function GaugeRing({ value, size = 232 }) {
const stroke = 12;
const R = (size - stroke - 6) / 2;
const C = 2 * Math.PI * R;
const off = C - (value / 100) * C;
return (
);
}
function MontageTile({ before, after, label, x, y, w, h, p }) {
return (
);
}
function SceneMontage({ W, H }) {
const { localTime } = useSprite();
// caption
const capP = clamp((localTime - 0.2) / 0.6, 0, 1);
const capE = easeLux(capP);
// tile wipes staggered
const tw = (s) => easeLux(clamp((localTime - s) / 0.9, 0, 1));
const p1 = tw(0.45), p2 = tw(0.8), p3 = tw(1.15);
// gauge: number 34→94, ring follows
const gP = clamp((localTime - 1.5) / 1.5, 0, 1);
const gE = Easing.easeOutCubic(gP);
const gVal = 34 + (94 - 34) * gE;
// +60 badge pop
const bP = clamp((localTime - 3.0) / 0.5, 0, 1);
const bE = Easing.easeOutBack(bP);
// tile layout
const tw_ = 498, th_ = 332, gap = 54;
const totalW = tw_ * 3 + gap * 2;
const x0 = (W - totalW) / 2;
const ty = 218;
return (
{/* caption */}
Every room. Ready to list.
{/* tiles */}
{/* gauge group, centered low */}
{/* monogram */}
{/* thin gold rule */}
{/* wordmark */}
OfferGlow
Studio
{/* tagline */}
Staged listing visuals with the original proof still attached.
{/* CTA */}
{/* URL */}
offerglowstudio.com
);
}
// ── Root composition ─────────────────────────────────────────────────────────
function Promo({ W, H }) {
const t = useTime();
const tl = useTimeline();
React.useEffect(() => { window.__ctrl = { setTime: tl.setTime, setPlaying: tl.setPlaying }; }, [tl.setTime, tl.setPlaying]);
// update screen label each second for commenting
React.useEffect(() => {
const root = document.getElementById('promo-root');
if (root) root.setAttribute('data-screen-label', `t=${Math.floor(t)}s`);
}, [Math.floor(t)]);
return (
);
}
Object.assign(window, { Promo, OG });