/* global React, INK, CREAM, PULSE, Sparkle */
// Site shared bits: scroll reveals, counters, typing, section heads, product chrome (from Figma values).
const { useState: sbS, useEffect: sbE, useRef: sbR } = React;
const SB_EASE = 'cubic-bezier(0.2, 0.8, 0.2, 1)';
function useReveal(threshold = 0.22) {
const ref = sbR(null);
const [on, setOn] = sbS(false);
sbE(() => {
const el = ref.current;
if (!el) return;
let done = false;
const fire = () => {if (!done) {done = true;setOn(true);cleanup();}};
// primary: IntersectionObserver
let io = null;
try {
io = new IntersectionObserver(([e]) => {if (e.isIntersecting) fire();}, { threshold });
io.observe(el);
} catch (e) {}
// fallback: rect check on scroll/resize + rAF poll (covers webviews where IO never fires)
const check = () => {
const r = el.getBoundingClientRect();
if (r.top < window.innerHeight * 0.92 && r.bottom > 0) fire();
};
const onScroll = () => check();
window.addEventListener('scroll', onScroll, { passive: true });
window.addEventListener('resize', onScroll, { passive: true });
const poll = setInterval(check, 600);
check();
function cleanup() {
if (io) io.disconnect();
window.removeEventListener('scroll', onScroll);
window.removeEventListener('resize', onScroll);
clearInterval(poll);
}
return cleanup;
}, []);
return [ref, on];
}
const Reveal = ({ children, delay = 0, y = 22, style, as = 'div' }) => {
const [ref, on] = useReveal();
return React.createElement(as, {
ref,
style: {
opacity: on ? 1 : 0, transform: on ? 'none' : `translateY(${y}px)`,
transition: `opacity 0.7s ${SB_EASE} ${delay}ms, transform 0.7s ${SB_EASE} ${delay}ms`, ...style
}
}, children);
};
function useCountUp(target, on, dur = 1500) {
const [v, setV] = sbS(0);
sbE(() => {
if (!on) return;
let raf;const t0 = performance.now();
const step = (t) => {
const p = Math.min(1, (t - t0) / dur);
setV(Math.round(target * (1 - Math.pow(1 - p, 3))));
if (p < 1) raf = requestAnimationFrame(step);
};
raf = requestAnimationFrame(step);
return () => cancelAnimationFrame(raf);
}, [on, target]);
return v;
}
function useTyping(text, on, speed = 34, startDelay = 400) {
const [i, setI] = sbS(0);
sbE(() => {
if (!on) {setI(0);return;}
let t;let idx = 0;
const go = () => {idx++;setI(idx);if (idx < text.length) t = setTimeout(go, speed + Math.random() * 30);};
t = setTimeout(go, startDelay);
return () => clearTimeout(t);
}, [on, text]);
return [text.slice(0, i), i >= text.length];
}
// Inertia-smoothed scroll progress: the value eases toward the real scroll position every frame
// (critically-damped lerp), so scroll-linked animations glide instead of snapping with the wheel.
function useSmoothScroll(damping = 0.19) {
const ref = sbR(null);
const [p, setP] = sbS(0);
sbE(() => {
let raf = 0,cur = 0,target = 0,running = false;
const tick = () => {
cur += (target - cur) * damping;
if (Math.abs(target - cur) < 0.0004) {cur = target;running = false;} else {raf = requestAnimationFrame(tick);}
const v = cur;
setP((prev) => Math.abs(prev - v) < 0.0004 ? prev : v);
};
const measure = () => {
const el = ref.current;
if (!el) return;
const total = el.offsetHeight - window.innerHeight;
if (total <= 0) return;
target = Math.min(1, Math.max(0, -el.getBoundingClientRect().top / total));
if (!running) {running = true;cancelAnimationFrame(raf);raf = requestAnimationFrame(tick);}
};
measure();cur = target;setP(target);
window.addEventListener('scroll', measure, { passive: true });
window.addEventListener('resize', measure);
return () => {window.removeEventListener('scroll', measure);window.removeEventListener('resize', measure);cancelAnimationFrame(raf);};
}, []);
return [ref, p];
}
// rAF-throttled scroll progress for pinned sections — one measurement per frame, no redundant renders.
// Pass a map fn (e.g. p => Math.floor(p * 6)) to re-render ONLY when the mapped value changes.
function useScrollProgress(map) {
const ref = sbR(null);
const [val, setVal] = sbS(map ? map(0) : 0);
sbE(() => {
let raf = 0;
const measure = () => {
raf = 0;
const el = ref.current;
if (!el) return;
const total = el.offsetHeight - window.innerHeight;
if (total <= 0) return;
const p = Math.min(1, Math.max(0, -el.getBoundingClientRect().top / total));
if (map) {
const m = map(p);
setVal((prev) => Object.is(prev, m) ? prev : m);
} else {
setVal((prev) => Math.abs(prev - p) < 0.0015 && p > 0 && p < 1 ? prev : p);
}
};
const onScroll = () => {if (!raf) raf = requestAnimationFrame(measure);};
window.addEventListener('scroll', onScroll, { passive: true });
window.addEventListener('resize', onScroll, { passive: true });
measure();
return () => {window.removeEventListener('scroll', onScroll);window.removeEventListener('resize', onScroll);if (raf) cancelAnimationFrame(raf);};
}, []);
return [ref, val];
}
const SectionHead = ({ num, title, sub, dark = false, center = false, wide = false }) =>
;
// ---- product chrome, values lifted from Figma Screen/Create·desktop ----
const AppTopBar = () =>
{['Explore', 'Create', 'Characters', 'Vault'].map((l, i) =>
{l}
)}
Scheduler
New
⚡
9.38k
J
;
const AppWindow = ({ children, style }) =>
{children}
;
const ControlPill = ({ children, style }) =>
{children}⌄
;
const GenBtn = ({ active = false, count = 1, style }) =>
Generate ✦
{count}
;
const Shimmer = ({ style }) =>
;
const Waveform = ({ on = true, bars = 24, color = 'var(--brand-purple-500)', h = 26 }) =>
{Array.from({ length: bars }).map((_, i) =>
)}
;
const SITE_W = 1140;
const SectionShell = ({ children, dark = false, pad = '110px 56px', bg }) =>
;
Object.assign(window, { useReveal, Reveal, useCountUp, useTyping, useScrollProgress, useSmoothScroll, SectionHead, AppTopBar, AppWindow, ControlPill, GenBtn, Shimmer, Waveform, SectionShell, SB_EASE, SITE_W });
// Perf: pause any autoplay video while offscreen; resume when visible again.
(function szVideoGovernor() {
if (window.__szVidGov) return; window.__szVidGov = 1;
const io = new IntersectionObserver((ents) => {
ents.forEach((en) => {
const v = en.target;
if (en.isIntersecting) { if (v.paused) v.play().catch(() => {}); }
else if (!v.paused) v.pause();
});
}, { rootMargin: '120px' });
const scan = () => document.querySelectorAll('video[autoplay]').forEach((v) => {
if (!v.__szGov) { v.__szGov = 1; io.observe(v); }
});
const mo = new MutationObserver(scan);
mo.observe(document.body, { childList: true, subtree: true });
scan();
})();
// ---------- § 02 — Character builder (the live 10-step setup wizard) ----------
// Option tiles are crops of the real app's setup screens (assets/builder/*).
const CB_KEYS = ['skin', 'eye', 'hair', 'length', 'texture', 'lips', 'chest', 'hips', 'butt', 'thighs'];
const cbSlug = (s) => s.toLowerCase().replace(/[^a-z0-9]+/g, '-');
const cbOpts = (key, names) => names.map(n => [n, `assets/builder/${key}-${cbSlug(n)}.png`]);
const CB_WIZ = [
{ t: 'Skin tone', s: 'Choose the skin tone for your character.', sel: 1,
o: cbOpts('skin', ['Fair', 'Light', 'Medium', 'Olive', 'Tan', 'Brown', 'Dark', 'Black']) },
{ t: 'Eye color', s: 'Select the eye color for your character.', sel: 6,
o: cbOpts('eye', ['Brown', 'Dark brown', 'Hazel', 'Green', 'Blue', 'Gray', 'Amber']) },
{ t: 'Hair color', s: 'Choose the hair color for your character.', sel: 6,
o: cbOpts('hair', ['Black', 'Dark brown', 'Brown', 'Light brown', 'Blonde', 'Platinum blonde', 'Red', 'Auburn', 'Silver', 'Pink']) },
{ t: 'Hair length', s: 'Choose the hair length for your character.', sel: 1,
o: cbOpts('length', ['Buzzed', 'Short', 'Shoulder-length', 'Long', 'Very long']) },
{ t: 'Hair texture', s: 'Choose the hair texture for your character.', sel: 2,
o: cbOpts('texture', ['Straight', 'Wavy', 'Curly', 'Coily']) },
{ t: 'Lips', s: 'Choose the lip shape for your character.', sel: 2,
o: cbOpts('lips', ['Thin', 'Medium', 'Full', 'Very full']) },
{ t: 'Breast size', s: 'Choose the closest body shape for your character.', sel: 1,
o: cbOpts('chest', ['Flat', 'Small', 'Medium', 'Large', 'Extremely large']) },
{ t: 'Hips', s: 'Choose the hip shape for your character.', sel: 2,
o: cbOpts('hips', ['Narrow', 'Medium', 'Wide', 'Extremely wide']) },
{ t: 'Butt', s: 'Choose the butt shape for your character.', sel: 2,
o: cbOpts('butt', ['Small', 'Average', 'Round', 'Large', 'Very large']) },
{ t: 'Thighs', s: 'Choose the thigh shape for your character.', sel: 2,
o: cbOpts('thighs', ['Slim', 'Average', 'Toned', 'Thick', 'Very thick']) },
];
const CBTile = ({ name, src, on, small, onClick }) => (
{name}
{on &&
}
);
Object.assign(window, { CB_WIZ, CBTile });