// scenes-b.jsx — Beats 4, 5, 6
// (LLM-judge ensemble, Anti-pattern guardrails, Verdict)
// ─────────────────────────────────────────────────────────────────────────
// BEAT 4 — LLM-judge ensemble (12–16.4s)
// Three judge nodes; thin lines connect to a central "Review" node;
// consensus indicator fills.
// ─────────────────────────────────────────────────────────────────────────
const JUDGES = [
{ name: 'Claude Opus', x: 540, y: 510, app: 0.35 },
{ name: 'GPT-5', x: 960, y: 510, app: 0.55 },
{ name: 'Gemini Pro', x: 1380, y: 510, app: 0.75 },
];
const REVIEW = { x: 960, y: 820, r: 90 };
function JudgeNode({ x, y, name, appearAt }) {
const { localTime } = useSprite();
const t = clamp((localTime - appearAt) / 0.5, 0, 1);
const eased = Easing.easeOutCubic(t);
const op = eased;
const scale = 0.7 + 0.3 * eased;
const r = 54;
return (
{/* Label below */}
{name}
Judge
);
}
function ConnectorLine({ from, to, start, color = TOKENS.ink2 }) {
const { localTime } = useSprite();
const t = clamp((localTime - start) / 0.7, 0, 1);
const p = Easing.easeInOutCubic(t);
// path total length
const dx = to.x - from.x, dy = to.y - from.y;
const len = Math.sqrt(dx * dx + dy * dy);
// we trim the endpoints by the node radii (54 judges, 90 review)
const trimFrom = 56, trimTo = 92;
const ux = dx / len, uy = dy / len;
const sx = from.x + ux * trimFrom;
const sy = from.y + uy * trimFrom;
const ex = to.x - ux * trimTo;
const ey = to.y - uy * trimTo;
const lineLen = Math.sqrt((ex - sx) ** 2 + (ey - sy) ** 2);
return (
);
}
function ReviewNode({ appearAt = 1.3, consensusAt = 2.6 }) {
const { localTime } = useSprite();
const t = clamp((localTime - appearAt) / 0.5, 0, 1);
const op = Easing.easeOutCubic(t);
const scale = 0.7 + 0.3 * Easing.easeOutCubic(t);
const r = REVIEW.r;
// consensus arc fills around the review node
const cT = clamp((localTime - consensusAt) / 1.0, 0, 1);
const cP = Easing.easeInOutCubic(cT);
const circumference = 2 * Math.PI * (r - 8);
return (
{/* Center label */}
Review
{/* Label beneath */}
Consensus · 3 / 3 agree
);
}
function Beat4() {
const op = useBeatOpacity(0.45, 0.5);
return (
Judged by ensemble.
{/* Lines drawn beneath nodes */}
{JUDGES.map(j => (
))}
);
}
function Beat4Sub() {
const { localTime } = useSprite();
const op = Easing.easeOutCubic(clamp((localTime - 0.1) / 0.5, 0, 1));
return (
Three independent frontier models score the signed outputs blind.
Disagreements are surfaced, not averaged away.
);
}
// ─────────────────────────────────────────────────────────────────────────
// BEAT 5 — Anti-pattern guardrails (16–20.4s)
// Three lines fade in; each gets struck through in orange.
// ─────────────────────────────────────────────────────────────────────────
const GUARDRAILS = [
'decode-only headlines',
'vendor-blog citation',
'random-token padding',
];
function GuardrailLine({ text, appearAt, top }) {
const { localTime } = useSprite();
// text fade in
const inT = clamp((localTime - appearAt) / 0.45, 0, 1);
const op = Easing.easeOutCubic(inT);
const ty = (1 - op) * 8;
// strike-through draw
const strikeT = clamp((localTime - (appearAt + 0.55)) / 0.6, 0, 1);
const strikeP = Easing.easeInOutCubic(strikeT);
// refused tag fade in after strike
const tagT = clamp((localTime - (appearAt + 1.0)) / 0.4, 0, 1);
const tagOp = Easing.easeOutCubic(tagT);
return (
{/* prefix "no" in italic */}
no
{/* the antipattern phrase, with overlayed strike-through */}
{text}
{/* strike */}
{/* "refused" tag */}
Refused
);
}
function Beat5() {
const op = useBeatOpacity(0.45, 0.5);
return (
);
}
function Beat5Sub() {
const { localTime } = useSprite();
const op = Easing.easeOutCubic(clamp((localTime - 0.1) / 0.5, 0, 1));
return (
Three habits that make benchmark numbers look good
and make benchmark articles look bad.
);
}
// ─────────────────────────────────────────────────────────────────────────
// BEAT 6 — Verdict (20–25s)
// Single card center: "Silicon Logic" wordmark + "Auditable, not anecdotal."
// Holds for 2 seconds at the end. Fades on loop seam.
// ─────────────────────────────────────────────────────────────────────────
function Beat6() {
const op = useBeatOpacity(0.7, 0.6);
const { localTime } = useSprite();
// Hairlines above & below: draw from center outward
const ruleT = clamp((localTime - 0.5) / 0.9, 0, 1);
const ruleP = Easing.easeOutCubic(ruleT);
// Wordmark: fade up
const wordT = clamp((localTime - 0.9) / 0.7, 0, 1);
const wordOp = Easing.easeOutCubic(wordT);
const wordTy = (1 - wordOp) * 12;
// Tagline reveal
const tagT = clamp((localTime - 1.7) / 0.7, 0, 1);
const tagOp = Easing.easeOutCubic(tagT);
// seal mark fade
const sealT = clamp((localTime - 2.4) / 0.6, 0, 1);
const sealOp = Easing.easeOutCubic(sealT);
return (
{/* Decorative top hairline */}
{/* Decorative bottom hairline */}
{/* Wordmark — large serif, centered */}
Silicon Logic
{/* Tagline — italic, smaller */}
Auditable, not anecdotal.
{/* Small seal mark — accent, below tagline */}