Meridian — Luxury Skincare Landing Template
▶ Live interactive demo (no signup): https://meridian-orpin-chi.vercel.appMeridian is a warm, editorial single-page template for a luxury skincare, beauty, or wellness brand — built around a real WebGL hero, not a video loop: a single amber serum droplet that falls with the camera down a vertical descent, refracting real editorial photography through it.• The droplet is real glass — Three.js MeshTransmissionMaterial that genuinely refracts the photo plates behind it, with Beer-Lambert amber absorption for the serum tint.• The camera falls with the droplet past 5 full-bleed photo plates, separated by letterbox gap-bands with coordinate labels so two photos never blend.• An "Apothecary Ledger" glass card trails the droplet, lifting to balance the composition as it drops.• Swappable brand — palette, fonts (Fraunces), copy, and photos live behind CSS variables and clearly-marked constants.• React 19 + Vite + TypeScript + Tailwind v4, Three.js code-split so the page still loads fast. Static deploy, zero backend.Includes the full commented source, the photo set, and a README with a customization map. Honest heads-up: the transmission droplet is GPU-heavy — desktop and recent phones are smooth, mid-range mobile is the trade-off (adjustable). It's overkill for a plain page — it's for a brand that wants the hero to be the whole first impression.
Get it → timotej70.gumroad.com