Read the story

Architecture

Serves the lab website to dentists.Prerendered, on Cloud Run.

Dentists and their teams open pages prerendered from a crawl of the live lab site and served by Cloud Run, under a runtime account that holds no roles. The home hero assembles a full arch as you scroll, and the Rx and setup forms build their PDF on the dentist's device.

3 minutes

from the premium redesign commit at 1:31 AM on Oct 29 to its first preview on Cloud Run

0 roles

on the runtime account, because the site calls no Google API

2 minutes

from the hero arch flip commit at 2:30 PM on Oct 29 to it live on Cloud Run

73 pages

crawled from the live site with 118 images, the source of the new site's facts

New York --:-- simulated

A dentist opens a page
Hybridge Dental Lab Website Dentists and their teams open pages prerendered from a crawl of the live lab site and served by Cloud Run, under a runtime account that holds no roles. The home hero assembles a full arch as you scroll, and the Rx and setup forms build their PDF on the dentist's device. Live site crawl 73 pages, 118 images Exploded arch hero cyan scan line on scroll Astro 5 build every page prerendered Cloud Build clean copy of main hybridge-lab-website Cloud Run, no API roles Site in the browser porcelain loader, veil Dentists, their teams send the lab cases Nano banana studio renders, keyed Doctor clips, lab film self hosted mp4 Rx and setup forms PDF on the device copy and facts keyed WebP source new revision pages open on scroll plays in place fill a form 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 JavaScript or reduced motion

    The hero shows the assembled photoreal arch by default, so the page never waits on the animation.

    src/components/home/Hero.astro:16

  2. An old address is opened

    21 live addresses without a new page redirect to the closest one. Course forms go to the live forms until they are rebuilt.

    astro.config.mjs:24

  3. A browser blocks sound

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

    src/components/motion/ClipCard.astro:5

What I tuned

Small choices that keep it fast and cheap.

  1. No pin on phones

    Desktop pins the hero for about 1.3 screens. Phones, tablets and low end devices skip the pin and play it once in 2.2 seconds.

    src/components/home/home-motion.ts:10

  2. Two sizes per layer

    Each hero layer ships small for phones, where the frame is about 330 pixels wide, and large for desktop.

    src/components/home/Hero.astro:31

  3. pdf-lib on first click

    The PDF library loads only when someone saves a form, so pages that never save one never fetch it.

    src/scripts/form-pdf.ts:3

Guards

Rules the code enforces, not rules people remember.

  1. No roles at runtime

    The runtime account holds no roles, since the site calls no Google API.

    docs/DEPLOY.md:21

  2. Touch parity

    Every hover style sits behind a fine pointer query. Anything hover shows also works by tap.

    docs/DESIGN.md:349

  3. Facts from the crawl

    Numbers, quotes, prices and dates come only from the crawled live site or the owner.

    CLAUDE.md:176