Read the story

Architecture

Serves the prerendered patient site.One Node server on Cloud Run.

Patients and referring dentists open pages that Astro prerendered at build time, served by one small Node server on Cloud Run in the website's own Google Cloud project. The 3D arch, twelve self hosted patient stories and a referral form that saves its PDF on the device all run in the browser.

20 minutes

from the first commit at 5:28 PM on Oct 28 to the first preview on Cloud Run

759 px

the widest screen a phone fix may change; a pixel diff at 1440 must read IDENTICAL

12 stories

from real patients, self hosted at 720p from Hybridge's own published copies, playing in place

7.0 screens

home page length at 1440 after the marketing review, down from 13.7

New York --:-- simulated

A visitor opens a page
Hybridge Patient Website Patients and referring dentists open pages that Astro prerendered at build time, served by one small Node server on Cloud Run in the website's own Google Cloud project. The 3D arch, twelve self hosted patient stories and a referral form that saves its PDF on the device all run in the browser. Nano banana Vertex image, art only 3D arch viewer three.js, loads near view Astro 5 build every page prerendered Cloud Build clean copy of main hybridge-website Cloud Run, Node 22 Site in the browser H loader, page veil Patients, dentists phone first Patient stories 12 films, self hosted Referral form PDF on the device keyed WebP source new revision pages open near view plays in place refer GCP hybridge-website, us-central1

Hover a part to trace what it touches. Click it for its notes.

  • Built by me
  • Managed by Google
  • Outside system
  • Main data path
  • On demand
  • Credentials cross

When it breaks

What each failure does, and what it does not do.

  1. No WebGL on the device

    The home page ships a still capture of the arch. Without WebGL or JavaScript, or when the load fails, the still stays.

    src/components/home/ArchViewer.astro:23

  2. A browser blocks sound

    Stories start muted with a pulsing Tap for sound. One click and every clip in the session plays with sound.

    src/components/motion/ClipCard.astro:4

  3. A bad revision ships

    Traffic moves back to the previous Cloud Run revision with one command from the deploy doc.

    docs/DEPLOY.md:106

What I tuned

Small choices that keep it fast and cheap.

  1. three.js only near view

    The 3D arch loads as its own chunk within 600 pixels of view. Desktop post processing is a further chunk.

    src/components/home/ArchViewer.astro:82

  2. Frames only while moving

    The arch renders during a drag, inertia or a switch, on screen, with the tab visible. Phones render at 1.5x without bloom or grain.

    src/components/home/arch-viewer.js:24

  3. Scale to zero

    No minimum instances and at most two, so no instance runs while nobody looks.

    docs/DEPLOY.md:66

Guards

Rules the code enforces, not rules people remember.

  1. Desktop stays put

    Phone fixes live only under 760 pixels wide. A pixel diff of each changed page at 1440 must print IDENTICAL.

    CLAUDE.md:291

  2. Touch parity

    Every hover style sits behind a fine pointer query, and anything hover shows also opens with one tap.

    CLAUDE.md:300

  3. Hidden from search

    Every page carries noindex and robots.txt blocks crawlers until the site replaces the live one.

    docs/DEPLOY.md:27