Lumitra / Design Directions
Seven directions.
One question.
Seven clickable explorations of the new Lumitra.co landing, all dark engineering-precision with one bold hero moment, kept side by side. Four are frozen static mockups; 05 and 06 embed the live Unicorn Studio scene; 07 is a watermark-free, fully-owned recreation of that scene in pure CSS and GSAP. Open each, and we build the one that carries the studio best.
Direction 01 / Ruthless Swiss minimalismGeist Minimal
Binary near-black and white with a single electric-mint accent. Geist plus Geist Mono, enormous whitespace, hairline dividers, surgical motion. The boldness lives in scale and confidence, not ornament. Vercel-grade restraint.
View live
Direction 02 / Premium SaaS engineeringLinear Dark-Craft
Rich near-black with a warm amber glow, a luminous bento grid, gradient dividers, and terminal-style product windows. Reads like Lumitra's own engineering dashboards. Linear and Resend energy.
View live
Direction 03 / Oversized type as graphicEditorial-Technical
Driven by oversized editorial display type, monospace telemetry (STATUS: STANDIN_MESH, 60FPS), bracketed section numbers, and a kinetic wordmark. The most distinctive of the four. bpco and Locomotive translated to dark.
View live
Direction 04 / Hero-forward, atmosphericCinematic Hero
The Unicorn Studio scene dominates a full-viewport hero with a molten-orange accent, scroll-velocity nav, and dramatic reveals. Pushes the one-bold-moment hardest. Active Theory restraint dialed for conversion.
View live
Direction 05 / Real Unicorn heroLive Scene
Built in real Next.js, with the actual Unicorn Studio scene running in the hero (project QDt4urvPFgRZRhjEJaKT): a glowing 'Introducing Lumitra' wordmark reveal. Note: the free-tier Unicorn watermark stays until the scene is on a paid plan.
View live
Direction 06 / Scene-forward, warmRemix Scene
Centered, scene-forward treatment with a warm accent, wired to the remix scene Rmnvd1yGjckSl1c8TDUg. A remix must be published into the Unicorn account before it embeds, so this currently shows a CSS fallback. Publish it and we swap one id to go live.
View live
Direction 07 / Recreated in WebGL, no UnicornOwned Intro Sequence
A from-scratch WebGL recreation of the Unicorn 'Intro Sequence' scene (react-three-fiber + postprocessing): real god rays scattering through the text mask, threshold bloom, chromatic aberration, an animated Perlin-noise field, and mouse parallax that shifts the ray origin. No third-party widget, no watermark, no recurring cost, fully owned.
View live- Direction 09 / Depth + editor UX
FX Engine Phase 3
Phase 3 of the Lumitra FX engine: the intro focus-pull (bokeh radius high to zero) over a layered gradient + SDF orbs + lockup, plus a live editor that adds / reorders / toggles layers and a preset gallery. Add ?tune=1 to open the tuner.
View live - Direction 10 / Owned package, presets gallery
FX Engine Phase 4
Phase 4 ships the engine as the workspace package @lumitra/fx. This route is the live presets gallery: every preset shipped by the package, rendered side by side. Drop @lumitra/fx into any site (arbosano, scheunerei, future client work) and you get the same set.
View live