UI of the Lunarot Ecosystem // Standalone Shell
Custom alchemical colors defined in src/index.css:
- Void (
#000000): Absolute black background container. - Ash (
#080808): Dark vignette ambient shadows. - Gold (
#c8a45a): Warm, elegant Elden-style gold for accents and glows. - Parchment (
#efede8): Cozy, bone-white lettering. - Cream (
#ffffff): High-contrast white tags.
- Cinzel (
font-cinzel): Serif headings for ritual headers and sacred titles. - Cormorant Garamond (
font-garamond): Prose style, optimized for body sentences and poetic descriptions. - JetBrains Mono (
font-mono): Retrogaming telemetry fonts for console codes, specs, and status grids.
To GUARANTEE that pages fit perfectly inside custom frames (like Carrd or custom viewports) without double scrollbars, the style sheet locks the dimensions of outer containers and automatically updates a scale factor (--c-scale) using CSS media queries:
:root { --c-scale: 0.95; }
@media (max-width: 1023px) { :root { --c-scale: 0.72; } }
@media (max-height: 750px) { :root { --c-scale: 0.70; } }All components are written in React and TypeScript under src/components/:
Houses StarsCanvas (optimized Concentric Spoke radial coordinates matrix rendering at 30 FPS with pre-rendered sigils canvas) and AsciiEyes (30 FPS throttled ASCII eyes that blink and track pupil movement dynamically).
A hypnotic backdrop of procedurally undulating math-driven ASCII waves representing energy streams from the void.
The transitional gate for NATAL OS connection handshake procedures.
The aesthetic token specification guide and style dashboard cards.
An automated letter-by-letter typographic dispersion effect mimicking drifting smoke.
Font weight warping proximity tracking where letters stretch and breathe based on mouse cursor distance.
A 3D-perspective stacked cards layout allowing cards to be dragged, tilted, and swiped off one by one.
For me not for you :P