// origin-film-lib.jsx — shared primitives for the GrytLabs Origin Story film. // Brand: indigo-black + studio gold (colors_and_type.css / brand-guidelines v0.4.0). const { Sprite, useSprite, useTime, useTimeline, Easing, clamp, interpolate } = window; const FILM = { W: 1920, H: 1080, bg: '#050a17', surface: '#0a1424', card: '#131e36', line: '#1a2844', lineStrong: '#28406a', ink: '#e8f0fa', ink2: '#c0d9f0', sec: '#8ab4e0', mut: '#5a8bc2', dim: '#3b6398', gold: '#c9a55a', goldHi: '#e0c184', goldSoft: 'rgba(201,165,90,0.16)', serif: '"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif', sans: "'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif", mono: "'Geist Mono', ui-monospace, SFMono-Regular, monospace", }; // Global film config (tweaks) — provided by the app. const FilmConfigContext = React.createContext({ showQuotes: true, motif: 'thread', opening: 'box' }); const useFilmConfig = () => React.useContext(FilmConfigContext); // ── Appear — the workhorse: fade/slide a block in at local time `at`, // optionally out at `out`. align 'center' centers on x. ──────────────── function Appear({ at = 0, dur = 0.9, from = 26, out = null, outDur = 0.8, x = 0, y = 0, w, align = 'left', style, children }) { const { localTime } = useSprite(); let o = 0, ty = from; if (localTime >= at) { const t = Easing.easeOutCubic(clamp((localTime - at) / dur, 0, 1)); o = t; ty = (1 - t) * from; } if (out != null && localTime >= out) { const t = Easing.easeInCubic(clamp((localTime - out) / outDur, 0, 1)); o *= (1 - t); ty = -t * 12; } if (o <= 0.001) return null; const tx = align === 'center' ? '-50%' : '0px'; return (
{children}
); } // ── ChapterShell — entry/exit fade + slow camera drift for a whole chapter ── function ChapterShell({ grow = 0.032, origin = '44% 40%', children }) { const { localTime, duration, progress } = useSprite(); const inO = Easing.easeOutCubic(clamp(localTime / 0.8, 0, 1)); const outO = 1 - Easing.easeInCubic(clamp((localTime - (duration - 1.1)) / 1.1, 0, 1)); return (
{children}
); } // ── Text helpers ──────────────────────────────────────────────────────────── const Hi = ({ children }) => {children}; const Em = ({ children }) => {children}; function Body({ size = 33, color = FILM.ink2, children, style }) { return (
{children}
); } function ChapterHead({ date, kicker, title, at = 0.3, size = 96, w = 1440, titleStyle }) { return (
{date}{kicker ?   ·  {kicker} : null}
{title}
); } // ── Quote — pull quote; hidden when the "Pull quotes" tweak is off ───────── function Quote({ at, out, x = 200, y, w = 1000, size = 42, quote, who, tag }) { const { showQuotes } = useFilmConfig(); if (!showQuotes) return null; return (
{quote}
{who ?
{who}
: null} {tag ?
{tag}
: null}
); } // ── Beats — the ledger of concrete outputs, staggered in ─────────────────── function Beats({ at = 0, x = 1240, y = 380, w = 520, step = 0.55, rowH = 88, label, items }) { return ( {label ? (
{label}
 ) : null} {items.map((it, i) => (
{it[0]} {it[1] ? {it[1]} : null}
))} ); } // ── GlassMoment — heightened glass card for pivotal beats ────────────────── function GlassMoment({ at, out, x = 360, y = 460, w = 1200, label, who, children }) { return (
{label ?
{label}
: null}
{children}
{who ?
{who}
: null}
); } // ── HexMark — the GrytLabs mark, self-drawing ─────────────────────────────── function HexMark({ x, y, size = 140, progress = 1, opacity = 1, align = 'left' }) { const p = clamp(progress, 0, 1); const innerO = clamp((p - 0.55) / 0.45, 0, 1) * 0.65; const tx = align === 'center' ? '-50%' : '0px'; return (
); } // ── LogoMark — the official GrytLabs mark: chrome strata pierced by the gold // spine + apex node (from favicon.svg). Pure inline SVG, sized by `size`. ── function LogoMark({ size = 104 }) { return ( ); } // ── AmbientBg — blueprint grid + drifting gold glow + vignette ───────────── function AmbientBg() { const t = useTime(); const gx = 72 + 9 * Math.sin(t * 0.045); const gy = -6 + 7 * Math.cos(t * 0.032); const bx = -8 + 6 * Math.sin(t * 0.028 + 2); return (
); } // ── MotifLayer — persistent story-spine, two variants ─────────────────────── function MotifLayer({ variant, marks = [] }) { const { time, duration } = useTimeline(); if (variant === 'none') return null; if (variant === 'constellation') return ; return ; } function Thread({ time, duration, marks }) { const x0 = 150, x1 = 1770, y = 998; const xFor = (t) => x0 + (t / duration) * (x1 - x0); const px = xFor(time); return ( {marks.map((m, i) => { const mx = xFor(m.t), passed = time >= m.t; return ( {m.label} ); })} ); } // Deterministic pseudo-random constellation of milestone stars. const frac = (v) => v - Math.floor(v); const STARS = Array.from({ length: 26 }, (_, i) => { const r1 = frac(Math.sin(i * 127.1 + 311.7) * 43758.5453); const r2 = frac(Math.sin(i * 269.5 + 183.3) * 43758.5453); const r3 = frac(Math.sin(i * 419.2 + 371.9) * 43758.5453); const r4 = frac(Math.sin(i * 631.1 + 97.7) * 43758.5453); return { x: 90 + r1 * 1740, y: 50 + r2 * 980, r: 2 + r3 * 2.4, base: 0.16 + r3 * 0.3, appear: r4, link: i > 0 ? Math.max(0, i - 1 - Math.floor(r2 * 3)) : -1, }; }); function Constellation({ time, duration }) { const ord = STARS.map((s, i) => ({ ...s, i })).sort((a, b) => a.appear - b.appear); const tAt = {}; ord.forEach((s, k) => { tAt[s.i] = 1 + (k / ord.length) * (duration * 0.92); }); const oFor = (i) => clamp((time - tAt[i]) / 1.6, 0, 1) * STARS[i].base * (0.78 + 0.22 * Math.sin(time * 1.25 + i * 1.7)); return ( {STARS.map((s, i) => (s.link >= 0 ? ( ) : null))} {STARS.map((s, i) => ( ))} ); } Object.assign(window, { FILM, FilmConfigContext, useFilmConfig, Appear, ChapterShell, Hi, Em, Body, ChapterHead, Quote, Beats, GlassMoment, HexMark, LogoMark, AmbientBg, MotifLayer, });