Explore an Allergy Antibody in 3D

Build an interactive 3D explainer of IgE allergy evidence with Claude Code.

Introduction

30 Second Summary

Scientific animations can look convincing before you know what came from an experiment. Without clear labels, a useful teaching picture can blur into a claim that the evidence never proved.

In this project, you will use Claude Code to build an interactive webpage about IgE-mediated food allergy. You will connect a simplified treatment animation to two deposited structures from the RCSB Protein Data Bank so each type of evidence stays clear.

What You'll Build

You'll open a polished webpage where an allergy sequence plays beside rotatable protein structures with clear labels for evidence and interpretation.

By the end of this project, you'll have:

A four-stage allergy sequence you can play to see receptor-bound IgE progress from allergen cross-linking to a clearly labeled conceptual intervention.
Two rotatable molecular views that let you distinguish red FcεRI alpha from blue IgE-Fc in 2Y7Q. You can also distinguish green Fab fragments from blue IgE-Fc in 5G64.
An evidence-aware research story that traces generation, scoring, nomination, laboratory testing, and the experiments still needed.
Secret Mission: Capture both deposited structures in focused screenshots and compare them in a short evidence audit.

Are there any prerequisites?

You need a Mac with Claude Code installed through a paid plan. You also need internet access with Google Chrome and Safari available.

No prior coding experience is required.

Before We Start

A compelling allergy explainer must keep its evidence boundaries clear. Before the hands-on work begins, commit to showing IgE-mediated allergy alongside deposited PDB structures while clearly identifying the treatment animation as a simplified concept that cannot prove safety or effectiveness.

Set Up the Claude Code Project

An evidence-aware explainer needs room for an animation plus two molecular viewers. A three-file workspace gives Claude Code clear boundaries while avoiding unrelated package-manager setup.

In this step, you'll confirm Claude Code in Terminal. Then you'll create linked HTML, CSS, and JavaScript files that display the project heading in Chrome.

In this step, get ready to:

Create the allergy-antibody-explorer folder on your Desktop.
Start a verified Claude Code session inside the project folder.
Generate a linked three-file starter page that displays its heading in Chrome.

Create the project folder

Claude Code treats the current Terminal location as its project boundary. Creating a dedicated folder keeps every generated file together.

Click Finder in the Dock to open a Finder window.
Press Shift-Command-D to open the Desktop folder.
Create a new folder by pressing Shift-Command-N.
Type allergy-antibody-explorer and press Return.
Press Cmd+Space to open Spotlight.
Type Terminal and press Return.
Type cd followed by one space.
Drag the allergy-antibody-explorer folder from Finder into Terminal.

Why drag the folder?

Dragging the folder inserts its full location after cd. This avoids mistakes when typing a longer folder path.

Press Return to move Terminal into the project folder.
Confirm the installed Claude Code version by running:

claude --version

What does this command do?

The claude --version command prints the installed version number. A version in the output confirms that Terminal can access Claude Code.

You should see a Claude Code version number in Terminal.

You have cleared the first checkpoint. Claude Code is available from this Terminal window.

Claude Code not responding?

Check that the command uses two hyphens before version.
Confirm that you ran the command in the same Terminal window where you entered the project folder.

Ask for help: Why is Claude Code not printing its installed version in Terminal?

Build the starter files with Claude Code

The interactive session can create files directly inside the current folder. A precise prompt keeps the first page small enough to verify immediately.

Start the interactive Claude Code session by running:

claude

What does this command do?

The claude command starts an interactive session in the current project folder. Claude Code can now work with files inside allergy-antibody-explorer.

You should see the interactive Claude Code session waiting for your first request.

Session not starting?

Confirm that claude --version still prints a version number.
Complete any sign-in request shown by Claude Code before retrying the command.

Ask for help: Why does the version command work while the interactive Claude Code session does not start?

Create the three starter files by sending this prompt to Claude Code:

Create exactly three files named index.html, styles.css, and script.js.
Use this exact content for index.html:
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="An interactive, evidence-aware explainer of IgE, FcεRI, and anti-IgE antibody research.">
  <title>Explore an Allergy Antibody in 3D</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header class="hero">
    <h1>Explore an Allergy Antibody in 3D</h1>
  </header>

  <script src="script.js"></script>
</body>
</html>
Leave styles.css and script.js as empty starter files.
Do not add dependencies or extra page sections.
Report which files you created.

What does this prompt create?

The index.html file supplies a valid browser document with the project heading.
The stylesheet link connects styles.css to the page.
The script tag connects script.js to the page.
The empty starter files reserve separate spaces for presentation and interaction code.

Claude Code should report that it created index.html, styles.css, and script.js.

Check the three generated files by sending this follow-up prompt:

Check that index.html, styles.css, and script.js exist in the current folder.
Confirm that index.html is valid HTML.
Confirm that it links styles.css and script.js.
Confirm that its title and visible heading are Explore an Allergy Antibody in 3D.
Do not add new sections or content.

What does this check prove?

This review checks file existence plus the links between them. It also confirms that the browser receives the required title and heading.

Claude Code should confirm that all three files exist. It should also confirm that index.html meets every requested check.

Missing a starter file?

Ask Claude Code to create only the missing file inside the current folder.
Check each filename for lowercase letters and the correct extension.
Repeat the file-check prompt after Claude Code completes the fix.

Ask for help: Why is one of my Claude Code starter files missing or linked incorrectly?

✔️ Awesome, I've got everything!

Great. Keep the Claude Code session open while you check the page in Chrome.

ⓧ I'd like to double check the full code

Compare your starter index.html against this complete reference.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="An interactive, evidence-aware explainer of IgE, FcεRI, and anti-IgE antibody research.">
  <title>Explore an Allergy Antibody in 3D</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header class="hero">
    <h1>Explore an Allergy Antibody in 3D</h1>
  </header>

  <script src="script.js"></script>
</body>
</html>

How are the files connected?

The link in the document head loads styles.css. The script tag near the end of the document loads script.js.

The styles.css file is empty at this stage.

The script.js file is empty at this stage.

Verify the starter page in Chrome

Before you open the page, which project heading do you expect Chrome to display?

Switch back to the Finder window from earlier.
Double-click the allergy-antibody-explorer folder.
Control-click index.html.
Select Open With from the shortcut menu.
Select Google Chrome.

You should see Explore an Allergy Antibody in 3D as the visible page heading. The browser tab should show the same title.

Your first browser check works. The three-file project now has a visible page that Claude Code can expand safely.

Your Claude Code project is ready in allergy-antibody-explorer. Next, you'll turn this starter heading into a labeled allergy mechanism that plays through four visual states.

Animate the Allergy Mechanism

Your starter page already opens in Chrome with the project heading. The next challenge is showing how an allergic reaction develops over time.

In this step, you will use Claude Code to build a flat four-state animation. It will connect receptor-bound IgE to allergen cross-linking, mast-cell signaling, mediator release, plus a clearly conceptual intervention.

In this step, get ready to:

Build a labeled mechanism scene with IgE, FcεRI, a food allergen, inflammatory mediators, plus a conceptual designed antibody.
Animate four visual states with reduced-motion support.
Verify that the sequence communicates the biology without presenting the conceptual intervention as clinical evidence.

Build the labeled mechanism scene

The HTML gives each participant a visible place in the sequence. Clear labels keep the simplified diagram understandable before any movement begins.

In the Claude Code session from earlier, ask Claude to add the complete mechanism panel inside index.html. Specify a mast-cell membrane, two FcεRI receptors, two IgE labels, a food allergen, inflammatory mediators, plus a conceptual designed antibody.
Ask Claude to include four progress dots, a Play allergy sequence button, a Reset button, plus a short mechanism source note.
Refresh the local index.html page in Chrome.

You should see the new mechanism panel with every participant plainly labeled. The controls should sit below the scene.

Good progress. Your explainer now has a visible map of the cells plus molecules involved in the sequence.

Missing part of the mechanism scene?

Check that Claude placed the mechanism panel inside the page body in index.html.
Confirm that the existing link to styles.css remains in the document head.
Confirm that the existing script.js script element remains near the end of the document body.

Ask for help: My mechanism panel is missing elements after Claude updated index.html. Help me compare the required labels with my HTML.

Animate the four states

The CSS controls where each labeled object appears. The JavaScript changes the scene state every 1.5 seconds so the reaction unfolds in order.

What should each state communicate?

The starting state shows FcεRI receptors on the mast-cell surface.
The sensitization state shows IgE attached to the high-affinity receptor.
The reaction state shows a food allergen cross-linking adjacent receptor-bound IgE. This state also shows histamine plus other inflammatory mediators.
The final state shows a conceptual designed antibody binding IgE. Its caption states that the idea is not proof of a safe or effective treatment.

