// ContractFill — "How it works" film · brand tokens + reusable set pieces
// All motion is a pure function of time (no CSS animations) so the film is
// frame-exact under the deterministic recorder (record.html / __frame).
const HIW = {
navy900: '#0C2237', navy800: '#0F2A44', navy700: '#15334F', navy600: '#1B3A5C',
gold: '#BF953F', goldMid: '#DFC26A', goldDark: '#AA771C',
cream: '#FAF9F7', beige: '#F5F1ED', warmGray: '#E8E5E1', warmBorder: '#DAD5CF',
ink: '#0F2A44', muted: '#6B6560', mutedLight: '#9A938C', ok: '#2E8B57', err: '#C0504A',
serif: "'Crimson Pro', Georgia, serif",
sans: "'Inter', system-ui, sans-serif",
mono: "'IBM Plex Mono', ui-monospace, monospace",
goldGrad: 'linear-gradient(135deg,#BF953F 0%,#DFC26A 50%,#B38728 100%)',
navyBg: [
'radial-gradient(ellipse at 16% 12%, rgba(42,80,128,0.5) 0%, transparent 58%)',
'radial-gradient(ellipse at 86% 90%, rgba(15,42,68,0.62) 0%, transparent 55%)',
'radial-gradient(circle at 84% 14%, rgba(191,149,63,0.12) 0%, transparent 46%)',
'linear-gradient(150deg,#0C2237 0%,#15334F 30%,#1B3A5C 55%,#1F4268 70%,#0A1F35 100%)',
].join(','),
};
// ── tiny helpers ─────────────────────────────────────────────────────────────
const useLocal = () => useSprite().localTime;
// fade+rise entry / fade exit, driven by local sprite time
function ease01(t, start, dur, ease = Easing.easeOutCubic) {
return ease(clamp((t - start) / dur, 0, 1));
}
function In({ at = 0, dur = 0.5, dy = 24, dx = 0, ease = Easing.easeOutCubic, style = {}, children }) {
const t = useLocal();
const p = ease01(t, at, dur, ease);
return (
{children}
);
}
function Pop({ at = 0, dur = 0.45, from = 0.82, ease = Easing.easeOutBack, style = {}, children }) {
const t = useLocal();
if (t < at) return {children}
;
const p = ease01(t, at, dur, ease);
const op = ease01(t, at, dur * 0.6, Easing.easeOutQuad);
return (
{children}
);
}
// scene-level exit fade (last `dur` seconds of the sprite window)
function SceneFade({ inDur = 0.35, outDur = 0.4, children }) {
const { localTime, duration } = useSprite();
const a = ease01(localTime, 0, inDur, Easing.easeOutQuad);
const b = 1 - ease01(localTime, duration - outDur, outDur, Easing.easeInQuad);
return {children}
;
}
// slow camera move across the scene hold
function Camera({ from = 1, to = 1.045, origin = '62% 42%', children }) {
const { progress } = useSprite();
const z = from + (to - from) * progress;
return (
{children}
);
}
function SceneBG() {
return ;
}
// ── left-column step caption ────────────────────────────────────────────────
function StepCaption({ num, label, title, at = 0.15 }) {
return (
);
}
// ── product browser window ──────────────────────────────────────────────────
function BrowserWin({ url, x = 800, y = 150, w = 980, h = 780, at = 0.25, children }) {
return (
);
}
// ── chat bubbles ────────────────────────────────────────────────────────────
function Bubble({ kind = 'q', at = 0, children }) {
const styles = {
q: { background: HIW.beige, color: '#333', borderRadius: '20px 20px 20px 5px', marginRight: 120 },
a: { background: HIW.navy600, color: '#fff', borderRadius: '20px 20px 5px 20px', marginLeft: 120 },
flag: { background: '#FFF8E7', borderLeft: `6px solid ${HIW.gold}`, color: '#333', borderRadius: '5px 20px 20px 5px', marginRight: 60 },
}[kind];
return (
{children}
);
}
// three thinking dots, deterministic pulse
function TypingDots({ at = 0, until = 99 }) {
const t = useLocal();
if (t < at || t > until) return null;
const op = ease01(t, at, 0.3);
return (
{[0, 1, 2].map((i) => {
const phase = Math.sin((t - at) * 7 - i * 0.9) * 0.5 + 0.5;
return ;
})}
);
}
// typewriter text, deterministic
function TypeText({ text, at = 0, cps = 22, caret = true, style = {} }) {
const t = useLocal();
const n = t < at ? 0 : Math.min(text.length, Math.floor((t - at) * cps));
const doneAt = at + text.length / cps;
const caretOn = caret && t >= at && t < doneAt + 0.6 && Math.floor(t * 2.5) % 2 === 0;
return (
{text.slice(0, n)}
▏
);
}
// ── data cards ──────────────────────────────────────────────────────────────
function FieldCard({ k, v, at }) {
return (
);
}
function CheckRow({ at, color = HIW.ok, icon = '✓', children, sub, mono }) {
return (
{icon}
{children}
{sub ?
{sub}
: null}
{mono ?
{mono} : null}
);
}
// completeness meter that climbs from -> to over [at, at+dur]
function Meter({ at = 0, dur = 1.4, from = 62, to = 100 }) {
const t = useLocal();
const p = ease01(t, at, dur, Easing.easeInOutCubic);
const val = Math.round(from + (to - from) * p);
const done = val >= 100;
return (
Contract completeness
{val}%
);
}
function SigRow({ initials, name, role, status, at }) {
const signed = status === 'signed';
return (
);
}
// ── animated cursor ─────────────────────────────────────────────────────────
// keyframes: [{t, x, y}] in scene-local seconds; clickAt: pulse moment
function Cursor({ frames, clickAt = null, scale = 1.6 }) {
const t = useLocal();
if (t < frames[0].t) return null;
const xs = interpolate(frames.map(f => f.t), frames.map(f => f.x), Easing.easeInOutCubic);
const ys = interpolate(frames.map(f => f.t), frames.map(f => f.y), Easing.easeInOutCubic);
let ringOp = 0, ringR = 0;
if (clickAt != null && t >= clickAt && t < clickAt + 0.55) {
const p = (t - clickAt) / 0.55;
ringOp = (1 - p) * 0.9;
ringR = 14 + p * 44;
}
const press = clickAt != null && t >= clickAt && t < clickAt + 0.18 ? 0.82 : 1;
return (
);
}
Object.assign(window, {
HIW, useLocal, ease01, In, Pop, SceneFade, Camera, SceneBG,
StepCaption, BrowserWin, Bubble, TypingDots, TypeText,
FieldCard, CheckRow, Meter, SigRow, Cursor,
});