Studio Noctis.
Dark botanical brand site with cinematic loader and scroll-driven type choreography.
A skincare house built around nocturnal botanicals — moonflower, shadow moss, night jasmine. The brand site had to feel like walking through a botanical garden after hours: quiet, luminous, luxurious. Product as artifact, not merchandise.
End-to-end. Brand direction, art direction, motion design, and full implementation — every decision made in-pattern.
- 01. Brand direction
- 02. Art direction
- 03. Motion design
- 04. WebGL
- 05. Implementation
Research and mood
Gathered reference for nocturnal botanicals and editorial photography of plant life after dark. Landed on a single-accent palette — near-black, warm bone, one violet biolight — inspired by bioluminescent florals and Swiss pharmacy branding.
Typographic system
Paired a high-contrast serif display with a measured grotesque for meta copy. Headlines get oversized leading; body copy kept tight. The rhythm echoes a print-magazine spread more than a product page.
Motion language
Every scroll advance corresponds to a different botanical moment. A subtle violet glow pulses around active elements. Page transitions fade through black like a scene cut in film. Restraint is the craft — one decisive moment per scroll beat, never simultaneous noise.
Build and ship
Next.js App Router, GSAP with ScrollTrigger for pinned narratives, Lenis for smooth scroll, and a bespoke WebGL fragment shader for the hero botanical. Content via Sanity headless CMS. Deployed to Vercel.
Hero botanical
Custom WebGL fragment lit with a single rim light. Subtle vertex displacement driven by Perlin noise creates a constant, organic shimmer without any visible cycle.
Typographic system
Editorial display serif paired with a measured grotesque. Four weights, generous leading, tracked-out meta labels in brackets. Reads like a magazine spread.
Product photography
Product shots treated full-bleed with a clip-path mask reveal on scroll. The image unveils from the bottom as you arrive at it, cinema-style.
Ingredient pages
Each ingredient gets its own editorial chapter — botanical illustration, origin story, function. Long-form content treated like magazine features.
Checkout flow
Single-page checkout in monospace type. No upsells, no urgency timers. The restraint extends all the way to the receipt.
Built as a concept study in dark editorial motion — single accent, restrained WebGL, print-magazine pacing translated to the web. A shippable pattern for any luxury brand.
Arkē Ventures
→Brand · Venture Fund