Drawing proteins in the browser, from the PDB file up

The figure below plays three stories from crystal structures: the PROTAC MZ1 pulling BRD4 onto the VHL E3 ligase (5T35), and two covalent drugs, sotorasib on KRAS G12C (6OIM) and ibrutinib on BTK (5P9J), bonding to their cysteines. There's no molecular-graphics library behind it, just three.js, a few hundred lines of geometry, and the deposited coordinates. Here is how it works.

The PROTAC degrader MZ1, from crystal structure 5T35, bound to both the VHL E3 ligase and the second bromodomain of BRD4, the ternary complex that marks BRD4 for destruction.

01Every atom is where the crystallographers put it

The PDB files are trimmed copies of the RCSB entries: protein chains, the ligand, and the CONECT records that describe its bonds. Nothing is re-posed. The only things that move are the ligand's approach path, the covalent bond growing in, and BRD4 arriving (and, at the end, dissolving). Everything settles back onto the deposited pose.

The covalent link comes straight from the file. A CONECT record joins cysteine's SG to a ligand carbon, so the scene knows which bond to grow without any hand-placed coordinates.

02Secondary structure without a DSSP binary

Trimmed files carry no HELIX/SHEET records, so the figure works out secondary structure itself with a small version of DSSP (Kabsch & Sander, 1983):

• Place each backbone amide hydrogen opposite the previous carbonyl.
• Score every C=O···H–N pair with the electrostatic energy below, and call it a hydrogen bond under −0.5 kcal/mol.
• Two consecutive i → i+4 turns make a helix; parallel or antiparallel bridge patterns make a strand.

E = 0.084 · 332 · (1/r_ON + 1/r_CH − 1/r_OH − 1/r_CN)

For a 170-residue protein that's a few milliseconds of JavaScript.

03The cartoon is a swept cross-section

A spline runs through the Cα atoms, and at each step a cross-section is swept along it: a flat ellipse for helices, a flat ribbon with an arrowhead for strands, and a thin round tube for loops. The trick that makes it read properly is orienting the ribbon's width along each residue's C=O bond. That direction lies in the plane of a β-sheet and roughly along a helix's axis, so strands lie flat and helices curl the way you expect. Each vertex also stores its residue number, which is how the structure viewer names the residue under your cursor.

04A timeline that runs backwards

Each animation is a pure function of one number, progress from 0 to 1. That makes the scrubber trivial. Dragging it backwards un-docks the ligand, and pausing holds any frame exactly. It also means the reduced-motion version can show a single meaningful frame instead of a paused animation: for MZ1, that's the ternary complex just before BRD4 is destroyed.

05Why MZ1 is the default

My research is targeted protein degradation, so the figure leads with a degrader. MZ1 joins a BRD4 ligand (JQ1) to a VHL ligand, and in 5T35 you can see the result: BRD4's second bromodomain and VHL pressed together, with new protein–protein contacts that make the complex cooperative (Gadd et al., Nat. Chem. Biol. 2017). The figure draws those contacts as beaded lines once the complex forms. The final step, ubiquitin transfer and destruction in the proteasome, isn't in any crystal structure, so it's shown as BRD4 dissolving while MZ1 stays seated, free to recruit the next copy.