HELIX is a fictional public genomics lab. The hero is a real double helix built to base-pairing rules — A always opposite T, G always opposite C — rendered with instanced meshes so 180 rungs cost almost nothing, and scroll drives a reading head down the molecule while a live sequence readout keeps pace.
Genomics visuals are usually either a stock glowing helix or an intimidating wall of letters. This site fuses them: the 3D molecule and the ATGC text are the same data. Scroll translates and reads simultaneously, and each of four real genes surfaces with a note that makes the abstraction personal — one letter is the difference between health and sickle-cell.
The four accents are the standard nucleotide colour convention used in sequencing software — the same key a geneticist already reads by.
Instrument Sans — display: clean lab-report neutrality. Azeret Mono is the sequence itself — every base fixed-width so pairs line up.
| Element | How it works |
|---|---|
| The helix | Two Catmull-Rom backbones offset by π; 180 base-pair rungs built as four InstancedMeshes (one per nucleotide colour), each half-rung positioned and oriented by a quaternion from the backbone to the axis. Base pairing is enforced — the far half always shows the complementary colour. |
| Reading head | A 420vh ScrollTrigger translates the molecule vertically and rotates it, while the same progress indexes the sequence readout and the gene cards — the DOM text and the WebGL model are one cursor. |
| Live sequence | A 42-base window of the deterministic sequence renders as coloured monospace with the current base underlined; the position counter reads a plausible chromosome-11 coordinate. |
| Gene notes | Four real loci (HBB, CFTR, BRCA1, TTN) with accurate base-pair counts and the single mutations that matter, each recolouring the card's spine. |
| Accessibility | Reduced motion drops entrances and the idle spin; scroll still drives sequence and genes (position, not animation). All science is real HTML text. |
| You do | The page does |
|---|---|
| Scroll the helix | The molecule advances and turns; the readout streams new bases; the position counter climbs |
| Pass each locus | HBB, CFTR, BRCA1, TTN surface with the mutation that defines them |