// ============================================================ // CONTENT — Problem, What is Shard, Features (bento), Personas, // How it works (seam path), Comparison (ledger rows) // ============================================================ function SectionHeader({ eyebrow, title, accentPart, lede, isMobile }) { const theme = window.useActiveTheme(); const { Eyebrow, AccentPhrase, Reveal } = window; return (
{eyebrow}

{title} {accentPart}.

{lede}

); } // ---------- PROBLEM — editorial ledger, no cards -------------- function ProblemSection() { const theme = window.useActiveTheme(); const { Section, Reveal } = window; const { isMobile } = window.useViewport(); const pains = [ { n: "01", title: "Vibes-based evaluation", body: "Your team feels the new model is better, but can't prove it. Each PM has a different mental rubric. Decisions drift.", }, { n: "02", title: "Benchmarks miss what matters", body: "Public benchmarks measure narrow capabilities. They don't capture what actually breaks your product — tone, bias, edge cases, regulatory context.", }, { n: "03", title: "Audit-ready means manual", body: "Compliance asks for evidence. You hand them a spreadsheet you made the night before. Nothing stitches together.", }, ]; return (
{pains.map((p, i) => (
/{p.n}

{p.title}

{p.body}

))}
); } // ---------- WHAT IS SHARD ------------------------------------- function WhatIsSection() { const theme = window.useActiveTheme(); const { Section, Eyebrow, AccentPhrase, Reveal } = window; const { isMobile } = window.useViewport(); return (
What is Shard?

End-to-end AI evaluation.

