How Meridian was built

meridian — spec build, lusion design language

The concept

A B2B fintech pitch — AI bookkeeping and spend management for independent medical practices — told in the lusion visual language: warm paper, ink panels, one emerald accent, big Satoshi headlines, and IBM Plex Mono as data chrome. The story of the product (messy transactions become a coded ledger) is also the story of the hero scene.

Signature mechanic — capsule settle

The hero panel is a real-time three.js scene: a tumbling pile of glossy two-tone capsules with cursor repulsion and a spring return. Scrolling the hero away runs the settle: spin decays, each capsule slerps upright, drifts to a slot in two tidy rows sorted by colorway, and eases to a uniform size. Chaos in, coded entries out — the product pitch, played by the objects.

• Spring toward target: factor 0.012 at rest, +0.06 × progress while settling; velocity damping 0.92.
• Repulsion radius 3.2 world units, weakened by 70% as the rows form.
• Progress comes from a scrubbed ScrollTrigger over the hero (top top → bottom 35%), smoothstepped.
• Slot lattice recomputed from the camera frustum on resize, so the rows fit every panel shape.

Techniques

• Vite 8 + React 19, prerendered at build time: the full document is baked into dist/index.html, then hydrated.
• three.js 0.185.1 — hero capsules + a wireframe meridian globe with 700 streaming particles, scroll-scrubbed camera push.
• GSAP 3.15 ScrollTrigger + Lenis 1.3.25 smooth scroll (skipped entirely under reduced motion).
• Self-hosted woff2 fonts, zero external requests at runtime.
• Both canvases sit over designed SVG resting states — if WebGL or JS never arrives, the page still reads as finished.
• rAF loops pause offscreen (IntersectionObserver) and on tab blur; devicePixelRatio capped at 2.

The fallback contract

?noanim, reduced motion, and JS failure each render the complete page at final values: prerendered markup, reveals forced visible, the menu is a native <details> element, and anchors fall back to native jumps.

A prompt that would recreate a site like this

Build a one-page site for a fictional B2B fintech ("Meridian" — AI bookkeeping
+ spend management for independent medical practices). Match every detail below.

STACK: Vite 8 + React 19 (prerender to static HTML at build, hydrate at runtime),
three 0.185.1, gsap 3.15.0 (ScrollTrigger), lenis 1.3.25. No other dependencies.

TOKENS: paper #f2f3ef, ink #0a0c0b, panel #0c0f0e, emerald #00b877, deep #0a5c46.
Fonts self-hosted woff2: Satoshi 400/500/700 (display+body), IBM Plex Mono 400/500
as uppercase data chrome (13px, letter-spacing .08em). Radius: 16px panels,
100px pills. Ease: cubic-bezier(.35,0,0,1). Viewport heights use the dynamic unit (dvh) only.

HERO: h1 top-left over a full-width ink panel (height calc(100dvh - 300px)).
Inside the panel, a three.js scene — 24 two-tone glossy capsules
(MeshPhysicalMaterial, clearcoat 1, roughness .16) tumbling with cursor
repulsion (radius 3.2) and spring return (k .012, damping .92).
SIGNATURE MECHANIC "capsule settle": a scrubbed ScrollTrigger on the hero
(top top -> bottom 35%) drives progress p; smoothstep p, decay spin by (1-p),
slerp each capsule upright (factor p*.12/frame), lerp base->slot where slots
are two rows sorted by colorway, spring k += .06p, scale eases to 1.0.
Behind the canvas: a static SVG of scattered capsules (hard-stop two-color
gradients) as the no-JS/no-WebGL resting state.

SECTIONS: oversized approach headline (clamp 44-104px, weight 500); an ink
ledger panel with a live-feed of 5 medical vendor transactions cascading in
(180ms stagger) with "Auto-coded" chips; 4 feature cards with pure-CSS/SVG
mini-visualizations (bars, credit card, P&L lines, close-ring) animating on
entry; a 300vh pinned black section — wireframe meridian globe of torus rings,
700 emerald particles spiraling into the core, camera push scrubbed by scroll;
footer with newsletter input and an oversized PRICING teaser row.

CONTRACT: gate all hidden-then-revealed styles behind html.js added by a head
script (skip when ?noanim). Reduced motion: no Lenis, no rAF loops, everything
at final values. Prerender the whole app into #root at build. Zero external
requests: fonts self-hosted, no CDNs. Label the brand as fictional in the
footer. Budgets: first load under 1.5MB, zero console errors, no horizontal
overflow at 375/768/1280.

©2026 — built by octopuss-ai as a portfolio demonstration