/* About screen — the manifesto + scroll-down explainer. Page 0 in the flow: visible in the top nav, always reachable, and the default landing for fresh visits (no URL hash, no ?room=). Returning users who land on a hashed/shared URL skip straight into their saved state and never see this screen unless they click the About tab. Layout: manifesto hero above the fold (headline + sub + CTA), longer explainer below the fold (why / what / how + the three modes). */ /* global React, FRAMEWORK */ function About({ setScreen }) { const beginSetup = () => setScreen("landing"); return (
{/* ───────────────────────────────────────────────────────────── MANIFESTO — above the fold ───────────────────────────────────────────────────────────── */}
Protein Engineering · North star

Decide what matters .
Before the work starts.

A protein-engineering team that hasn't agreed on its quality attributes is silently optimizing for different things. This tool gives the team the language to align — and a wall poster to keep that alignment visible while the lab work runs.

10–15 minutes alone. 30–60 with the team. No login, no account, session lives in the URL.
{/* Visual divider — set the explainer apart from the manifesto */}
WHY · WHAT · HOW
{/* ───────────────────────────────────────────────────────────── EXPLAINER — below the fold ───────────────────────────────────────────────────────────── */}

Every protein-engineering project optimizes for something. If your team hasn't said what, you're silently optimizing for different things — stability for one, manufacturability for another, affinity for the third. By month three, you've spent the budget on an asset nobody asked for.

The fix is upfront: agree on what success looks like, write it down, and keep it visible while the lab work runs. Decisions that were arguments before become five-second checks against the wall.

The framework covers every quality attribute a protein-engineering team might care about: binding affinity, stability under stress, expression yield, immunogenicity, evolvability under selection, governance and provenance. For any specific project, only 8–15 of the 56 leaves are real priorities.

The other ~40 are knowingly out of scope, and saying so explicitly is itself the alignment. The sparsity is the signal.

Next time someone proposes a trade-off — "should we sacrifice some thermostability for a 2× expression bump?" — you don't argue. The poster already gives you the answer.

{/* Bottom CTA — repeat the primary action so the user doesn't have to scroll back up */}
READY?

Open the framework and pick what matters for your project.

{/* Tiny credit — same Crane attribution as the poster footers */}
Crane Bioworks · hello@cranebioworks.com · Built with ❤ from 🇧🇪 🇪🇺
); } // ───────────────────────────────────────────────────────────────────────────── // Pieces // ───────────────────────────────────────────────────────────────────────────── function ExplainerSection({ eyebrow, heading, children }) { return (
{eyebrow}

{heading}

{children}
); } function GroupGrid() { // Render the 10 group names as a quick visual of the framework's surface // area — gives a sense of breadth without forcing the reader into the // full leaf list. const groups = (typeof window !== "undefined" && window.FRAMEWORK && window.FRAMEWORK.groups) || []; if (groups.length === 0) return null; return (
{groups.map(g => (
{String(g.id).padStart(2, "0")} {g.name}
))}
); } function ProcessSteps() { const steps = [ { tier: "Lead", target: "3–5", blurb: "The project lives or dies on these. Spell out the metric or threshold where you can.", color: "var(--c-violet)", }, { tier: "Follow", target: "5–10", blurb: "Tracked. Should land in spec; not the thing the program optimizes for.", color: "var(--c-emerald)", }, { tier: "Out of scope", target: "the rest", blurb: "Knowingly excluded. The framework is bigger than this project — and saying so out loud is the alignment.", color: "rgba(34,49,83,0.35)", }, ]; return (
{steps.map((s) => (

{s.tier}

target · {s.target}

{s.blurb}

))}
); } function ModeCard({ title, blurb, accent }) { const isViolet = accent === "violet"; return (

{title}

{blurb}

); } window.About = About;