Spaces:
Running
Running
Commit History
-
Role: You are a senior front-end engineer + interaction designer. Build a production-ready, accessible, fast scrollytelling website that explains a synthetic-biology system.
Verified signatureGoal: Explain, with visuals and lightweight interactivity, how a tag-less QC/selection system in E. coli detects Type-2 cheaters via native stress pathways, gates a kill switch with ProductionMode, commits cheaters via a recombinase latch, and protects good cells with a translation-completion “certificate” that produces an Antidote. The story must feel scientific yet approachable to a mixed audience (synbio engineers, PIs, biotech PMs). Technical spec Framework: Next.js 15 + React + TypeScript. Styling: Tailwind CSS; fluid typography; dark-mode first; prefers-reduced-motion support. Scroll engine: GSAP + ScrollTrigger or (if you choose minimal deps) IntersectionObserver + CSS position: sticky. Content format: MDX for copy; SVG for diagrams; JSON for data (metrics/timelines). Bundled assets: All SVGs generated inline; no external image dependencies. Analytics: Lightweight (e.g., Plausible hook placeholder; no PII). SEO: <head> metadata, OpenGraph image, schema.org Article. Perf…2978ed5 -
Role: You are a senior front-end engineer + interaction designer. Build a production-ready, accessible, fast scrollytelling website that explains a synthetic-biology system.
Verified signatureGoal: Explain, with visuals and lightweight interactivity, how a tag-less QC/selection system in E. coli detects Type-2 cheaters via native stress pathways, gates a kill switch with ProductionMode, commits cheaters via a recombinase latch, and protects good cells with a translation-completion “certificate” that produces an Antidote. The story must feel scientific yet approachable to a mixed audience (synbio engineers, PIs, biotech PMs). Technical spec Framework: Next.js 15 + React + TypeScript. Styling: Tailwind CSS; fluid typography; dark-mode first; prefers-reduced-motion support. Scroll engine: GSAP + ScrollTrigger or (if you choose minimal deps) IntersectionObserver + CSS position: sticky. Content format: MDX for copy; SVG for diagrams; JSON for data (metrics/timelines). Bundled assets: All SVGs generated inline; no external image dependencies. Analytics: Lightweight (e.g., Plausible hook placeholder; no PII). SEO: <head> metadata, OpenGraph image, schema.org Article. Perf…d3a965f