Ask Claude to update styles.css with the complete mechanism layout from the project specification. Require visual selectors for data-step="1", data-step="2", plus data-step="3".
Ask Claude to update script.js with the four captions, timed state changes, Play behavior, Reset behavior, progress-dot updates, plus reduced-motion handling.

Before you test it, predict whether the allergen or IgE will become visible first.

Refresh index.html in Chrome.
Click Play allergy sequence.

You should see four labeled states appear in order. The last state moves one IgE away from its receptor while the conceptual designed antibody becomes visible.

What does the sequence establish?

Food-specific IgE can sit on mast cells. A later allergen exposure can aggregate surface-bound IgE before triggering intracellular signals plus mast-cell degranulation.

The released mediators include histamine. The final intervention remains a simplified research concept.

The sequence now makes the order of events easy to follow. Its flat shapes cannot reveal the physical IgE-receptor interface.

Does the sequence stay on one state?

Check that index.html uses the IDs allergy-scene, step-caption, play-sequence, plus reset-sequence.
Check that script.js is loaded after the mechanism HTML.
Check that the four progress elements use the dot class.

Ask for help: My allergy sequence does not advance through the four states. Help me compare the HTML IDs with the JavaScript selectors.

Audit the scientific wording

A science animation needs boundaries as much as movement. The wording must separate a simplified mechanism from evidence about a real treatment.

Ask Claude to review the final three files for missing labels, broken IDs, unclear captions, plus wording that could present the conceptual intervention as proven treatment evidence.
Ask Claude to confirm that prefers-reduced-motion support remains in styles.css.

✔️ Awesome, I've got everything!

Your mechanism files are ready. Double check that Claude saved all three before the final test.

ⓧ I'd like to double check the full code

Compare these cumulative files with your project. They contain the starter page plus the complete mechanism animation for this step.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="An interactive, evidence-aware explainer of IgE, FcεRI, and anti-IgE antibody research.">
  <title>Explore an Allergy Antibody in 3D</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header class="hero">
    <p class="eyebrow">Built with Claude Code</p>
    <h1>Explore an Allergy Antibody in 3D</h1>
    <p class="hero-copy">Follow an IgE-mediated allergy from a simplified cell animation to real deposited protein structures and early-stage antibody design evidence.</p>
    <div class="chips" aria-label="Project highlights">
      <span>Interactive mechanism</span>
      <span>RCSB PDB evidence</span>
      <span>Conceptual treatment view</span>
    </div>
  </header>

  <main>
    <section class="panel" id="mechanism">
      <div class="section-heading">
        <p class="eyebrow">1. Simplified mechanism</p>
        <h2>How receptor-bound IgE can trigger an allergic reaction</h2>
      </div>

      <div class="mechanism-stage" id="allergy-scene" data-step="0">
        <div class="diagram" role="img" aria-label="Simplified animation of IgE binding, allergen cross-linking, mediator release, and conceptual IgE displacement">
          <div class="mast-cell"><span>Mast cell membrane</span></div>
          <div class="receptor receptor-one">FcεRI</div>
          <div class="receptor receptor-two">FcεRI</div>
          <div class="ige ige-one">IgE</div>
          <div class="ige ige-two">IgE</div>
          <div class="allergen">Food allergen<br><small>cross-links IgE</small></div>
          <div class="mediators">Histamine + other mediators</div>
          <div class="designed-antibody">Conceptual designed antibody<br><small>binds IgE and helps detach it</small></div>
        </div>
        <p class="step-caption" id="step-caption" aria-live="polite"></p>
        <div class="progress" aria-label="Animation progress">
          <span class="dot active"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span>
        </div>
      </div>

      <div class="controls">
        <button id="play-sequence" type="button">Play allergy sequence</button>
        <button id="reset-sequence" class="secondary" type="button">Reset</button>
      </div>
      <p class="source-note">Mechanism summary: allergen-specific IgE can aggregate on mast cells, trigger intracellular signaling, and lead to degranulation and mediator release.</p>
    </section>
  </main>

  <footer>
    <p>Educational project. Not medical advice.</p>
  </footer>

  <script src="script.js"></script>
</body>
</html>

How is the mechanism organized?

The mechanism panel groups the labeled scene, live caption, progress dots, controls, plus source note. Its IDs give the script stable references for each interactive part.

