Web · Case Study

How I build a website

One build, start to finish: a concept rebuild of Narval Bio’s technology page, with a 3D molecule that turns as you read. Four tools, each doing the job it’s best at.

ChatGPTBlender ClaudeDaVinci Resolve
narval-concept.netlify.app

The finished site, scrolled top to bottom.

01
ChatGPT

References & direction

Every build starts with the site that already exists. I bring the old page into ChatGPT and generate a few reference directions from it, collect the examples I’m drawn to, and write out my thoughts: what the page has to say, how it should feel, and what’s getting in the way.

By the end of this step there’s a clear picture of the finished page before a single line of code.

Reference boardsNotesDirection
The original technology page
The original Narval Bio technology page, before the rebuild.

Notes from the start

  • Lead with one clear idea, not a wall of text.
  • Tell the science as a story, one beat per scroll.
  • Make the molecule the hero, moving with the reader.
  • Keep the brand: Narval navy and amber.
02
Sourcing

The real 3D object

The molecule on Narval’s site was a pre-rendered clip, not a model I could light or animate. But the site credits its source, so I followed it to the public NIH 3D listing and downloaded the actual structure: the VEGFR-2 / VEGF-A complex, PDB entry 3V2A.

That means the build uses the genuine molecule, not a lookalike, credited under its CC-BY license.

NIH 3D · 3DPX-012103139,206 vertices
The sourced structure, first turntable
03
Claude + Blender

Build & render, side by side

With Claude I build the functionality: a scroll-driven story, and a canvas that scrubs 120 rendered frames of the molecule as you scroll, always showing the nearest frame that has loaded so it never goes blank.

Meanwhile in Blender I fine tune the object itself: amber, navy, and bone materials, a four-light rig aimed at a single target, and a seamless ten-second turntable, then render the frame sequences the site plays.

Scroll-drivenFrame sequencesLighting & materials
The molecule rendered in amber in Blender.Blender · Amber
A wireframe-style render of the molecule in Blender.Blender · Specimen
Built with Claudeindex.html
// Draw the nearest frame already decoded,
// so the molecule never blanks while the rest stream in.
function nearest(i) {
  if (frames[i] && frames[i].ok) return i;
  for (var d = 1; d < count; d++) {
    if (frames[i - d] && frames[i - d].ok) return i - d;
    if (frames[i + d] && frames[i + d].ok) return i + d;
  }
  return -1;
}
04
Compile + DaVinci Resolve

Compile & fine tune

Then it all comes together, and the small numbers decide whether it feels effortless. The header animation is 336 frames; as images it would weigh about 20 MB, so it ships as a 3.2 MB video instead, with a lighter cut for phones. Motion respects visitors who prefer less of it, and every section is tuned until it reads cleanly.

Finally I take the screen recordings into DaVinci Resolve and cut a before-and-after reel, so the launch has something to share on day one.

PerformanceAccessibilityLaunch reel
The finished header
The result

See it live

Scroll it yourself and watch the molecule follow along.

Open the live site Start a project

A concept demonstration, not a client project. Not affiliated with Narval Bio. Molecular structure from NIH 3D (3DPX-012103), used under CC-BY.