const { useState, useEffect } = React; /* --------------------------- primitives --------------------------- */ const Play = ({ size = 14, stroke = 1.5, className = "" }) => ( ); const Arrow = ({ size = 14, className = "" }) => ( ); const ArrowDown = ({ size = 14 }) => ( ); const Check = ({ size = 14 }) => ( ); /* scroll helper */ const scrollToContact = (e) => { if (e) e.preventDefault(); const el = document.getElementById("contact"); if (el) el.scrollIntoView({ behavior: "smooth", block: "start" }); setTimeout(() => { const first = document.querySelector("#contact input[name='name']"); if (first) first.focus({ preventScroll: true }); }, 650); }; const scrollToWork = (e) => { if (e) e.preventDefault(); const el = document.getElementById("work"); if (el) el.scrollIntoView({ behavior: "smooth", block: "start" }); }; const scrollToId = (id) => (e) => { if (e) e.preventDefault(); const el = document.getElementById(id); if (el) el.scrollIntoView({ behavior: "smooth", block: "start" }); }; /* --------------------------- video placeholder --------------------------- */ /* Stills: category-specific line art so tiles read as real project thumbnails, not empty gradients */ const WorkThumbVisual = ({ category, gradient }) => { const lime = "rgba(216,255,79,0.5)"; const ice = "rgba(168,216,240,0.4)"; const dim = "rgba(245,245,247,0.12)"; let g = null; switch (category) { case "MOA Film": g = ( ); break; case "Surgical Visualization": g = ( ); break; case "Cellular Animation": g = ( ); break; case "Device Demo": g = ( ); break; case "Medical-Legal": g = ( ); break; case "Patient Education": g = ( ); break; default: g = ( ); } return (
{g}
); }; const VideoPlaceholder = ({ className = "", gradient = "film-grad-1", showPlay = true, tag, duration, onClick }) => (
{tag && (
{tag} {duration && {duration}}
)} {showPlay && (
)}
); /* ================================================================== */ /* HEADER */ /* ================================================================== */ const Header = () => { const [navOpen, setNavOpen] = useState(false); const go = (fn) => (e) => { fn(e); setNavOpen(false); }; return (
Animated Medical
Now booking Start a project
{navOpen && ( )}
); }; /* ================================================================== */ /* HERO */ /* ================================================================== */ /* Tier B: atmospheric still (licensed Unsplash) under graded reel */ const HERO_ATMO_STILL = "https://images.unsplash.com/photo-1576086213369-97a306d36557?auto=format&fit=crop&w=2000&q=75"; const Hero = () => { const [reveal, setReveal] = useState(false); useEffect(() => { if (typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches) { setReveal(true); return undefined; } const id = requestAnimationFrame(() => setReveal(true)); return () => cancelAnimationFrame(id); }, []); const delay = (i) => ({ transitionDelay: `${i * 0.07}s` }); return (
Reel 2026 — Fourteen films · 02:47
United States · hybrid studio — 01 / 09
Medical Animation Studio · Est. 2018

We make invisible biology visible.

3D cellular animation, surgical visualization, and mechanism-of-action films for pharma, medical-device, and medical-legal teams.

Featured reel
Scroll
Selected Work
); }; /* ================================================================== */ /* FEATURED CASE STUDY */ /* ================================================================== */ const Featured = () => (
■ Case Study / 001
Featured
Final cut · 2025 4K · ProRes 422
{[ ["Client", "Under NDA"], ["Category", "Mechanism of Action Film"], ["Indication", "Heart failure · HFrEF"], ["Duration", "02:14"], ["Delivery", "4K · 1080p · Social cuts"], ["Year", "2025"], ].map(([k, v]) => (
{k}
{v}
))}

Visualizing a small-molecule binding at the neprilysin active site.

A two-minute MOA film resolving a molecular interaction at sub-ångström fidelity — built from cryo-EM data, rendered with custom shader work for a medical-affairs launch at a major cardiology congress.

Request the full case
); /* ================================================================== */ /* WORK GRID */ /* ================================================================== */ const WORK_TILES = [ { t: "Nucleotide Release Cascade", c: "MOA Film", d: "01:42", y: "2025", g: "film-grad-3" }, { t: "Posterior Approach · TKA", c: "Surgical Visualization", d: "03:18", y: "2025", g: "film-grad-4" }, { t: "IgG1 Antibody Engagement", c: "Cellular Animation", d: "02:05", y: "2025", g: "film-grad-5" }, { t: "Auto-Injector Actuation", c: "Device Demo", d: "00:58", y: "2024", g: "film-grad-6" }, { t: "Mitochondrial Permeability", c: "Cellular Animation", d: "01:30", y: "2024", g: "film-grad-7" }, { t: "Cervical Laminoplasty", c: "Medical-Legal", d: "04:22", y: "2024", g: "film-grad-8" }, { t: "GLP-1 Receptor Dynamics", c: "MOA Film", d: "02:40", y: "2024", g: "film-grad-9" }, { t: "Intravitreal Injection", c: "Patient Education", d: "01:14", y: "2023", g: "film-grad-2" }, { t: "Endovascular Stent Deploy", c: "Device Demo", d: "01:55", y: "2023", g: "film-grad-1" }, ]; const FILTERS = [ { label: "All", count: WORK_TILES.length }, { label: "MOA Film", count: WORK_TILES.filter(w => w.c === "MOA Film").length }, { label: "Surgical Visualization", count: WORK_TILES.filter(w => w.c === "Surgical Visualization").length }, { label: "Cellular Animation", count: WORK_TILES.filter(w => w.c === "Cellular Animation").length }, { label: "Device Demo", count: WORK_TILES.filter(w => w.c === "Device Demo").length }, ]; const WorkGrid = () => { const [hover, setHover] = useState(false); const [filter, setFilter] = useState("All"); const shown = filter === "All" ? WORK_TILES : WORK_TILES.filter(w => w.c === filter); return (
Index / 002

Selected work, 2023–25.

{FILTERS.map(f => ( ))}
setHover(true)} onMouseLeave={() => setHover(false)} > {shown.map((w, i) => (
{String(i+1).padStart(2,"0")} {w.c}
{w.t}
{w.d}
{w.y}
))}
{shown.length} of {WORK_TILES.length} shown Request full archive
); }; /* ================================================================== */ /* CAPABILITIES */ /* ================================================================== */ const CAPS = [ ["3D Cellular Animation", "Sub-cellular, organelle, and molecular-scale visualization built from structural data — PDB, cryo-EM, and peer-reviewed literature."], ["Mechanism-of-Action Films", "Narrative films resolving how a therapy works — from pharmacokinetics to receptor binding — for launch, MSL, and medical-affairs teams."], ["Surgical Visualization", "Procedural animations and operative overviews for device launches, surgeon training, and scientific publications."], ["Medical-Legal Animation", "Court-admissible reconstructions of injury mechanisms and surgical timelines — produced to evidentiary standards."], ["Device & Instrument Demos", "Exploded views, actuation mechanics, and in-situ placement for implants, injectors, catheters, and capital equipment."], ["Patient Education", "Clear, de-jargoned explanations of conditions and treatments for IFU, hospital networks, and DTC campaigns."], ["Conference Content", "Plenary loops, booth reels, and scientific poster films optimized for AHA, ESC, ASCO, ASH, and peer venues."], ["Expert Witness Work", "Direct collaboration with retained experts — engineered to survive Daubert challenge and courtroom scrutiny."], ]; const Capabilities = () => (
Capabilities / 003

What the studio does.

Eight practice areas, one pipeline. Everything below is produced in-house by board-certified medical illustrators, CG supervisors, and science editors.

    {CAPS.map(([title, desc], i) => (
  • {String(i+1).padStart(2,"0")}
    {title}
    {desc}
    • ))}
); /* ================================================================== */ /* PROCESS */ /* ================================================================== */ const PHASES = [ { n: "Phase 01", t: "Brief & Research", w: "1–2 weeks", b: "Kickoff with medical, regulatory, and creative stakeholders. We read the literature, study the mechanism, and interview your subject-matter experts. Output: a science brief, reference deck, and scoped treatment.", d: ["Literature review", "SME interviews", "Reference pass", "Science brief"], }, { n: "Phase 02", t: "Storyboard & Concept", w: "2 weeks", b: "Scene-by-scene storyboards, tone boards, and an animatic with scratch narration. Two rounds of revision included. Legal, medical, and regulatory checkpoints scheduled here.", d: ["Storyboard", "Animatic", "Style frames", "MLR pre-check"], }, { n: "Phase 03", t: "3D Production", w: "4–8 weeks", b: "Molecular builds, simulation, lighting, look-dev, and render. Weekly WIP reviews over Frame.io. Shot-by-shot approvals keep MLR pace with production.", d: ["Modeling & rig", "FX / simulation", "Lighting & look-dev", "Render · 4K"], }, { n: "Phase 04", t: "Delivery & Revisions", w: "1 week", b: "Color grade, sound design, final mix, and deliverable wrangling — 16:9, 9:16, 1:1, broadcast, and any regulated-market variants required.", d: ["Color · sound", "Deliverables", "MLR final", "Archive"], }, ]; const Process = () => (
Process / 004

From cryo-EM
to final cut.

Eight-to-twelve weeks, four phases, no surprises. Every engagement is priced as a fixed scope with defined revision rounds — no hourly billing, no creeping retainers.

Week 00Week 02Week 04Week 08Week 12
{PHASES.map((p, i) => (
{p.n} {p.w}

{p.t}

{p.b}

    {p.d.map(x => (
  • {x}
    • ))}
))}
); /* ================================================================== */ /* CLIENTS */ /* ================================================================== */ const CLIENT_CATS = [ "Top-5 global pharmaceutical", "Mid-cap biotech", "Publicly-held medical device", "AmLaw 100 litigation firm", "Academic medical center", "Surgical robotics company", "Diagnostics platform", "Specialty pharma", "Plaintiff-side legal group", "Cardiovascular device maker", "Clinical-stage biotech", "Radiology imaging network", ]; const Clients = () => (
Clients / 005

Trusted by teams
at the bench and the bedside.

Over forty engagements · 2018–25
{CLIENT_CATS.map((c, i) => (
= CLIENT_CATS.length - 4 ? "md:border-b-0" : ""} px-4 py-3 `}> {c}
))}
Client engagements are typically confidential — specific references available under mutual NDA.
); /* ================================================================== */ /* STUDIO NOTE */ /* ================================================================== */ const Signature = () => ( ); const StudioNote = () => (
Studio note
/ 006
“ Medicine asks patients, juries, and regulators to trust what they cannot see. Our job is to show it — truthfully, and at a resolution the science can stand behind. An animation is never the story; the molecule is.”
Creative direction
MSMI, CMI · Founder studio
); /* ================================================================== */ /* CONTACT */ /* ================================================================== */ const Field = ({ label, children }) => ( ); const Contact = () => { const [state, setState] = useState("idle"); // idle | submitting | success const [form, setForm] = useState({ name: "", email: "", company: "", type: "MOA Film", timeline: "8–12 weeks (standard)", budget: "$100–250K", brief: "", }); const onChange = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value })); const onSubmit = (e) => { e.preventDefault(); if (!form.name || !form.email) return; setState("submitting"); setTimeout(() => setState("success"), 900); }; const reset = () => { setState("idle"); setForm({ name: "", email: "", company: "", type: "MOA Film", timeline: "8–12 weeks (standard)", budget: "$100–250K", brief: "", }); }; return (
{/* left — form / success */}
Contact / 007

{state === "success" ? "Brief received." : "Start a project."}

{state !== "success" ? (
Replies within 2 business days · NDA on request
) : (

Thank you, {form.name.split(" ")[0] || "there"}. Your brief is in the queue.

A producer will review it and reply within two business days using the contact details you provided. If your timeline is tighter than that, note it in your brief and we will prioritize accordingly.

Project type
{form.type}
Timeline
{form.timeline}
Budget
{form.budget}
Reply to
{form.email}
)}
{/* right — studio info */}
); }; /* ================================================================== */ /* FOOTER */ /* ================================================================== */ const Footer = () => (

Animated
Medical.

A medical animation studio producing cinematic 3D work for pharma, medical-device, and medical-legal teams since 2018.
Practice
  • HIPAA · BAA-ready
  • MLR-aware workflow
  • Daubert-tested
  • NDA on request
  • W-9 on file
© 2018–2026 Animated Medical LLC · Privacy · Terms · Imprint
United States Rendered in sRGB
); /* ================================================================== */ /* APP */ /* ================================================================== */ const App = () => (
); ReactDOM.createRoot(document.getElementById("root")).render();