Delos Scientific

Cheap lab gear exists, but a researcher cannot cite a no-name stirrer in a methods section, so early-stage labs pay several times over for a brand's credibility. Delos Scientific, a student hardware startup, needed a launch page that made the parts-versus-price argument concrete enough to move postdocs and new principal investigators onto a pilot waitlist, for an audience that reads spec sheets for a living.

A single self-contained HTML file with no framework or build step, deployed on Vercel. The centrepiece is a scroll-driven teardown: five 3D-rendered part layers registered to one camera frame assemble as the reader scrolls, with SVG lead lines, per-part cost callouts and a running parts total that lands on the price punchline. A cost-bar section draws the commercial unit and the Delos unit on the same dollar scale, and a pointer-warped canvas grid gives the hero and waitlist sections depth. Two waitlist forms were wired to a REST-backed table with honeypot, throttle, duplicate handling and screen-reader wiring, and the page was hardened for production with OG/Twitter/JSON-LD metadata, a strict Content-Security-Policy, reduced-motion and no-JS fallbacks, a mobile nav, an FAQ and a privacy page.

• Scroll engine measures geometry once (re-measured on load, font-ready and resize) so the scroll path does no layout reads; work is requestAnimationFrame-throttled and skipped entirely when progress has not changed.
• Motion is opt-out by design: prefers-reduced-motion renders the fully assembled teardown and disables animations; the warp grid stays static on touch devices, suspends itself when idle, off-screen or tab-hidden, and caps device-pixel-ratio at 2.
• Form abuse is handled in code, not copy: a hidden honeypot field that fakes success for bots, a 30-second localStorage throttle stamped only once the server has accepted or deduplicated the address, 409 conflicts mapped to an 'already on the list' message, and aria-invalid/aria-describedby wiring so errors are announced.
• Production headers via vercel.json: strict CSP, HSTS, X-Frame-Options DENY, Permissions-Policy and nosniff, with clean URLs and week-long cache headers on the rendered part layers; a .vercelignore rule keeps scratch HTML copies from shipping.
• The mobile teardown swaps the SVG viewBox through matchMedia and overlays a part list instead of maintaining a second layout; a size-adjusted fallback @font-face keeps the serif headline from shifting while the web font loads.

• Entire page is one self-contained index.html of 57.6 KB with no build step
• Five rendered part layers total 54.6 KB of WebP
• 30-second client-side resubmit throttle on the waitlist forms