Anatomy of a rebuild.

The brand is the design brief.

OLDCARTS is a clinical mnemonic — Onset, Location, Duration, Character, Aggravating factors, Relieving factors, Timing, Severity — that physicians use to characterize a symptom before treating it. The firm applies that same discipline to small-business operations: diagnosis before prescription.

So the site was designed as a diagnostic instrument: an examination room rendered in editorial luxury. Every device on the page extends the metaphor — a heartbeat that paces the WebGL particle "organism," an intake-to-recovery course of care drawn as an ECG, services written as treatment protocols (RX–01 through RX–04), pricing as engagement dosage, vitals in the HUD. A concept this specific makes a thousand small decisions for you. That's the first lesson: don't decorate a brand — diagnose it.

Four colors, strictly rationed.

A near-black with a green undertone reads as a dim examination room rather than generic dark-mode gray. Bone is warmer than white — porcelain and paper, not screens. Coral is reserved almost exclusively for the pulse: anything alive, urgent, or interactive. Sage is the counter-accent for calm, secondary emphasis. This guide page runs the same palette inverted — chart paper instead of the exam room.

Three families, three registers.

Fraunces is a variable font with four axes. Beyond weight and optical size, its SOFT and WONK axes are used as a voice: key italic words render with softened terminals and wonky alternates, so emphasis literally bends the letterforms (font-variation-settings: 'opsz' 144, 'SOFT' 70, 'WONK' 1). Fragment Mono plays the clinical chart — every label, reference number, and readout. All fonts are self-hosted woff2 with font-display: swap.

~45,000 particles with a resting heart rate.

The hero renders a single THREE.Points mesh: ~42k particles sampled on a sphere plus ~2.6k ambient dust, displaced in a custom vertex shader by simplex noise so the surface breathes like tissue. A JavaScript "beat clock" runs a lub-dub envelope at 58 BPM — two Gaussian pulses per cycle — and feeds one uniform shared by everything on the page: the shader's systolic expansion, the HUD beat dot, the ECG traces, even the specimen figure. One metronome, whole-page coherence.

Pointer position is unprojected into the scene so the cursor palpates the organism — particles yield around your hand. Scroll loosens and disperses it. Particle counts drop by two-thirds on mobile, device-pixel-ratio is capped at 1.75, blending is additive with no depth writes, and the render loop pauses when the tab hides. Reduced-motion visitors get a single still frame.

Choreography, not confetti.

GSAP + ScrollTrigger + SplitText handle choreography; Lenis supplies inertial scroll. The rules: masked line/char reveals with power4.out easing; one scroll-scrubbed set piece (the course-of-care ECG draws its own trace as you scroll, lighting each stage as the wavefront passes); ambient loops that are data, not decoration (live vitals, the auto-cycling OLDCARTS instrument, a scroll-velocity-reactive marquee). Everything respects prefers-reduced-motion.

The signature interaction is the OLDCARTS instrument: eight flex-grow slats, one per letter, that expand on hover like a specimen drawer opening — with a scan-line sweep and the letter's Fraunces SOFT axis easing in. On mobile it degrades to an accordion, and it's fully keyboard-navigable.

Every visual is computed.

There isn't a single raster image on this site. The hero organism is GPU particles; the four protocol previews (workflow graph, vital bars, 90-day radar, system lattice) are procedural 2D-canvas sketches that follow your cursor; the practitioner "specimen" — FIG. 01, an operational anatomy — is a seeded generative drawing; the consult section is an oscilloscope that flatlines until you approach and quickens when you hover the CTA. Generative assets weigh nothing, match the palette by construction, and never pixelate.

Three passes with a fine-toothed comb.

1. Pass one — structure & failure modes. Full-page screenshots at 1440, 768, and 390px plus section-by-section review: overflow bugs, spacing rhythm off the 8px grid, contrast failures, orphaned words in display type, z-index collisions, canvas sizing on resize.
2. Pass two — design opportunities. Where the page felt flat, complexity was added deliberately: the scan-line on active slats, scroll-velocity feeding the marquee, the beat clock unified across every canvas, richer HUD readouts, refined variable-font axes on emphasis words.
3. Pass three — polish & performance. Easing and stagger tuning, focus-visible states, aria labels and keyboard paths, Lighthouse-style checks (font preloads, DPR caps, rAF hygiene, paused offscreen canvases), copy line-breaks, and cross-viewport re-verification.

Static files, zero build.

The site is plain HTML/CSS/JS with vendored libraries — no bundler, no framework, no build step. The repo is pushed to GitHub and connected to Netlify, which serves it from a global CDN. /guide/index.html gives this page its clean route; a netlify.toml adds long-cache headers for fonts and vendor files and security headers for everything else.

1. Research the brand until the concept writes itself — diagnosis before prescription.
2. Set the system first: tokens for palette, type, spacing; then never improvise outside it.
3. Build the signature piece early (here, the instrument + organism) — everything else supports it.
4. Iterate in passes, not dribbles: screenshot everything, list every flaw, fix, repeat ×3.
5. Ship static: push to GitHub, import in Netlify, done. Performance is a feature of restraint.