);
}
// The GrytLabs logo, released by the unfolding box — rises into place between
// the headline and the subtitle, and stays with the title card.
function TitleLogo() {
const { localTime: lt } = useSprite();
const t = Easing.easeOutCubic(clamp((lt - 3.5) / 1.0, 0, 1));
if (t <= 0.001) return null;
const scale = 0.78 + 0.22 * t;
return (
);
}
// Alternate opening (Tweaks → Opening → mark): the original self-drawing mark.
function MarkDraw() {
const { localTime: lt } = useSprite();
const p = Easing.easeInOutCubic(clamp((lt - 0.3) / 2.4, 0, 1));
const o = Easing.easeOutCubic(clamp(lt / 0.8, 0, 1)) *
(1 - Easing.easeInOutCubic(clamp((lt - 3.2) / 1.2, 0, 1)));
if (o <= 0.001) return null;
return (
);
}
// ── 1 · The disruption (12–38) ──────────────────────────────────────────────
function DisruptionScene() {
return (
Widespread changes to federal funding hit DC Smith Advisory and
opened a sudden gap.
She opened a large language model for the first time. Not to build
anything — to steady the moment: a résumé, cover letters, a job search.
The first result stopped her.
A tool grabbed to survive a setback had just compressed a week of
contractor work into an afternoon.
Quietly, the job hunt started to
become something else.
);
}
// ── 2 · The drift (38–66) ───────────────────────────────────────────────────
function DriftTitle() {
const { progress } = useSprite();
return (
The drift
);
}
function DriftScene() {
return (
} />
She drove the tools deeper into the practice itself — and the deeper
she went, the more she saw the same flaw: the models drifted.
Lost the thread. Contradicted themselves. Wandered from facts sitting
right there in the corpus.
Not raw capability — something structural, in how these
systems held, or failed to hold, what they were given.
);
}
// ── 3 · The weaving (66–96) ─────────────────────────────────────────────────
function WeaveVisual() {
const { localTime: lt } = useSprite();
const r = 134, cx = 290, cy = 292;
const crashEnd = 14, settleEnd = 19.5;
const oscAt = (x) => 320 - 215 * Math.abs(Math.sin(x * 0.7));
let sep;
if (lt < crashEnd) sep = oscAt(lt);
else if (lt < settleEnd) {
const k = Easing.easeInOutCubic((lt - crashEnd) / (settleEnd - crashEnd));
sep = oscAt(crashEnd) + (148 - oscAt(crashEnd)) * k;
} else sep = 148;
const overlap = Math.max(0, 200 - sep) / 200;
const shake = lt < crashEnd ? overlap * Math.sin(lt * 42) * 5 : 0;
const settled = clamp((lt - settleEnd) / 2, 0, 1);
const rot = lt > settleEnd ? (lt - settleEnd) * 7 : 0;
const enter = Easing.easeOutCubic(clamp((lt - 1.2) / 1.4, 0, 1));
const labelO = 1 - Easing.easeInOutCubic(clamp((lt - crashEnd) / 4, 0, 1));
if (enter <= 0.001) return null;
return (
World-model loop
Enterprise loop
two loops, one frame
);
}
function WeaveScene() {
return (
Two loops had been crashing into each other for months:
LeCun’s world-model loop, and the enterprise loop she’d
lived as a performance auditor — plan, execute, learn, plan.
Claude Opus 4.5 meets the DCSA Unified Data
Architecture in December — the GrantsProQR prototype, an
AI-native grant consulting service, ushers in the new year.
);
}
// The catalyst's visual: a line-drawn rocket lifting off a launch pad.
function RocketVisual() {
const { localTime: lt } = useSprite();
const enter = Easing.easeOutCubic(clamp((lt - 1.0) / 1.4, 0, 1));
if (enter <= 0.001) return null;
const ignite = Easing.easeOutCubic(clamp((lt - 3.6) / 1.4, 0, 1));
const lift = Easing.easeInCubic(clamp((lt - 5.5) / 10, 0, 1));
const riseY = -lift * 170;
const flick = 1 + 0.2 * Math.sin(lt * 24);
const flame = ignite * (28 + 78 * lift) * flick;
const smoke = clamp((lt - 5) / 3.5, 0, 1);
const gold = FILM.gold, blue = FILM.mut;
return (
);
}
function CatalystScene() {
return (
In January, her sister’s six words changed
everything — “I want to start a business!”
The answer had a shape: GR🚀T, an app for founders —
and beneath it, the Decision Lineage Protocol (DLP).
);
}
// ── 4 · The transition (96–124) ─────────────────────────────────────────────
function ChipRow({ at = 0, y = 916, items }) {
const { localTime: lt } = useSprite();
return (
{items.map((c, i) => {
const o = Easing.easeOutCubic(clamp((lt - at - i * 0.55) / 0.7, 0, 1));
return (
{c[0]}{c[1]}
);
})}
);
}
function TransitionScene() {
return (
In February she watched the World Model Workshop at Mila.
The field’s most serious minds circled one question — what is
the right level of abstraction? Inconclusive.
“I kept waiting for a hook that never came — to what end is this work being
done? What value are we aiming for, and for whom?”
);
}
function SpecDemoScene() {
return (
She watched the workshop panel again and again — pausing, taking
notes, researching the notes, returning. Evidence mounting.
Confidence and capability high, Cam and Claude Opus 4.6 turn
the DLP specification into a DLP-SDK prototype. After that,
things moved fast.
);
}
// ── 5 · The institute (124–147) ─────────────────────────────────────────────
function ClusterCard({ x, y, at, title, items, w = 412 }) {
const { localTime: lt } = useSprite();
const o = Easing.easeOutCubic(clamp((lt - at) / 0.8, 0, 1));
if (o <= 0.001) return null;
return (
The cycle turns again — GEM is the new thesis; the work begins one altitude higher.
);
}
function InstituteScene() {
return (
April — June 2026 · GrytLabs Dynamics Inc
);
}
// ── 6 · Coda (147–160) ──────────────────────────────────────────────────────
// The "for-whom", made literal — a slow carousel of the practitioners the work
// serves. Small translucent glass cards, each carrying a gold practitioner
// glyph, drift past a masked window with the centre held in focus.
const FORWHOM = [
['attorney', 'Attorney'],
['auditor', 'Auditor'],
['clinician', 'Clinician'],
['educator', 'Educator'],
['planner', 'Planner'],
['public-servant', 'Public servant'],
['household-manager', 'Household manager'],
['small-business-operator', 'Small business'],
];
function ForWhomCard({ slug, label, x, y, w, h, scale, opacity, focus }) {
return (
A year later,
the work had what the panel never named: an end, and a for-whom.
All you need is knowledge — and Gr🚀t.
);
}
function CodaMark() {
const { localTime } = useSprite();
const p = Easing.easeInOutCubic(clamp((localTime - 9.6) / 1.8, 0, 1));
if (p <= 0.001) return null;
return (
);
}
// ── P1 · Twenty years, one job (12–31) ──────────────────────────────────────
function EraCard({ x, y, w = 700, at, roman, years, kicker, title, roles }) {
const { localTime: lt } = useSprite();
const o = Easing.easeOutCubic(clamp((lt - at) / 0.8, 0, 1));
if (o <= 0.001) return null;
return (
{roman} · {years} · {kicker}
{title}
{roles.map((r, i) => (
{r}
))}
);
}
function PrologueFounderScene() {
return (
Before the chat window that would change everything, there were
two decades under a single title — performance auditor. Making
high-stakes public money accountable, and usable by the people who run it.
Certified Internal Auditor (CIA) · Certified Government Auditing Professional (CGAP) · FSU B.S. Accounting & Finance
Every title was the same job — generalized, one day, to the AI era.
);
}
// ── P2 · The ARPA work (31–50) ──────────────────────────────────────────────
function InstrumentCard({ x, y, w = 660, at, tag, title, role, points }) {
const { localTime: lt } = useSprite();
const o = Easing.easeOutCubic(clamp((lt - at) / 0.8, 0, 1));
if (o <= 0.001) return null;
return (
{/* column divider */}
{/* LEFT · Public Service */}
Public Service
March 2021 — a brand-new $46.2M federal relief program
landed on the City of Tallahassee while Treasury was still writing the rules.
She turned it into something a government could execute.
{/* RIGHT · Private Sector */}
Private Sector
“You never know how strong you are until being strong is your only choice.”
~ Bob Marley
);
}
// ── Chapter map ─────────────────────────────────────────────────────────────
// ── Logo sting — the closing brand beat. Ported from the production sting
// engine (sting-engine.js): strata draw → spine + nodes → converge → flash
// → the matrix GLOBE LOADER compiles on (gold binary, top→bottom) → whirl
// rings spiral in and lock → wordmark. All phases are driven off the film
// timeline (localTime) so it scrubs and exports deterministically.
// The canvas globe: a glossy navy sphere skinned in gold binary that "compiles
// on" from the top pole down. Ported 1:1 from sting-engine.js renderGlobe.
const ST_TINT = { dim: [201, 165, 90], hot: [232, 196, 120], white: [255, 245, 212] };
function stIhash(a, b, c) {
let h = (a | 0) * 73856093 ^ (b | 0) * 19349663 ^ (c | 0) * 83492791;
h = Math.imul(h ^ h >>> 13, 1274126177);
return (h ^ h >>> 16) >>> 0;
}
function drawStingGlobe(ctx, SIZE, absTime, rotLambda, revealFrac) {
const CX = SIZE / 2, CY = SIZE / 2, R = SIZE * 0.32, TILT = -22, k = R / 230;
const proj = (lon, lat) => {
const l0 = rotLambda * Math.PI / 180, f0 = TILT * Math.PI / 180;
const lr = lon * Math.PI / 180 - l0, fr = lat * Math.PI / 180;
const cosc = Math.sin(f0) * Math.sin(fr) + Math.cos(f0) * Math.cos(fr) * Math.cos(lr);
if (cosc < 0) return null;
const x = R * Math.cos(fr) * Math.sin(lr);
const y = R * (Math.cos(f0) * Math.sin(fr) - Math.sin(f0) * Math.cos(fr) * Math.cos(lr));
return [CX + x, CY - y, cosc];
};
ctx.clearRect(0, 0, SIZE, SIZE);
let g = ctx.createRadialGradient(CX, CY, R * 0.99, CX, CY, R * 1.17);
g.addColorStop(0, 'rgba(232,196,120,0.28)'); g.addColorStop(0.45, 'rgba(201,165,90,0.08)'); g.addColorStop(1, 'rgba(201,165,90,0)');
ctx.fillStyle = g; ctx.beginPath(); ctx.arc(CX, CY, R * 1.17, 0, Math.PI * 2); ctx.fill();
g = ctx.createRadialGradient(CX - R * 0.38, CY - R * 0.45, R * 0.04, CX + R * 0.10, CY + R * 0.14, R * 1.05);
g.addColorStop(0, '#3a4a6c'); g.addColorStop(0.10, '#22304a'); g.addColorStop(0.30, '#121a2c');
g.addColorStop(0.62, '#070b18'); g.addColorStop(0.88, '#03050d'); g.addColorStop(1, '#010205');
ctx.beginPath(); ctx.arc(CX, CY, R, 0, Math.PI * 2); ctx.fillStyle = g; ctx.fill();
ctx.save(); ctx.beginPath(); ctx.arc(CX, CY, R - 1, 0, Math.PI * 2); ctx.clip();
ctx.beginPath(); let first = true;
for (let lon = -180; lon <= 180; lon += 4) {
const p = proj(lon, 0); if (!p) { first = true; continue; }
if (first) { ctx.moveTo(p[0], p[1]); first = false; } else ctx.lineTo(p[0], p[1]);
}
ctx.lineWidth = 1.0 * k; ctx.strokeStyle = 'rgba(232,196,120,0.20)'; ctx.stroke();
const revealLat = 95 - 190 * revealFrac;
if (revealFrac > 0) {
ctx.font = `600 ${(14 * k).toFixed(1)}px "Geist Mono","JetBrains Mono",ui-monospace,monospace`;
ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
const latStep = 5, baseLonStep = 5;
const bitBucket = Math.floor(absTime * 1.6), heatBucket = Math.floor(absTime * 3.0);
for (let lat = 78; lat >= -78; lat -= latStep) {
if (lat < revealLat) break;
const latRad = lat * Math.PI / 180;
const lonStep = Math.min(40, baseLonStep / Math.max(0.18, Math.cos(latRad)));
const rowOffset = (Math.round(lat / latStep) & 1) ? lonStep * 0.5 : 0;
const rowFresh = clamp(1 - (lat - revealLat) / 14, 0, 1);
for (let lon = -180 + rowOffset; lon < 180; lon += lonStep) {
const p = proj(lon, lat); if (!p) continue;
const dr = Math.hypot(p[0] - CX, p[1] - CY) / R; if (dr > 0.985) continue;
const limbFade = 1 - Math.pow(dr, 3.2); if (limbFade <= 0.02) continue;
const cellId = (Math.round(lat * 11) | 0) * 1009 + Math.round(lon * 11);
const h = stIhash(Math.round(lat * 11), Math.round(lon * 11), bitBucket);
const bit = (h & 1) ? '1' : '0';
const heatH = stIhash(cellId, 17, heatBucket) / 0xffffffff;
let rC, gC, bC, aC; const boosted = rowFresh > 0.4 && heatH > 0.6;
if (boosted || heatH > 0.985) { [rC, gC, bC] = ST_TINT.white; aC = (0.85 + 0.10 * rowFresh) * limbFade; }
else if (heatH > 0.90) {
const kk = (heatH - 0.90) / 0.085;
rC = ST_TINT.dim[0] + (ST_TINT.hot[0] - ST_TINT.dim[0]) * kk;
gC = ST_TINT.dim[1] + (ST_TINT.hot[1] - ST_TINT.dim[1]) * kk;
bC = ST_TINT.dim[2] + (ST_TINT.hot[2] - ST_TINT.dim[2]) * kk;
aC = (0.55 + 0.35 * kk) * limbFade;
} else { [rC, gC, bC] = ST_TINT.dim; aC = 0.16 + 0.42 * limbFade; }
ctx.fillStyle = `rgba(${rC | 0},${gC | 0},${bC | 0},${aC})`;
ctx.fillText(bit, p[0], p[1]);
}
}
}
let wash = ctx.createRadialGradient(CX - R * 0.40, CY - R * 0.55, 0, CX - R * 0.40, CY - R * 0.55, R * 0.85);
wash.addColorStop(0, 'rgba(255,250,235,0.32)'); wash.addColorStop(0.4, 'rgba(220,235,255,0.08)'); wash.addColorStop(1, 'rgba(220,235,255,0)');
ctx.fillStyle = wash; ctx.fillRect(0, 0, SIZE, SIZE);
ctx.save(); ctx.translate(CX - R * 0.42, CY - R * 0.52); ctx.rotate(-0.45); ctx.scale(1.4, 0.75);
let gl = ctx.createRadialGradient(0, 0, 0, 0, 0, R * 0.18);
gl.addColorStop(0, 'rgba(255,255,250,0.85)'); gl.addColorStop(0.4, 'rgba(255,255,250,0.25)'); gl.addColorStop(1, 'rgba(255,255,250,0)');
ctx.fillStyle = gl; ctx.beginPath(); ctx.arc(0, 0, R * 0.22, 0, Math.PI * 2); ctx.fill(); ctx.restore();
let limb = ctx.createRadialGradient(CX, CY, R * 0.5, CX, CY, R);
limb.addColorStop(0, 'rgba(0,0,0,0)'); limb.addColorStop(0.7, 'rgba(0,0,0,0.22)'); limb.addColorStop(0.92, 'rgba(0,0,0,0.62)'); limb.addColorStop(1, 'rgba(0,0,0,0.92)');
ctx.fillStyle = limb; ctx.fillRect(0, 0, SIZE, SIZE);
ctx.restore();
ctx.beginPath(); ctx.arc(CX, CY, R, 0, Math.PI * 2); ctx.lineWidth = 1.6 * k; ctx.strokeStyle = 'rgba(232,196,120,0.55)'; ctx.stroke();
ctx.beginPath(); ctx.arc(CX, CY, R + 3 * k, 0, Math.PI * 2); ctx.lineWidth = 0.6 * k; ctx.strokeStyle = 'rgba(201,165,90,0.22)'; ctx.stroke();
}
// Globe loader: scales in + compiles on over P7 (localTime `at`..`at+dur`), then
// holds and rotates. Draws on every frame from the timeline value `t`.
function GlobeLoader({ t, at = 4.35, dur = 0.85, size = 440 }) {
const ref = React.useRef(null);
const stateRef = React.useRef(null);
const dpr = Math.min(window.devicePixelRatio || 1, 2);
const p7 = clamp((t - at) / dur, 0, 1);
const opacity = Easing.easeOutCubic(clamp(p7 * 1.4, 0, 1));
const scale = 0.1 + 0.9 * Easing.easeOutCubic(p7);
const reveal = Easing.easeInOutCubic(clamp((p7 - 0.15) / 0.85, 0, 1));
const rot = Math.max(0, t - at) * 14;
React.useLayoutEffect(() => {
const canvas = ref.current; if (!canvas) return;
let st = stateRef.current;
if (!st) {
canvas.width = size * dpr; canvas.height = size * dpr;
const ctx = canvas.getContext('2d'); ctx.scale(dpr, dpr);
st = stateRef.current = { ctx };
}
if (opacity <= 0.002) { st.ctx.clearRect(0, 0, size, size); return; }
drawStingGlobe(st.ctx, size, t, rot, reveal);
});
return (
);
}
// Whirl rings that spiral in (scale 2→1) and lock over P8. Ring spins derive
// from localTime so they're deterministic.
function stArc(cx, cy, r, a, b) {
const p2c = (deg) => { const rad = (deg - 90) * Math.PI / 180; return [cx + r * Math.cos(rad), cy + r * Math.sin(rad)]; };
const [sx, sy] = p2c(b), [ex, ey] = p2c(a);
return `M ${sx} ${sy} A ${r} ${r} 0 ${b - a <= 180 ? 0 : 1} 0 ${ex} ${ey}`;
}
function StingWhirl({ t, at = 5.3, dur = 0.8, size = 440 }) {
const p8 = clamp((t - at) / dur, 0, 1);
if (p8 <= 0.001) return null;
const op = Easing.easeOutCubic(p8);
const scale = 2.0 - 1.0 * Easing.easeOutQuart(p8);
const w = (rate) => (t * 360 / rate) % 360;
const ticks = [];
for (let i = 0; i < 72; i++) {
const major = i % 6 === 0;
ticks.push();
}
const streakSet = (base, color, o, width, len) => [0, 90, 180, 270].map((a) => (
));
const cardinals = [0, 90, 180, 270].map((a) => {
const rad = a * Math.PI / 180, x = 50 + Math.cos(rad) * 48.8, y = 50 + Math.sin(rad) * 48.8;
return ();
});
return (
