Everything you are looking at was written.

A headquarters, filmed

Orvantis Intelligence helps organizations adopt AI quietly. The site had to make that argument by demonstration: no hype, no gradients screaming “AI”, no dashboard screenshots. The direction we committed to is a headquarters you walk through at night — seven full-viewport chapters, framed by a thin HUD (chapter index, Accra coordinates), shot in near-monochrome where light is the only color.

The palette is four values of one atmosphere plus a single beam: obsidian, graphite, moon silver, porcelain — and aurum, spent like money. If aurum appears more than a few times per viewport, it stops being a beam and becomes a theme. We rationed it: the sigil core, the chapter numerals, the ligature hairline, focus rings, one italic phrase in the opening sentence.

The sigil, the wordmark, the voice

The mark is an aperture: four concentric arcs, each deliberately incomplete, around a small aurum core. Incompleteness is the point — an iris mid-open, an organization mid-adoption. Each arc is a plain SVG <circle> whose visible portion is cut with stroke-dasharray and rotated into position, so the whole mark is about ten lines of markup and scales from a 16-pixel favicon to the preloader without redrawing.

The wordmark is set in Newsreader at display optical size, with one engineered moment: a hairline aurum swash drawn as an absolutely-positioned SVG path across the full measure of the word, and an italic a seated among roman letters — a single character borrowed from the italic file, which variable fonts make free.

All three families ship as self-hosted variable woff2 — four files, ~330 KB, the whole typographic system. font-display: swap plus a preload on the two critical files keeps first paint honest.

The intelligence field

The site’s one big idea: a fixed WebGL canvas behind everything, holding 6,400 points (3,200 on small screens) that reorganize as you read. Chapter 00 is chaos — a slow spiral galaxy. By Practice the points have gathered into constellations of thought-clusters. By Approach they lock into a lattice. Disorder becomes structure as the argument for disciplined adoption unfolds. No library — raw WebGL 1, one draw call, about 370 lines.

Three formations, one buffer each

Every point owns a position in all three formations, uploaded once as static vertex attributes. The CPU never touches them again; the morph happens entirely in the vertex shader, driven by a single uniform uPhase that scrolls from 0 → 2:

// vertex shader — the whole choreography
float p1 = ease(clamp(uPhase, 0.0, 1.0));       // chaos → constellation
float p2 = ease(clamp(uPhase - 1.0, 0.0, 1.0)); // constellation → lattice

// per-point lag so formations knit rather than snap
float lag = aSeed.y * 0.28;
p1 = clamp(p1 * (1.0 + lag) - lag, 0.0, 1.0);

vec3 pos = mix(aChaos, aConst, p1);
pos = mix(pos, aLattice, p2);

The lag line is what makes the morph feel biological: each point starts moving at a slightly different scroll position (seeded per-point), so the field knits into its next shape instead of tweening in lockstep.

Parting around the cursor

After projection, each point knows its own screen position in normalized device coordinates. We push it radially away from the cursor with a Gaussian falloff — aspect-corrected so the “hand” is circular on any viewport:

vec2 sd = vec2((ndc.x - uMouse.x) * uAspect, ndc.y - uMouse.y);
float len = max(length(sd), 0.0001);
float push = uMouseF * exp(-(len * len) / 0.085);
ndc += vec2(sd.x / uAspect, sd.y) / len * push;

Because the push happens in screen space after the camera, it costs nothing and works identically at every dolly distance. uMouseF eases toward 0 when the pointer leaves, so the field closes behind you like water.

Scroll as camera

A keyframe table maps document positions to phase and dolly (camera distance); scroll interpolates between rows, and the render loop eases toward those targets at different rates — position slower than intent, which is what makes the motion feel weighty rather than bouncy:

// main.js — keypoints; field.js eases toward these each frame
{ y: 0,                  phase: 0,    dolly: 3.1  }  // arrival · chaos
{ y: centerOf(thesis),   phase: 0.55, dolly: 2.65 }
{ y: centerOf(practice), phase: 1.0,  dolly: 2.9  }  // constellation
{ y: centerOf(approach), phase: 2.0,  dolly: 2.45 }  // lattice
{ y: centerOf(corr),     phase: 2.0,  dolly: 4.1  }  // pull away

When the field cannot run

Under prefers-reduced-motion, or when WebGL is unavailable, the same canvas gets a static long-exposure render drawn once with 2D arcs — nine hundred faint orbital streaks and a scatter of resolved stars, seeded deterministically so it composes identically on every visit. The metaphor survives with zero motion.

Grain, vignette, and the grammar of motion

Film grain is one CSS rule: an SVG feTurbulence texture encoded as a data URI, tiled at 8% opacity above everything, stepped through three positions per second so it shimmers like print stock rather than swimming like video noise:

.grain {
  background-image: url("data:image/svg+xml,…feTurbulence
    type='fractalNoise' baseFrequency='0.82'…");
  opacity: 0.08;
  animation: grain-shift 0.9s steps(3) infinite;
}

The vignette is two stacked gradients — a radial pool centered slightly above the fold and a top/bottom letterbox — which keeps every chapter feeling lit from within the frame. Motion everywhere follows one grammar: 0.9–1.4 s durations, exponential-out easing, headline words rising through overflow masks like end credits, sections dollying ±26 px and settling as they cross center. Nothing bounces; nothing arrives faster than a held breath.

The wordmark’s first-load entrance follows the same grammar: four masked chunks rise in 130 ms steps while the preloader’s aperture rotates open, then the aurum swash draws itself across the word via pathLength="100" and a dash-offset animation, and “INTELLIGENCE” tracks in from a whisper of extra letter-spacing. Pure CSS — it still runs with JavaScript disabled, and disappears entirely under reduced motion.

How it was made, honestly

This site was designed and engineered by Fable 5 (Anthropic’s model) working as designer-engineer, directed by Hannah Kwakye — art direction, brief, taste, and final cut are hers. That division of labor is the thesis of the whole collection: AI does not replace taste, it amplifies the designer who has it.

• Stack: hand-authored static HTML, one CSS file, two small JS files. No framework, no build step, no external request of any kind at runtime.
• Assets: every visual is code — SVG (sigil, favicon, grain texture), raw WebGL (the field), CSS gradients (vignette, glow). The constraint began as an environment rule and became the creative position.
• Fonts: Newsreader, Geist, and Geist Mono, fetched once as variable woff2 subsets and served from assets/fonts/.
• Performance: device-pixel ratio capped at 2, one draw call per frame, rAF paused when the tab hides, content-visibility: auto on long documentation sections, transform/opacity-only animation.
• Access: semantic landmarks, skip link, visible focus, AA contrast throughout (the dim-silver tokens were specifically re-tuned for it), full reduced-motion replacement rather than mere reduction.

Three passes before done

Shipping

The site deploys to Netlify from a static directory — publish = ".", immutable cache headers on assets/, conservative security headers on everything. The correspondence letter is a native Netlify Form: detected at deploy time from the data-netlify attribute, protected by a honeypot field, answered inline via a ?sent=1 redirect. No serverless functions, no client-side form library — the platform does the work.

Orvantis is the second of twenty-six sites in this collection, and its headquarters: AI Operations Launch™ and Next Builders Lab™ are its first engagement and its education arm, each built as its own world.