:root {
  color-scheme: light;
  --ink: #132238;
  --muted: #53657a;
  --paper: #ffffff;
  --wash: #eef6fb;
  --line: #d6e2ec;
  --navy: #123a63;
  --cyan: #dff6ff;
  --blue: #2563eb;
  --red: #dc2626;
  --green: #16803a;
  --gold: #f4b942;
  --shadow: 0 18px 45px rgba(18, 58, 99, 0.10);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: linear-gradient(180deg, #e8f5fb 0, #f8fbfd 28rem, #f8fbfd 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}

button, textarea { font: inherit; }
a { color: #075ea8; }
a:hover { color: #003f75; }

.hero, main, footer {
  width: min(1120px, calc(100% - 2rem));
  margin-inline: auto;
}

.hero { padding: 5rem 0 3rem; }
.eyebrow {
  margin: 0 0 .45rem;
  color: #096b78;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

h1, h2, h3 { line-height: 1.15; }
h1 { max-width: 780px; margin: 0; font-size: clamp(2.7rem, 7vw, 5.6rem); letter-spacing: -.055em; }
h2 { margin: 0; font-size: clamp(1.75rem, 4vw, 2.8rem); letter-spacing: -.035em; }
h3 { margin: 0; }
.hero-copy { max-width: 720px; color: var(--muted); font-size: 1.15rem; }
.chips { display: flex; flex-wrap: wrap; gap: .65rem; }
.chips span { padding: .5rem .8rem; border: 1px solid #b9d9e6; border-radius: 999px; background: rgba(255,255,255,.74); font-weight: 700; }

main { display: grid; gap: 1.4rem; }
.panel { padding: clamp(1.15rem, 3vw, 2.4rem); border: 1px solid var(--line); border-radius: 24px; background: var(--paper); box-shadow: var(--shadow); }
.section-heading { max-width: 780px; margin-bottom: 1.4rem; }
.section-heading > p:last-child { color: var(--muted); }

.mechanism-stage { overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(#eff9ff, #fff7ed); }
.diagram { position: relative; min-height: 360px; overflow: hidden; }
.diagram > div { position: absolute; transition: opacity .55s ease, transform .75s ease; }
.mast-cell { left: 5%; bottom: -45px; width: 90%; height: 145px; border: 4px solid #c2416c; border-radius: 50% 50% 0 0; background: #f9a8c5; }
.mast-cell span { position: absolute; left: 50%; top: 52px; transform: translateX(-50%); font-weight: 800; }
.receptor { bottom: 88px; width: 76px; padding: .55rem .25rem; border-radius: 16px 16px 4px 4px; color: white; background: var(--red); text-align: center; font-weight: 800; }
.receptor-one { left: 28%; }
.receptor-two { right: 28%; }
.ige { bottom: 155px; width: 66px; padding: .55rem; border: 3px solid #1d4ed8; border-radius: 999px 999px 12px 12px; color: #163c94; background: var(--cyan); text-align: center; font-weight: 900; opacity: 0; transform: translateY(-45px); }
.ige-one { left: calc(28% + 5px); }
.ige-two { right: calc(28% + 5px); }
.allergen { left: 50%; top: 36px; width: 150px; padding: .7rem; border: 3px dashed #9a5a00; border-radius: 999px; background: #ffedb2; text-align: center; font-weight: 900; opacity: 0; transform: translate(-50%, -22px); }
.mediators { right: 8%; bottom: 22px; width: 180px; padding: .6rem; border-radius: 14px; color: #6f2500; background: #fed7aa; text-align: center; font-weight: 800; opacity: 0; transform: scale(.65); }
.designed-antibody { left: 7%; top: 52px; width: 210px; padding: .75rem; border: 3px solid var(--green); border-radius: 16px; color: #075b28; background: #dcfce7; text-align: center; font-weight: 900; opacity: 0; transform: translateX(-35px); }

[data-step="1"] .ige,
[data-step="2"] .ige,
[data-step="3"] .ige { opacity: 1; transform: translateY(0); }
[data-step="2"] .allergen { opacity: 1; transform: translate(-50%, 0); }
[data-step="2"] .mediators { opacity: 1; transform: scale(1); }
[data-step="3"] .designed-antibody { opacity: 1; transform: translateX(0); }
[data-step="3"] .ige-one { opacity: 1; transform: translate(-50px, -55px) rotate(-10deg); }
[data-step="3"] .receptor-one { opacity: .45; }

.step-caption { min-height: 4rem; margin: 0; padding: 1rem 1.25rem; border-top: 1px solid var(--line); background: white; font-weight: 750; }
.progress { display: flex; gap: .45rem; padding: 0 1.25rem 1rem; background: white; }
.dot { width: 34px; height: 6px; border-radius: 999px; background: #d2dee8; }
.dot.active { background: #16728a; }
.controls { display: flex; gap: .7rem; margin-top: 1rem; }
button { padding: .75rem 1rem; border: 0; border-radius: 12px; color: white; background: var(--navy); cursor: pointer; font-weight: 800; }
button.secondary { color: var(--navy); background: #e5edf4; }
button:focus-visible, a:focus-visible, textarea:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.source-note, .touch-label { color: var(--muted); }

footer { padding: 2rem 0 3rem; color: var(--muted); text-align: center; }

@media (max-width: 620px) {
  .hero { padding-top: 3rem; }
  .diagram { min-height: 420px; }
  .receptor-one { left: 16%; }
  .receptor-two { right: 16%; }
  .ige-one { left: calc(16% + 5px); }
  .ige-two { right: calc(16% + 5px); }
  .designed-antibody { left: 4%; top: 92px; width: 175px; }
  .mediators { right: 3%; width: 145px; }
  .card-heading { display: grid; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

How do the visual states work?

The scene begins with hidden IgE, allergen, mediator, plus intervention elements. Each data-step selector reveals or moves the elements needed for that stage.

The reduced-motion rule shortens transitions for learners who enable that preference in their operating system.

const scene = document.querySelector("#allergy-scene");
const caption = document.querySelector("#step-caption");
const playButton = document.querySelector("#play-sequence");
const resetButton = document.querySelector("#reset-sequence");
const dots = [...document.querySelectorAll(".dot")];

const captions = [
  "Start: FcεRI receptors sit on the mast-cell surface.",
  "Sensitization: IgE attaches to the high-affinity FcεRI receptor.",
  "Reaction: a food allergen cross-links adjacent receptor-bound IgE, triggering signaling and release of histamine and other inflammatory mediators.",
  "Conceptual intervention: a designed antibody binds IgE and helps dislodge it from FcεRI. This is a simplified idea, not proof of a safe or effective treatment."
];

let timer;
let currentStep = 0;

function showStep(step) {
  currentStep = step;
  scene.dataset.step = String(step);
  caption.textContent = captions[step];
  dots.forEach((dot, index) => dot.classList.toggle("active", index === step));
}

function playSequence() {
  clearInterval(timer);
  showStep(0);

  const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  if (reducedMotion) {
    showStep(3);
    return;
  }

  timer = window.setInterval(() => {
    if (currentStep >= captions.length - 1) {
      clearInterval(timer);
      return;
    }
    showStep(currentStep + 1);
  }, 1500);
}

function resetSequence() {
  clearInterval(timer);
  showStep(0);
}

playButton.addEventListener("click", playSequence);
resetButton.addEventListener("click", resetSequence);
showStep(0);

How does the timing work?

The script keeps the visible state, caption, plus active progress dot synchronized. Play advances through the caption array while Reset returns the scene to its starting state.

When reduced motion is enabled, Play moves directly to the final conceptual state.

Before the final check, predict which visual change will make the conceptual intervention unmistakable.

Refresh index.html in Chrome.
Click Reset.
Click Play allergy sequence.

You should see four states appear in order. The sequence ends with the conceptual designed antibody visible while one IgE moves away from its receptor.

The final caption should explicitly say that the intervention is a simplified idea. It should also say that the animation is not proof of a safe or effective treatment.

Your allergy sequence now explains the progression from receptor-bound IgE to a conceptual intervention. Next, you will replace the flat view's evidence gap with an inspectable deposited molecular structure.

Reveal the IgE-Receptor Contact in 3D

Your four-state animation now shows how allergen cross-linking can lead to mediator release. It gives the allergic reaction a clear sequence.

However, flat shapes cannot show where IgE physically touches FcεRI. In this step, you will test that evidence gap before replacing the missing detail with an inspectable molecular view.

In this step, get ready to:

Test the evidence limit of the flat allergy animation.
Resolve the evidence gap with a deposited molecular structure.
Verify the receptor and IgE chain colors through interaction with the finished viewer.

Test the animation's evidence limit

Before you replay the sequence, do you think the moving labels can reveal the physical surface where IgE contacts its receptor?

Switch back to the local page in Chrome.
Refresh the page.
Click Play allergy sequence.

You will see the four labeled states appear in order. The flat shapes explain the sequence without exposing the physical IgE-receptor interface.

That shortfall is intentional. You now have a clear reason to bring deposited molecular evidence into the page.

Add the deposited 2Y7Q structure

A PDB structure records experimentally determined molecular coordinates. 3Dmol.js can load those coordinates into a rotatable browser viewer.

The RCSB Protein Data Bank entry 2Y7Q contains IgE-Fc bound to the FcεRI alpha receptor. Its author chain identifiers let your page color the binding partners separately.

What should Claude add?

The deposited molecular evidence section contains the title Rotate the proteins and inspect the binding partners.
The viewer uses the classes viewer_3Dmoljs molecule-viewer with data-pdb="2Y7Q".
The base style uses data-style="cartoon:color=grey".
The numbered selection attributes color chain A red.
The numbered selection attributes color chains B and D blue.
The viewer includes data-ui="true".
The card includes primary-button rotation instructions.
The card includes scroll-zoom instructions.
The card links to the RCSB record for 2Y7Q.
The legend identifies red FcεRI alpha and blue IgE-Fc as the touching partners.
The chain-level copy avoids claims about individual interface residues.
The pinned 3Dmol.js core and UI scripts use version 2.5.5 before script.js.

Switch back to the Claude Code session from earlier.
Ask Claude Code to implement every HTML requirement above in index.html.
Review the proposed changes for the 2Y7Q chain selections.

The viewer needs a defined height so its canvas has room to render. The surrounding card styles keep the structure instructions and legend readable.

What styles does the viewer need?

Use a two-column .structure-grid on wider screens.
Give .molecule-viewer a height of 420px.
Style .structure-card as a bordered card with hidden overflow.
Keep the color labels readable with .legend and .swatch.
Switch the structure grid to one column on screens narrower than 900px.

Ask Claude Code to implement every structure-view style above in styles.css.
Review the proposed changes for the responsive single-column layout.
Refresh the local page in Chrome to load the molecular card.

The first molecular load can take a few seconds while the browser downloads the scripts and structure. You should then see the 2Y7Q card with its interactive viewer and chain-color legend.

Viewer area staying blank?

Confirm your Mac has an active internet connection because the scripts and molecular coordinates load from public web resources.
Check that both pinned 3Dmol.js script tags appear before the existing script.js tag.
Check that the viewer has both viewer_3Dmoljs and molecule-viewer in its class attribute.
Check that .molecule-viewer has a defined height in styles.css.

Ask for help: Why is my 2Y7Q 3Dmol.js viewer blank after I refresh the local page?

Your three files should now match the cumulative project state below.

✔️ Awesome, I've got everything!

Your molecular viewer is ready. Double check that Claude Code saved index.html and styles.css before moving on.

ⓧ I'd like to double check the full code

Compare your three files with these cumulative references. The animation script remains unchanged in this step.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="An interactive, evidence-aware explainer of IgE, FcεRI, and anti-IgE antibody research.">
  <title>Explore an Allergy Antibody in 3D</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header class="hero">
    <p class="eyebrow">Built with Claude Code</p>
    <h1>Explore an Allergy Antibody in 3D</h1>
    <p class="hero-copy">Follow an IgE-mediated allergy from a simplified cell animation to real deposited protein structures and early-stage antibody design evidence.</p>
    <div class="chips" aria-label="Project highlights">
      <span>Interactive mechanism</span>
      <span>RCSB PDB evidence</span>
      <span>Conceptual treatment view</span>
    </div>
  </header>

  <main>
    <section class="panel" id="mechanism">
      <div class="section-heading">
        <p class="eyebrow">1. Simplified mechanism</p>
        <h2>How receptor-bound IgE can trigger an allergic reaction</h2>
      </div>

      <div class="mechanism-stage" id="allergy-scene" data-step="0">
        <div class="diagram" role="img" aria-label="Simplified animation of IgE binding, allergen cross-linking, mediator release, and conceptual IgE displacement">
          <div class="mast-cell"><span>Mast cell membrane</span></div>
          <div class="receptor receptor-one">FcεRI</div>
          <div class="receptor receptor-two">FcεRI</div>
          <div class="ige ige-one">IgE</div>
          <div class="ige ige-two">IgE</div>
          <div class="allergen">Food allergen<br><small>cross-links IgE</small></div>
          <div class="mediators">Histamine + other mediators</div>
          <div class="designed-antibody">Conceptual designed antibody<br><small>binds IgE and helps detach it</small></div>
        </div>
        <p class="step-caption" id="step-caption" aria-live="polite"></p>
        <div class="progress" aria-label="Animation progress">
          <span class="dot active"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span>
        </div>
      </div>

      <div class="controls">
        <button id="play-sequence" type="button">Play allergy sequence</button>
        <button id="reset-sequence" class="secondary" type="button">Reset</button>
      </div>
      <p class="source-note">Mechanism summary: allergen-specific IgE can aggregate on mast cells, trigger intracellular signaling, and lead to degranulation and mediator release.</p>
    </section>

    <section class="panel" id="structures">
      <div class="section-heading">
        <p class="eyebrow">2. Deposited molecular evidence</p>
        <h2>Rotate the proteins and inspect the binding partners</h2>
        <p>Primary-button drag rotates. Scroll zooms. These are experimental structures, not the conceptual Divergence candidate.</p>
      </div>

      <div class="structure-grid">
        <article class="structure-card">
          <div class="card-heading">
            <div>
              <p class="pdb-tag">PDB 2Y7Q</p>
              <h3>IgE-Fc bound to FcεRI alpha</h3>
            </div>
            <a href="https://www.rcsb.org/structure/2Y7Q" target="_blank" rel="noreferrer">RCSB record</a>
          </div>
          <div
            class="viewer_3Dmoljs molecule-viewer"
            data-pdb="2Y7Q"
            data-backgroundcolor="0xffffff"
            data-style="cartoon:color=grey"
            data-select1="chain:A"
            data-style1="cartoon:color=red"
            data-select2="chain:B"
            data-style2="cartoon:color=blue"
            data-select3="chain:D"
            data-style3="cartoon:color=blue"
            data-ui="true"
            aria-label="Interactive 2Y7Q molecular structure">
          </div>
          <div class="legend">
            <span><i class="swatch blue"></i>IgE-Fc: chains B and D</span>
            <span><i class="swatch red"></i>FcεRI alpha: chain A</span>
          </div>
          <p class="touch-label">Touching partners: blue IgE-Fc binds the red extracellular receptor domain.</p>
        </article>
      </div>
    </section>
  </main>

  <footer>
    <p>Educational project. Not medical advice.</p>
  </footer>

  <script src="https://cdn.jsdelivr.net/npm/3dmol@2.5.5/build/3Dmol-min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/3dmol@2.5.5/build/3Dmol.ui-min.js"></script>
  <script src="script.js"></script>
</body>
</html>

:root {
  color-scheme: light;
  --ink: #132238;
  --muted: #53657a;
  --paper: #ffffff;
  --wash: #eef6fb;
  --line: #d6e2ec;
  --navy: #123a63;
  --cyan: #dff6ff;
  --blue: #2563eb;
  --red: #dc2626;
  --green: #16803a;
  --gold: #f4b942;
  --shadow: 0 18px 45px rgba(18, 58, 99, 0.10);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: linear-gradient(180deg, #e8f5fb 0, #f8fbfd 28rem, #f8fbfd 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}

button, textarea { font: inherit; }
a { color: #075ea8; }
a:hover { color: #003f75; }

.hero, main, footer {
  width: min(1120px, calc(100% - 2rem));
  margin-inline: auto;
}

.hero { padding: 5rem 0 3rem; }
.eyebrow {
  margin: 0 0 .45rem;
  color: #096b78;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

h1, h2, h3 { line-height: 1.15; }
h1 { max-width: 780px; margin: 0; font-size: clamp(2.7rem, 7vw, 5.6rem); letter-spacing: -.055em; }
h2 { margin: 0; font-size: clamp(1.75rem, 4vw, 2.8rem); letter-spacing: -.035em; }
h3 { margin: 0; }
.hero-copy { max-width: 720px; color: var(--muted); font-size: 1.15rem; }
.chips { display: flex; flex-wrap: wrap; gap: .65rem; }
.chips span { padding: .5rem .8rem; border: 1px solid #b9d9e6; border-radius: 999px; background: rgba(255,255,255,.74); font-weight: 700; }

main { display: grid; gap: 1.4rem; }
.panel { padding: clamp(1.15rem, 3vw, 2.4rem); border: 1px solid var(--line); border-radius: 24px; background: var(--paper); box-shadow: var(--shadow); }
.section-heading { max-width: 780px; margin-bottom: 1.4rem; }
.section-heading > p:last-child { color: var(--muted); }

.mechanism-stage { overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(#eff9ff, #fff7ed); }
.diagram { position: relative; min-height: 360px; overflow: hidden; }
.diagram > div { position: absolute; transition: opacity .55s ease, transform .75s ease; }
.mast-cell { left: 5%; bottom: -45px; width: 90%; height: 145px; border: 4px solid #c2416c; border-radius: 50% 50% 0 0; background: #f9a8c5; }
.mast-cell span { position: absolute; left: 50%; top: 52px; transform: translateX(-50%); font-weight: 800; }
.receptor { bottom: 88px; width: 76px; padding: .55rem .25rem; border-radius: 16px 16px 4px 4px; color: white; background: var(--red); text-align: center; font-weight: 800; }
.receptor-one { left: 28%; }
.receptor-two { right: 28%; }
.ige { bottom: 155px; width: 66px; padding: .55rem; border: 3px solid #1d4ed8; border-radius: 999px 999px 12px 12px; color: #163c94; background: var(--cyan); text-align: center; font-weight: 900; opacity: 0; transform: translateY(-45px); }
.ige-one { left: calc(28% + 5px); }
.ige-two { right: calc(28% + 5px); }
.allergen { left: 50%; top: 36px; width: 150px; padding: .7rem; border: 3px dashed #9a5a00; border-radius: 999px; background: #ffedb2; text-align: center; font-weight: 900; opacity: 0; transform: translate(-50%, -22px); }
.mediators { right: 8%; bottom: 22px; width: 180px; padding: .6rem; border-radius: 14px; color: #6f2500; background: #fed7aa; text-align: center; font-weight: 800; opacity: 0; transform: scale(.65); }
.designed-antibody { left: 7%; top: 52px; width: 210px; padding: .75rem; border: 3px solid var(--green); border-radius: 16px; color: #075b28; background: #dcfce7; text-align: center; font-weight: 900; opacity: 0; transform: translateX(-35px); }

[data-step="1"] .ige,
[data-step="2"] .ige,
[data-step="3"] .ige { opacity: 1; transform: translateY(0); }
[data-step="2"] .allergen { opacity: 1; transform: translate(-50%, 0); }
[data-step="2"] .mediators { opacity: 1; transform: scale(1); }
[data-step="3"] .designed-antibody { opacity: 1; transform: translateX(0); }
[data-step="3"] .ige-one { opacity: 1; transform: translate(-50px, -55px) rotate(-10deg); }
[data-step="3"] .receptor-one { opacity: .45; }

.step-caption { min-height: 4rem; margin: 0; padding: 1rem 1.25rem; border-top: 1px solid var(--line); background: white; font-weight: 750; }
.progress { display: flex; gap: .45rem; padding: 0 1.25rem 1rem; background: white; }
.dot { width: 34px; height: 6px; border-radius: 999px; background: #d2dee8; }
.dot.active { background: #16728a; }
.controls { display: flex; gap: .7rem; margin-top: 1rem; }
button { padding: .75rem 1rem; border: 0; border-radius: 12px; color: white; background: var(--navy); cursor: pointer; font-weight: 800; }
button.secondary { color: var(--navy); background: #e5edf4; }
button:focus-visible, a:focus-visible, textarea:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.source-note, .touch-label { color: var(--muted); }

.structure-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.structure-card { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #fbfdff; }
.card-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: start; padding: 1rem; }
.pdb-tag { margin: 0 0 .3rem; color: #096b78; font-weight: 900; }
.molecule-viewer { position: relative; width: 100%; height: 420px; border-block: 1px solid var(--line); }
.legend { display: flex; flex-wrap: wrap; gap: .65rem 1rem; padding: 1rem 1rem .4rem; font-size: .9rem; font-weight: 750; }
.legend span { display: inline-flex; gap: .4rem; align-items: center; }
.swatch { width: 12px; height: 12px; border-radius: 50%; }
.swatch.blue { background: blue; }
.swatch.red { background: red; }
.swatch.green { background: green; }
.touch-label { margin: .4rem 1rem 1rem; }

footer { padding: 2rem 0 3rem; color: var(--muted); text-align: center; }

@media (max-width: 900px) {
  .structure-grid, .loop-grid { grid-template-columns: 1fr; }
  .molecule-viewer { height: 360px; }
}

@media (max-width: 620px) {
  .hero { padding-top: 3rem; }
  .diagram { min-height: 420px; }
  .receptor-one { left: 16%; }
  .receptor-two { right: 16%; }
  .ige-one { left: calc(16% + 5px); }
  .ige-two { right: calc(16% + 5px); }
  .designed-antibody { left: 4%; top: 92px; width: 175px; }
  .mediators { right: 3%; width: 145px; }
  .card-heading { display: grid; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

const scene = document.querySelector("#allergy-scene");
const caption = document.querySelector("#step-caption");
const playButton = document.querySelector("#play-sequence");
const resetButton = document.querySelector("#reset-sequence");
const dots = [...document.querySelectorAll(".dot")];

const captions = [
  "Start: FcεRI receptors sit on the mast-cell surface.",
  "Sensitization: IgE attaches to the high-affinity FcεRI receptor.",
  "Reaction: a food allergen cross-links adjacent receptor-bound IgE, triggering signaling and release of histamine and other inflammatory mediators.",
  "Conceptual intervention: a designed antibody binds IgE and helps dislodge it from FcεRI. This is a simplified idea, not proof of a safe or effective treatment."
];

let timer;
let currentStep = 0;

function showStep(step) {
  currentStep = step;
  scene.dataset.step = String(step);
  caption.textContent = captions[step];
  dots.forEach((dot, index) => dot.classList.toggle("active", index === step));
}

function playSequence() {
  clearInterval(timer);
  showStep(0);

  const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  if (reducedMotion) {
    showStep(3);
    return;
  }

  timer = window.setInterval(() => {
    if (currentStep >= captions.length - 1) {
      clearInterval(timer);
      return;
    }
    showStep(currentStep + 1);
  }, 1500);
}

function resetSequence() {
  clearInterval(timer);
  showStep(0);
}

playButton.addEventListener("click", playSequence);
resetButton.addEventListener("click", resetSequence);
showStep(0);

Rotate and verify the binding partners

Before you interact with the viewer, which colored partner do you expect to move with the molecular model when you drag it?

Switch back to the local page in Chrome.
Refresh the page.
Drag across the 2Y7Q viewer with the primary mouse button.
Use the scroll gesture over the viewer.
Compare the visible colors with the legend below the viewer.

You will see chain A in red. You will see chains B and D in blue.

The legend identifies the red structure as FcεRI alpha. It identifies the blue structure as IgE-Fc.

You have crossed the key evidence gap. Your explainer can now show the deposited IgE-receptor binding partners as a rotatable molecular structure.

Your first deposited structure now reveals the IgE-receptor contact. Next, you will add an anti-IgE Fab complex and trace how computational designs move toward laboratory evidence.

Add the Antibody Structure and Design Story

Your first 3Dmol.js viewer now turns a deposited RCSB Protein Data Bank structure into inspectable evidence. However, one natural receptor complex cannot show where an anti-IgE antibody binds.

A second deposited structure reveals where omalizumab-derived Fab fragments contact IgE-Fc. Claude Code will also add the research path that moves computational designs toward laboratory evidence.

In this step, get ready to:

Add the deposited 5G64 structure with separate colors for IgE-Fc and Fab fragments.
Present the computational generation process and laboratory results as a five-stage research loop.
Add the remaining tests, source links, submission field, and scientific disclaimer.

Add the anti-IgE structure

PDB 5G64 contains human IgE-Fc bound to omalizumab-derived Fab fragments. Its deposited coordinates provide a second real binding arrangement for your explainer.

What Should the Viewer Show?

IgE-Fc uses chains A and B. Both chains appear blue in the finished viewer.

The Fab fragments use chains H, I, L, and M. These chains appear green so the binding partners remain easy to distinguish.

Switch back to the Claude Code session in your allergy-antibody-explorer folder.
Ask Claude Code to append the final 5G64 structure card inside the existing .structure-grid. Specify a gray cartoon base style. Specify blue chains A and B. Specify green chains H, I, L, and M.
Ask Claude Code to include the RCSB record link, the two-color legend, the touching-partners label, and the final green swatch style from the finished design.
Refresh index.html in Chrome.
Rotate the 5G64 structure with the primary mouse button.
Zoom the structure with the scroll gesture.

You should see blue IgE-Fc in contact with green Fab fragments. Your page now contains two rotatable examples of deposited molecular evidence.

What Does 5G64 Establish?

The deposited structure directly shows omalizumab-derived Fab fragments bound to IgE-Fc. Fab is an antibody fragment.

The structure does not represent a complete omalizumab antibody or the conceptual two-arm Divergence candidate. That boundary keeps the viewer tied to what the deposited evidence supports.

Missing the Second Structure?

Check that the second viewer uses viewer_3Dmoljs molecule-viewer as its class value.
Check that the second viewer uses data-pdb="5G64" as its structure identifier.
Confirm that your Mac remains connected to the internet because the deposited structure loads from an external source.

Ask for help: Why is my 5G64 viewer blank when the 2Y7Q viewer works?

Build the research evidence loop

Computational generation creates a large pool of candidate designs. Scoring reduces that pool before laboratory assays test selected candidates.

How Does the Evidence Progress?

Claude helped generate roughly 35,000 computational antibody designs. Computational critics then scored, ranked, and filtered those designs.

Teams nominated 91 disruptor designs and 57 anchor designs for experimental validation.

Laboratory bio-layer interferometry found 20 disruptor hits and 3 anchor binders. Three tested disruptor variants removed more IgE than omalizumab at every tested concentration in the reported assay.

Ask Claude Code to append the first four research-loop cards below the structures section. Use the stage names Define, Generate, Score and nominate, and Lab test.
Ask Claude Code to add the final .loop-grid styles for the numbered research cards.
Refresh index.html in Chrome.

You should see four numbered cards that move from defining the molecule through computational selection to laboratory testing. The page now separates generated candidates from measured experimental results.

Add the caveats and final sources

Early-stage results need visible limits. The final card names the work that remains while the disclaimer protects the distinction between the conceptual animation and deposited structures.

What Still Needs Testing?

Researchers still need to combine both arms. They must validate activity against free IgE and receptor-bound IgE.

Further work includes mast-cell responses, basophil responses, allergen challenge, animal studies, and checks for unintended receptor cross-linking. These tests address questions that the existing structures cannot answer.

Ask Claude Code to add the fifth research-loop card named Next tests with the remaining work from the finished design.
Ask Claude Code to add the final disclaimer, source links, submission textarea, footer, and responsive styles from the finished design.

Before you refresh, which sections do you expect to represent deposited evidence? Keep your answer in mind.

Refresh index.html in Chrome.
Rotate the 5G64 viewer with the primary mouse button.
Confirm that IgE-Fc chains A and B appear blue.
Confirm that Fab chains H, I, L, and M appear green.
Confirm that the page shows all five research stages.
Confirm that the source links appear above the submission paragraph box.
Confirm that the scientific and medical disclaimer remains visible below the research cards.

You should see the complete path from generated designs to experimental hits. The disclaimer identifies the cell animation as a simplified conceptual illustration instead of a deposited candidate or clinical result.

That is an important result. Your explainer now pairs promising findings with the limits needed for responsible science communication.

Seeing an Incomplete Research Story?

Check that #design-loop contains five research cards inside .loop-grid.
Check that the disclaimer appears after .loop-grid inside the design-loop panel.
Check that #sources closes before the page footer.

Ask for help: Can you check my final research and sources sections?

✔️ Awesome, I've got everything!

Your second structure, research loop, sources, submission field, and disclaimer are in place. Double check that all three project files are saved.

ⓧ I'd like to double check the full code

Compare your three project files with these cumulative versions.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="An interactive, evidence-aware explainer of IgE, FcεRI, and anti-IgE antibody research.">
  <title>Explore an Allergy Antibody in 3D</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header class="hero">
    <p class="eyebrow">Built with Claude Code</p>
    <h1>Explore an Allergy Antibody in 3D</h1>
    <p class="hero-copy">Follow an IgE-mediated allergy from a simplified cell animation to real deposited protein structures and early-stage antibody design evidence.</p>
    <div class="chips" aria-label="Project highlights">
      <span>Interactive mechanism</span>
      <span>RCSB PDB evidence</span>
      <span>Conceptual treatment view</span>
    </div>
  </header>

  <main>
    <section class="panel" id="mechanism">
      <div class="section-heading">
        <p class="eyebrow">1. Simplified mechanism</p>
        <h2>How receptor-bound IgE can trigger an allergic reaction</h2>
      </div>

      <div class="mechanism-stage" id="allergy-scene" data-step="0">
        <div class="diagram" role="img" aria-label="Simplified animation of IgE binding, allergen cross-linking, mediator release, and conceptual IgE displacement">
          <div class="mast-cell"><span>Mast cell membrane</span></div>
          <div class="receptor receptor-one">FcεRI</div>
          <div class="receptor receptor-two">FcεRI</div>
          <div class="ige ige-one">IgE</div>
          <div class="ige ige-two">IgE</div>
          <div class="allergen">Food allergen<br><small>cross-links IgE</small></div>
          <div class="mediators">Histamine + other mediators</div>
          <div class="designed-antibody">Conceptual designed antibody<br><small>binds IgE and helps detach it</small></div>
        </div>
        <p class="step-caption" id="step-caption" aria-live="polite"></p>
        <div class="progress" aria-label="Animation progress">
          <span class="dot active"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span>
        </div>
      </div>

      <div class="controls">
        <button id="play-sequence" type="button">Play allergy sequence</button>
        <button id="reset-sequence" class="secondary" type="button">Reset</button>
      </div>
      <p class="source-note">Mechanism summary: allergen-specific IgE can aggregate on mast cells, trigger intracellular signaling, and lead to degranulation and mediator release.</p>
    </section>

    <section class="panel" id="structures">
      <div class="section-heading">
        <p class="eyebrow">2. Deposited molecular evidence</p>
        <h2>Rotate the proteins and inspect the binding partners</h2>
        <p>Primary-button drag rotates. Scroll zooms. These are experimental structures, not the conceptual Divergence candidate.</p>
      </div>

      <div class="structure-grid">
        <article class="structure-card">
          <div class="card-heading">
            <div>
              <p class="pdb-tag">PDB 2Y7Q</p>
              <h3>IgE-Fc bound to FcεRI alpha</h3>
            </div>
            <a href="https://www.rcsb.org/structure/2Y7Q" target="_blank" rel="noreferrer">RCSB record</a>
          </div>
          <div
            class="viewer_3Dmoljs molecule-viewer"
            data-pdb="2Y7Q"
            data-backgroundcolor="0xffffff"
            data-style="cartoon:color=grey"
            data-select1="chain:A"
            data-style1="cartoon:color=red"
            data-select2="chain:B"
            data-style2="cartoon:color=blue"
            data-select3="chain:D"
            data-style3="cartoon:color=blue"
            data-ui="true"
            aria-label="Interactive 2Y7Q molecular structure">
          </div>
          <div class="legend">
            <span><i class="swatch blue"></i>IgE-Fc: chains B and D</span>
            <span><i class="swatch red"></i>FcεRI alpha: chain A</span>
          </div>
          <p class="touch-label">Touching partners: blue IgE-Fc binds the red extracellular receptor domain.</p>
        </article>

        <article class="structure-card">
          <div class="card-heading">
            <div>
              <p class="pdb-tag">PDB 5G64</p>
              <h3>IgE-Fc bound to omalizumab-derived Fab</h3>
            </div>
            <a href="https://www.rcsb.org/structure/5G64" target="_blank" rel="noreferrer">RCSB record</a>
          </div>
          <div
            class="viewer_3Dmoljs molecule-viewer"
            data-pdb="5G64"
            data-backgroundcolor="0xffffff"
            data-style="cartoon:color=grey"
            data-select1="chain:A"
            data-style1="cartoon:color=blue"
            data-select2="chain:B"
            data-style2="cartoon:color=blue"
            data-select3="chain:H"
            data-style3="cartoon:color=green"
            data-select4="chain:I"
            data-style4="cartoon:color=green"
            data-select5="chain:L"
            data-style5="cartoon:color=green"
            data-select6="chain:M"
            data-style6="cartoon:color=green"
            data-ui="true"
            aria-label="Interactive 5G64 molecular structure">
          </div>
          <div class="legend">
            <span><i class="swatch blue"></i>IgE-Fc: chains A and B</span>
            <span><i class="swatch green"></i>Fab fragments: chains H, I, L, and M</span>
          </div>
          <p class="touch-label">Touching partners: green omalizumab-derived Fab fragments bind blue IgE-Fc. Fab is an antibody fragment, not a complete antibody.</p>
        </article>
      </div>
    </section>

    <section class="panel" id="design-loop">
      <div class="section-heading">
        <p class="eyebrow">3. Claude-assisted research loop</p>
        <h2>From many digital designs to a few experimental hits</h2>
      </div>

      <div class="loop-grid">
        <article><span>1</span><h3>Define</h3><p>Plan a two-arm molecule: a disruptor arm to displace IgE and an anchor arm to remain attached at a compatible site.</p></article>
        <article><span>2</span><h3>Generate</h3><p>Claude helped orchestrate the creation of roughly 35,000 computational antibody designs.</p></article>
        <article><span>3</span><h3>Score and nominate</h3><p>Computational critics scored, ranked, and filtered designs. Teams nominated 91 disruptor and 57 anchor candidates for experiments.</p></article>
        <article><span>4</span><h3>Lab test</h3><p>Bio-layer interferometry found 20 disruptor hits and three anchor binders. Three tested disruptors removed more IgE than omalizumab at every tested concentration.</p></article>
        <article><span>5</span><h3>Next tests</h3><p>Combine both arms, validate free and receptor-bound IgE inhibition, test mast-cell and basophil responses, study animal behavior, and check unintended receptor cross-linking.</p></article>
      </div>

      <aside class="disclaimer">
        <h3>Important scientific and medical caveat</h3>
        <p>The cell animation is a simplified conceptual illustration. It is not a deposited structure of a Divergence candidate, a treatment recommendation, or evidence that a drug is safe or effective. The reported program is early-stage and mostly preclinical.</p>
      </aside>
    </section>

    <section class="panel" id="sources">
      <div class="section-heading">
        <p class="eyebrow">4. Sources and submission</p>
        <h2>Show your evidence and explain the result</h2>
      </div>
      <ul class="source-list">
        <li><a href="https://pmc.ncbi.nlm.nih.gov/articles/PMC11684040/" target="_blank" rel="noreferrer">NIH: IgE-mediated food allergy mechanism</a></li>
        <li><a href="https://www.anthropic.com/research/early-progress-drug-development" target="_blank" rel="noreferrer">Anthropic: Early progress on accelerating drug development with Claude</a></li>
        <li><a href="https://divergencelabs.com/publications/ige-preprint.pdf" target="_blank" rel="noreferrer">Divergence Labs technical report</a></li>
        <li><a href="https://www.rcsb.org/structure/2Y7Q" target="_blank" rel="noreferrer">RCSB PDB 2Y7Q</a> and <a href="https://www.rcsb.org/structure/5G64" target="_blank" rel="noreferrer">RCSB PDB 5G64</a></li>
      </ul>

      <label for="learner-summary">Submission paragraph</label>
      <textarea id="learner-summary" rows="7" placeholder="In four to six sentences, explain what IgE does, what the two deposited structures show, how the conceptual antibody is intended to help detach IgE, and what still needs experimental testing."></textarea>
    </section>
  </main>

  <footer>
    <p>Educational project. Not medical advice.</p>
  </footer>

  <script src="https://cdn.jsdelivr.net/npm/3dmol@2.5.5/build/3Dmol-min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/3dmol@2.5.5/build/3Dmol.ui-min.js"></script>
  <script src="script.js"></script>
</body>
</html>

How to Compare the Page

Check the placement of the second structure card, five-stage research loop, disclaimer, sources, submission field, footer, and script tags against your file.

:root {
  color-scheme: light;
  --ink: #132238;
  --muted: #53657a;
  --paper: #ffffff;
  --wash: #eef6fb;
  --line: #d6e2ec;
  --navy: #123a63;
  --cyan: #dff6ff;
  --blue: #2563eb;
  --red: #dc2626;
  --green: #16803a;
  --gold: #f4b942;
  --shadow: 0 18px 45px rgba(18, 58, 99, 0.10);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: linear-gradient(180deg, #e8f5fb 0, #f8fbfd 28rem, #f8fbfd 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}

button, textarea { font: inherit; }
a { color: #075ea8; }
a:hover { color: #003f75; }

.hero, main, footer {
  width: min(1120px, calc(100% - 2rem));
  margin-inline: auto;
}

.hero { padding: 5rem 0 3rem; }
.eyebrow {
  margin: 0 0 .45rem;
  color: #096b78;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

h1, h2, h3 { line-height: 1.15; }
h1 { max-width: 780px; margin: 0; font-size: clamp(2.7rem, 7vw, 5.6rem); letter-spacing: -.055em; }
h2 { margin: 0; font-size: clamp(1.75rem, 4vw, 2.8rem); letter-spacing: -.035em; }
h3 { margin: 0; }
.hero-copy { max-width: 720px; color: var(--muted); font-size: 1.15rem; }
.chips { display: flex; flex-wrap: wrap; gap: .65rem; }
.chips span { padding: .5rem .8rem; border: 1px solid #b9d9e6; border-radius: 999px; background: rgba(255,255,255,.74); font-weight: 700; }

main { display: grid; gap: 1.4rem; }
.panel { padding: clamp(1.15rem, 3vw, 2.4rem); border: 1px solid var(--line); border-radius: 24px; background: var(--paper); box-shadow: var(--shadow); }
.section-heading { max-width: 780px; margin-bottom: 1.4rem; }
.section-heading > p:last-child { color: var(--muted); }

.mechanism-stage { overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(#eff9ff, #fff7ed); }
.diagram { position: relative; min-height: 360px; overflow: hidden; }
.diagram > div { position: absolute; transition: opacity .55s ease, transform .75s ease; }
.mast-cell { left: 5%; bottom: -45px; width: 90%; height: 145px; border: 4px solid #c2416c; border-radius: 50% 50% 0 0; background: #f9a8c5; }
.mast-cell span { position: absolute; left: 50%; top: 52px; transform: translateX(-50%); font-weight: 800; }
.receptor { bottom: 88px; width: 76px; padding: .55rem .25rem; border-radius: 16px 16px 4px 4px; color: white; background: var(--red); text-align: center; font-weight: 800; }
.receptor-one { left: 28%; }
.receptor-two { right: 28%; }
.ige { bottom: 155px; width: 66px; padding: .55rem; border: 3px solid #1d4ed8; border-radius: 999px 999px 12px 12px; color: #163c94; background: var(--cyan); text-align: center; font-weight: 900; opacity: 0; transform: translateY(-45px); }
.ige-one { left: calc(28% + 5px); }
.ige-two { right: calc(28% + 5px); }
.allergen { left: 50%; top: 36px; width: 150px; padding: .7rem; border: 3px dashed #9a5a00; border-radius: 999px; background: #ffedb2; text-align: center; font-weight: 900; opacity: 0; transform: translate(-50%, -22px); }
.mediators { right: 8%; bottom: 22px; width: 180px; padding: .6rem; border-radius: 14px; color: #6f2500; background: #fed7aa; text-align: center; font-weight: 800; opacity: 0; transform: scale(.65); }
.designed-antibody { left: 7%; top: 52px; width: 210px; padding: .75rem; border: 3px solid var(--green); border-radius: 16px; color: #075b28; background: #dcfce7; text-align: center; font-weight: 900; opacity: 0; transform: translateX(-35px); }

[data-step="1"] .ige,
[data-step="2"] .ige,
[data-step="3"] .ige { opacity: 1; transform: translateY(0); }
[data-step="2"] .allergen { opacity: 1; transform: translate(-50%, 0); }
[data-step="2"] .mediators { opacity: 1; transform: scale(1); }
[data-step="3"] .designed-antibody { opacity: 1; transform: translateX(0); }
[data-step="3"] .ige-one { opacity: 1; transform: translate(-50px, -55px) rotate(-10deg); }
[data-step="3"] .receptor-one { opacity: .45; }

.step-caption { min-height: 4rem; margin: 0; padding: 1rem 1.25rem; border-top: 1px solid var(--line); background: white; font-weight: 750; }
.progress { display: flex; gap: .45rem; padding: 0 1.25rem 1rem; background: white; }
.dot { width: 34px; height: 6px; border-radius: 999px; background: #d2dee8; }
.dot.active { background: #16728a; }
.controls { display: flex; gap: .7rem; margin-top: 1rem; }
button { padding: .75rem 1rem; border: 0; border-radius: 12px; color: white; background: var(--navy); cursor: pointer; font-weight: 800; }
button.secondary { color: var(--navy); background: #e5edf4; }
button:focus-visible, a:focus-visible, textarea:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.source-note, .touch-label { color: var(--muted); }

.structure-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.structure-card { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #fbfdff; }
.card-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: start; padding: 1rem; }
.pdb-tag { margin: 0 0 .3rem; color: #096b78; font-weight: 900; }
.molecule-viewer { position: relative; width: 100%; height: 420px; border-block: 1px solid var(--line); }
.legend { display: flex; flex-wrap: wrap; gap: .65rem 1rem; padding: 1rem 1rem .4rem; font-size: .9rem; font-weight: 750; }
.legend span { display: inline-flex; gap: .4rem; align-items: center; }
.swatch { width: 12px; height: 12px; border-radius: 50%; }
.swatch.blue { background: blue; }
.swatch.red { background: red; }
.swatch.green { background: green; }
.touch-label { margin: .4rem 1rem 1rem; }

.loop-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .7rem; }
.loop-grid article { padding: 1rem; border: 1px solid var(--line); border-radius: 16px; background: #f7fbfe; }
.loop-grid article > span { display: grid; width: 30px; height: 30px; margin-bottom: .6rem; place-items: center; border-radius: 50%; color: white; background: #096b78; font-weight: 900; }
.loop-grid p { color: var(--muted); font-size: .92rem; }
.disclaimer { margin-top: 1rem; padding: 1rem 1.15rem; border-left: 5px solid #c2410c; border-radius: 12px; background: #fff7ed; }
.disclaimer p { margin-bottom: 0; }
.source-list { padding-left: 1.25rem; }
label { display: block; margin: 1.2rem 0 .45rem; font-weight: 850; }
textarea { width: 100%; padding: 1rem; border: 1px solid #b9c9d6; border-radius: 14px; color: var(--ink); background: #fbfdff; resize: vertical; }
footer { padding: 2rem 0 3rem; color: var(--muted); text-align: center; }

@media (max-width: 900px) {
  .structure-grid, .loop-grid { grid-template-columns: 1fr; }
  .molecule-viewer { height: 360px; }
}

@media (max-width: 620px) {
  .hero { padding-top: 3rem; }
  .diagram { min-height: 420px; }
  .receptor-one { left: 16%; }
  .receptor-two { right: 16%; }
  .ige-one { left: calc(16% + 5px); }
  .ige-two { right: calc(16% + 5px); }
  .designed-antibody { left: 4%; top: 92px; width: 175px; }
  .mediators { right: 3%; width: 145px; }
  .card-heading { display: grid; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

How to Compare the Styles

Check the green legend swatch, loop grid, research cards, disclaimer, source list, textarea, footer, and responsive rules against your stylesheet.

const scene = document.querySelector("#allergy-scene");
const caption = document.querySelector("#step-caption");
const playButton = document.querySelector("#play-sequence");
const resetButton = document.querySelector("#reset-sequence");
const dots = [...document.querySelectorAll(".dot")];

const captions = [
  "Start: FcεRI receptors sit on the mast-cell surface.",
  "Sensitization: IgE attaches to the high-affinity FcεRI receptor.",
  "Reaction: a food allergen cross-links adjacent receptor-bound IgE, triggering signaling and release of histamine and other inflammatory mediators.",
  "Conceptual intervention: a designed antibody binds IgE and helps dislodge it from FcεRI. This is a simplified idea, not proof of a safe or effective treatment."
];

let timer;
let currentStep = 0;

function showStep(step) {
  currentStep = step;
  scene.dataset.step = String(step);
  caption.textContent = captions[step];
  dots.forEach((dot, index) => dot.classList.toggle("active", index === step));
}

function playSequence() {
  clearInterval(timer);
  showStep(0);

  const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  if (reducedMotion) {
    showStep(3);
    return;
  }

  timer = window.setInterval(() => {
    if (currentStep >= captions.length - 1) {
      clearInterval(timer);
      return;
    }
    showStep(currentStep + 1);
  }, 1500);
}

function resetSequence() {
  clearInterval(timer);
  showStep(0);
}

playButton.addEventListener("click", playSequence);
resetButton.addEventListener("click", resetSequence);
showStep(0);

Why the Script Stays the Same

The second viewer and research panels use declarative HTML. Your existing allergy animation script remains unchanged in this step.

Your explainer now connects two deposited molecular structures to an evidence-aware research story. Next up, you will test the interactions and scientific boundaries in Chrome and Safari before capturing the final submission.

Test and Capture the Final Explainer

Your page now pairs deposited molecular structures with a clearly labeled conceptual treatment animation. This final pass checks that the evidence boundary survives real use.

You'll use Claude Code to audit the complete project. You'll then test the page in both browsers.

In this step, get ready to:

Review index.html, styles.css, and script.js for implementation issues.
Test the finished explainer in Google Chrome and Safari.
Complete the written and visual submission artifacts.

Audit the complete project

A final audit catches connections that can be missed when a page grows across several steps. It also checks whether the language stays within the available evidence.

What should the audit cover?

Matching IDs connect the page controls to their script selectors.
Accessible labels identify every interactive element.
Every JavaScript declaration supports the finished page.
Text contrast keeps each label readable.
Responsive styles prevent small-screen overflow.
Evidence-aware wording separates deposited structures from the conceptual intervention.

Switch back to the Claude Code session for your allergy-antibody-explorer folder.
Ask Claude Code to review index.html, styles.css, and script.js against the six audit criteria above.
Ask Claude Code for a file-by-file report of its findings.
Read the report to confirm that each criterion was checked.

You should receive a report covering all three files. The report should confirm that the finished code has no broken connections or unsupported scientific claims.

Did the review skip something?

Ask Claude Code to address any missing audit criterion explicitly.
Check that the review names index.html, styles.css, and script.js.

Ask for help: Help me check whether Claude Code reviewed every final file and every audit criterion.

Test every interaction in both browsers

The molecular viewers depend on 3Dmol.js plus internet-loaded structure data. Cross-browser testing proves that the complete experience works outside the code editor.

Before you test the final page, do you expect both browsers to preserve the same controls and molecule interactions?

Return to index.html in Chrome from earlier.
Refresh the page.
Click Play allergy sequence.

You'll see four labeled states appear in order. The final state identifies the designed-antibody intervention as conceptual.

Click Reset.

You'll see the animation return to the starting receptor state.

Drag over 2Y7Q with the primary mouse button.
Scroll over 2Y7Q.
Drag over 5G64 with the primary mouse button.
Scroll over 5G64.

Both structures should rotate during a drag. Each structure should zoom during a scroll gesture.

The 2Y7Q legend should identify red FcεRI alpha beside blue IgE-Fc. The 5G64 legend should identify green Fab fragments beside blue IgE-Fc.

Open every source link on the page.

Each link should open its named source. The destinations include the RCSB Protein Data Bank structure records plus the research sources.

That is the first browser cleared. Chrome now supports every interaction in the finished explainer.

Press Command-Space bar to open Spotlight.
Type Safari into Spotlight.
Press Enter to open Safari.
Return to the allergy-antibody-explorer folder in Finder from earlier.
Drag index.html into the Safari window.

Click Play allergy sequence.
Click Reset.
Rotate both molecular viewers.
Zoom both molecular viewers.
Open each source link.

The animation controls should behave the same way in Safari. Both molecular viewers should remain interactive.

Every source link should open from Safari. This confirms that the complete explainer works in both target browsers.

Keep the Evidence Boundary Clear

Deposited structures support only what their molecular coordinates directly show. 2Y7Q shows IgE-Fc bound to FcεRI alpha.

The 5G64 structure shows IgE-Fc bound to omalizumab-derived Fab fragments. Those Fab fragments are parts of an antibody.

The designed-antibody animation is a simplified concept. Safety plus effectiveness still require further experimental validation.

Scroll to the Submission paragraph field.
Write a four-to-six-sentence explanation in #learner-summary.
Reread the paragraph to confirm that it separates direct structural evidence from the conceptual antibody idea.

Your submission now explains the biology without overstating the research. It also names the experimental work that remains.

Capture the final explainer

A final screenshot turns the working page into a submission artifact. The frame needs the title plus one molecular viewer.

The same frame also needs the research loop plus the disclaimer.

Before you capture it, which visible areas prove that the page combines interaction with scientific context?

Fitting all four areas into one frame can be fiddly. Browser zoom gives you enough room to compose the evidence clearly.

Return to Chrome.
Adjust the browser zoom until the required page areas fit in the window.
Arrange the page so the title remains visible with one molecular viewer.
Keep the research loop visible with the disclaimer.
Press Shift-Command-4.
Drag the crosshair over the finished page area.
Release the pointer to capture the screenshot.

You'll see the screenshot saved on your Mac desktop.

Open the new screenshot from your desktop.

You should see the project title plus at least one molecular viewer. The research loop and disclaimer should also be readable.

That's the final proof captured. Your screenshot now presents the finished explainer with its evidence boundary intact.

Secret mission

Create a Two-Structure Evidence Audit

Turn your two molecular viewers into an evidence audit. Capture each deposited binding complex. Then write three bullets that separate direct structural evidence from the conceptual two-arm treatment story.

Clean Up Your Resources

Decide whether to keep your resources running, pause them to come back later, or delete them entirely. This project creates no cloud resources, so keeping its local files adds no ongoing project cost.

Resources you used:

The local allergy-antibody-explorer folder containing index.html, styles.css, and script.js.
The current browser page state containing your completed #learner-summary explanation.
Your original final screenshot on the Mac Desktop.
Your 2Y7Q evidence-audit screenshot on the Mac Desktop.
Your 5G64 evidence-audit screenshot on the Mac Desktop.

Keep everything running

No action is needed. Choose this if you want to revisit the explainer or continue refining its scientific communication.

Keep the allergy-antibody-explorer folder in its current location.
Keep the current browser tab open to preserve the completed text in #learner-summary.
Keep the original final screenshot plus both evidence-audit screenshots on the Mac Desktop.
Your page has no background service that consumes local resources.
The molecular viewers use internet access only when you open the page.

Pause - I'll come back to this later

Pausing means closing the browser view while keeping the local files for later. There is no local server to stop.

Copy the completed text from #learner-summary into a document you plan to keep.
Close any browser tabs displaying the explainer.
Leave the allergy-antibody-explorer folder in its current location.
Leave all three screenshots on the Mac Desktop.
Open index.html from the same folder when you return.

Delete - I don't want to use this again

Remove the known local project artifacts if you are finished with the explainer.

Deleting the folder and permanently clearing your Mac's trash removes your work. Save a copy of anything you may want later.

Screenshot filenames may be automatic. Their thumbnails make the three target images easier to identify.

Copy the completed text from #learner-summary somewhere safe if you want to keep it.
Close every browser tab displaying the explainer.
Press Cmd+Space to open Spotlight.
Type Finder into Spotlight.
Press Return to open Finder.
Type allergy-antibody-explorer into Finder's search field.
Move the matching allergy-antibody-explorer folder into your Mac's trash.
Select the Mac Desktop in the Finder sidebar.

Your project folder is now staged for removal. The three screenshot thumbnails are next.

Move the final screenshot showing the title, molecular viewer, research loop, and disclaimer into your Mac's trash.
Move the screenshot centered on the red and blue 2Y7Q contact into your Mac's trash.
Move the screenshot centered on the green and blue 5G64 contact into your Mac's trash.
Open your Mac's trash from the Dock.
Review every item before permanently deleting anything.
Restore each unrelated item you want to keep.
Permanently clear the trash after confirming every remaining item can be deleted.
Search your Mac for allergy-antibody-explorer again.

You should see no matching project folder.

Select the Mac Desktop in the Finder sidebar.

You should no longer see the original final screenshot or either evidence-audit screenshot. That's the cleanup complete. The known local artifacts are gone.

Nice Work!

You did it! Your Claude Code project now presents a simplified IgE mechanism beside rotatable molecular evidence.

You learned how to:

Built a responsive single-page explainer with Claude Code. Used HTML for structure. Used CSS for presentation. Used JavaScript for the allergy sequence.
Embedded deposited molecular evidence for PDB 2Y7Q plus PDB 5G64 from the RCSB Protein Data Bank. Used 3Dmol.js to make both structures rotatable. Color labels distinguish each deposited binding partner.
Communicated the research evidence boundary through a sourced generate-to-test loop. Added a medical disclaimer that separates the conceptual animation from proof. Tested the finished explainer in Google Chrome plus Safari. Captured a submission-ready screenshot after completing the written explanation.
Secret Mission: Produced a two-structure evidence audit with one focused screenshot for PDB 2Y7Q plus another for PDB 5G64. Wrote three audit bullets explaining why those deposited structures do not prove the conceptual two-arm treatment is safe or effective.

Ready to quiz yourself?