gmarte.com — behind the visual language
Control Room Editorial.
The calm of a boardroom annual report, fused with the precision of a logistics control tower. Every section is a numbered chapter in an operating ledger; every visual decision reduces to one question — does it read as a leader in control of a complex system?
Three rules govern everything below: one signal color, roughly one red element per viewport. Hairlines instead of boxes. Motion reveals — it never decorates.
Color — one signal on obsidian
Page ground. Near-black with a breath of warmth — never pure #000.
Alternating chapter bands. One step of elevation, no shadows.
Hover surfaces and panels. The ceiling of the neutral stack.
Primary text. Warm off-white — reads as print, not screen glare.
Secondary text and supporting copy.
Tertiary text: labels, meta, captions.
The one accent. Graphic marks, progress, live indicators.
Text-safe red for small type on dark ground.
Reserved for gradients and glow falloff.
The red carries brand continuity from the original gmarte identity (#A40000), tuned one step brighter for dark ground. It is rationed deliberately: when everything is quiet, a single red pulse reads as the most important thing on screen.
Typography — signal & structure
Display
Instrument Serif
Headlines, chapter titles, pull statements. One weight (400), italic reserved for the emphasized phrase — one per headline, never more.
Enterprise complexity, engineered into advantage.
Body / UI
Archivo
Body copy, buttons, navigation. A grotesk with enough character to avoid the template feel, quiet enough to disappear behind content.
Technology leader with 10+ years across enterprise systems, SAP architecture, integrations, and AI-driven innovation.
Data / Labels
IBM Plex Mono
Kickers, chapter indices, tickers, metadata. The engineering voice of the system — IBM heritage, enterprise by blood.
04 — Current Scope · Caribetrans
An editorial serif over an engineering mono is the whole thesis in typographic form: executive judgment above, operational precision below. The sans stays out of the argument.
Motion — choreography, not decoration
One easing signature
cubic-bezier(0.19, 1, 0.22, 1) — a long expo-out — drives every reveal, hover, and expansion. Durations 0.6–1.2s. One curve means the whole page decelerates the same way.
Masked line reveals
Headlines rise from behind a crop (y: 112% → 0), line by line, staggered ~90ms. The text arrives like a ledger being printed — content is revealed, not animated.
Scroll as narrative
Lenis smooth scroll (lerp 0.09) turns the wheel into a camera dolly. The journey spine fills as you read; the hero lattice orders itself as you leave it: complexity → control.
Reduced motion is first-class
prefers-reduced-motion collapses every animation to its final frame, disables smooth scroll, freezes the 3D field and the ticker. The story survives without the motion.
3D — The Meridian
The hero hosts a single WebGL scene: 1,900 particles that exist in two states at once — a scattered noise field (operational complexity) and an ordered lattice of meridian rings (systems under control). A scroll-driven uniform morphs every particle between its two positions, so leaving the hero literally brings the system into order. Six great-circle routes carry red signal pulses — data moving through an operation.
Per the brief: meaningful, not decorative. The scene is monochrome plus the signal red, capped at DPR 1.75, one shader material, zero postprocessing — it holds 60fps on integrated graphics and disappears entirely for reduced-motion users and browsers without WebGL.
Scene parameters
- Particles
- 1,900 · 1 draw call
- Lattice
- 9 meridian rings · r 5.2
- Routes
- 6 Catmull-Rom curves
- Morph
- uOrder · 0.30 → 1.0 by scroll
- Parallax
- pointer · lerped, ±0.11 rad
- DPR
- min(device, 1.75)
- Blending
- additive · depthWrite off
- Fallback
- static atmosphere still
Asset pipeline — generative, then disciplined
The cinematic media on this site is generated, not stock. Stills come from the Gemini image model, prompted inside this design system (obsidian ground, one crimson signal, no text, no objects). The operating-terrain still is then animated into a 10-second ambient loop by Higgsfield’s Cinema Studio video model, re-encoded to a 1.0 MB muted H.264 loop.
hero-haze — Gemini
Hero atmosphere under the 3D field
flow-terrain — Gemini
Source still for the Scope interstitial
og-cover — Gemini
OpenGraph card + final CTA backdrop
flow-loop — Gemini still → Higgsfield Cinema Studio → H.264
10s · muted · 1.0 MB
Engineering notes
Next.js 16 App Router, static export (output: 'export') deployed to GitHub Pages. React 19, TypeScript, zero server dependencies.
Tailwind CSS v4 — the entire theme lives in globals.css as @theme tokens (no config file). Utilities like hairline, kicker, and grain encode the system's recurring moves.
React Three Fiber. The hero field is one draw call: 1,900 particles in a custom GLSL shader that mixes each point between a noise position and its meridian-lattice position. Six route curves carry pulsing signal dots. DPR capped at 1.75, additive blending, no postprocessing.
Framer Motion for choreography, Lenis for scroll physics, IntersectionObserver for wayfinding state. CountUp and ticker are hand-rolled — no widget libraries.
Video asset re-encoded to 1.0 MB (H.264, CRF 25, muted). Stills ship as JPEG. The 3D scene suspends its work when the hero leaves the viewport.