Shard is an end-to-end AI evaluation platform. You define what good looks like as a{" "} structured rubric, run your AI system through a library of scenarios, and score every response — by hand, by AI, or by a{" "} council of models that deliberate when they disagree. Every score, every justification, every prompt is recorded. You get model comparisons, certification tiers, bias reports, and consistency trends —{" "} without spreadsheets.

); } // ---------- FEATURES — bento grid ------------------------------ // Perpetual "council deliberation" — members re-rank on a loop. function CouncilLiveTile() { const theme = window.useActiveTheme(); const base = [ { name: "claude-fable-5", score: 4.6 }, { name: "gpt-5.2", score: 4.4 }, { name: "gemini-3.1-pro", score: 3.8 }, { name: "llama-4-405b", score: 4.1 }, ]; const [active, setActive] = React.useState(0); React.useEffect(() => { if (!window.motionAllowed()) return; const id = setInterval(() => setActive((a) => (a + 1) % base.length), 2200); return () => clearInterval(id); }, []); return (
{base.map((m, i) => { const isActive = i === active; return (
{m.name}
); })}
deliberation round 2 · consensus forming · self-bias check passed
); } // Rubric bars that fill when the tile scrolls into view. function RubricTile() { const theme = window.useActiveTheme(); const ref = React.useRef(null); const [fill, setFill] = React.useState(!window.motionAllowed()); React.useEffect(() => { if (!window.motionAllowed() || !("IntersectionObserver" in window)) { setFill(true); return; } const io = new IntersectionObserver( (es) => es.forEach((e) => e.isIntersecting && (setFill(true), io.disconnect())), { threshold: 0.4 } ); if (ref.current) io.observe(ref.current); return () => io.disconnect(); }, []); const rows = [ ["accuracy", 86], ["tone", 72], ["safety", 94], ["coverage", 63], ]; return (
{rows.map(([label, pct], i) => (
{label} {pct}
))}
); } function BentoTile({ area, title, body, children, big }) { const theme = window.useActiveTheme(); const { SpotlightCard } = window; const { isMobile } = window.useViewport(); return (

{title}

{body}

{children} ); } function FeaturesSection() { const theme = window.useActiveTheme(); const { Section, Reveal } = window; const { isMobile } = window.useViewport(); return (
); } // ---------- PERSONAS — zig-zag editorial ----------------------- function PersonasSection() { const theme = window.useActiveTheme(); const { Section, Reveal } = window; const { isMobile } = window.useViewport(); const personas = [ { who: "AI quality teams", youAre: "You ship LLM-powered features and want a stable measure of quality across releases.", use: "Lock in a rubric, regression-test every model bump, and catch quality drift before users do.", }, { who: "Compliance & governance", youAre: "You answer to a board, regulator, or customer about how your AI behaves.", use: "Generate auditable evidence — every score, every justification, tied to a versioned framework.", }, { who: "AI researchers & benchmarkers", youAre: "You're publishing comparisons or running domain-specific benchmarks.", use: "Define your benchmark once, run it against any model with credentials, and produce reproducible scores.", }, { who: "Certification bodies", youAre: "You issue domain-specific marks for AI systems — like BRAINS does for neuro-affirming AI.", use: "Operate the rubric, the panel, the audit trail, and the certification tiers in one place.", }, ]; return (
{personas.map((p, i) => { const even = i % 2 === 0; return (
{String(i + 1).padStart(2, "0")}

{p.who}

{p.use}

“ {p.youAre}

); })}
); } // ---------- HOW IT WORKS — kintsugi seam path ------------------- function HowItWorks() { const theme = window.useActiveTheme(); const { Section, Reveal } = window; const { isMobile } = window.useViewport(); const ref = React.useRef(null); const [drawn, setDrawn] = React.useState(!window.motionAllowed()); React.useEffect(() => { if (!window.motionAllowed() || !("IntersectionObserver" in window)) { setDrawn(true); return; } const io = new IntersectionObserver( (es) => es.forEach((e) => e.isIntersecting && (setDrawn(true), io.disconnect())), { threshold: 0.15 } ); if (ref.current) io.observe(ref.current); return () => io.disconnect(); }, []); const steps = [ { n: "01", title: "Define your framework", body: "Pick dimensions, criteria, and scoring descriptors that capture what good looks like in your domain. Version them so old scores stay comparable.", }, { n: "02", title: "Author scenarios", body: "Single-turn prompts, multi-turn conversations, or branching scripts. Run them at different literacy levels to test how the model adapts.", }, { n: "03", title: "Run + score", body: "Send scenarios through any model — yours, theirs, or both side by side. Score by hand, AI, or council.", }, { n: "04", title: "Compare, certify, report", body: "Dashboards across models, dimensions, and time. Issue certifications. Export evidence for stakeholders.", }, ]; // A jagged kintsugi seam, not a straight rail. const seamPath = "M20 0 L20 90 L34 130 L12 210 L20 250 L20 340 L30 380 L14 460 L20 500 L20 600 L26 640 L20 700 L20 800"; return (
{!isMobile && ( )}
{steps.map((s, i) => (
step /{s.n}

{s.title}

{s.body}

))}
); } // ---------- COMPARISON — ledger rows --------------------------- function ComparisonSection() { const theme = window.useActiveTheme(); const { Section, Reveal } = window; const { isMobile } = window.useViewport(); const rows = [ { vs: "vs. public benchmarks", sub: "MMLU, HumanEval, and friends", body: "Public benchmarks measure generic capabilities. Shard measures your domain — your tone, your edge cases, your compliance bar — with rubrics you control.", }, { vs: "vs. internal spreadsheets", sub: "The state of the art today", body: "Spreadsheets get lost. Shard tracks every score under a user ID, with versioned rubrics and an audit log. Hand it to an auditor without three weeks of cleanup.", }, { vs: "vs. observability tools", sub: "Datadog, Langfuse, Helicone", body: "Observability tells you the model responded. Shard tells you whether the response was good — graded against a rubric, with evidence.", }, ]; return (
{rows.map((c, i) => (
{c.vs}
{c.sub}

{c.body}

))}
); } window.SectionHeader = SectionHeader; window.ProblemSection = ProblemSection; window.WhatIsSection = WhatIsSection; window.FeaturesSection = FeaturesSection; window.PersonasSection = PersonasSection; window.HowItWorks = HowItWorks; window.ComparisonSection = ComparisonSection;