OMNIS — An engineering studyDesign / Development / Performance
01 / Introduction
The making of OMNIS.
A study in motion, interaction and the engineering decisions behind this experience.
I built OMNIS as a place to look closely. The work takes the foreground; the interface sets its pace. Every transition, material and line of type has to earn its place in that experience.
02 / Design philosophy
Less noise. More attention.
AaAa
GeistGeist Mono
PaperInkMuted ink
Typography carries the hierarchy. Space carries the rhythm.
Geist gives the work a direct, architectural voice. Geist Mono makes a quieter register for labels and technical detail. Paper, ink and thin rules hold the composition together, leaving colour to the work itself.
Motion follows the same hierarchy: a small response to attention, a deliberate handoff between pages. The reading surface stays still. Restraint gives the moments that move somewhere to land.
A link should acknowledge attention without shifting the layout around it.
implementation
Each word is a mask. Its letters rise into identical CSS copies, with a short delay between glyphs. The specimen below uses the same RollText component as the navigation.
decision
CSS keeps this response local. Keyboard focus receives the same cue; reduced motion leaves the letters still. Expose the mask to see the mechanism.
One position. A vocabulary of actions.
State diagram / Production arrow geometry
Next project / Media surface
context
Project navigation should make its next action legible before a click.
implementation
One shared resolver connects the pointer cue to the real control. GSAP morphs the icon; a separate, reversible orbit marks an interactive media surface.
decision
The orbit is a surface cue, not loading progress. Touch keeps visible controls. This diagram uses the actual arrow geometry, without mounting another cursor or tracking your pointer.
04 / Engineering challenges
What happens between the frames.
Navigation / ownership
A clean handoff.
problem
An opening menu and its rolling letters could reach different points when a new page was captured.
investigation
Finishing the GSAP panel timeline did not finish the independent CSS glyph transitions.
decision
Settle both at their final pose, capture the outgoing pixels, then reset the live menu during the route commit.
outcome
One live page owns scrolling and interaction. Reduced motion and unsupported browsers use a prepared direct swap.
Media / delivery
The right frame, first.
problem
A smaller video file did not necessarily make a better video texture.
investigation
Workbook playback checks found more dropped frames with VP9, despite positive browser capability estimates.
decision
Keep H.264 for that placement. Elsewhere, prefer reviewed, smaller VP9 only when smooth, power-efficient decoding is reported.
outcome
One source stays attached through playback. Visibility gates loading and playback; reduced motion retains posters.
Contact / resilience
An object. Still an interface.
problem
The lanyard must distinguish a drag from a turn without losing access to contact details.
investigation
Pointer movement, face visibility and keyboard focus need separate, coordinated responsibilities.
decision
Latch the drag threshold, provide an explicit turn control and move focus before making the outgoing face inert.
outcome
The DOM pass remains the foundation. Reduced motion, unavailable WebGL or context loss retains a usable static interface.
Still under investigationCold ARGUS graphics startup on Work and its detail page remains a constraint. The live highway belongs to this website; ARGUS’s backend architecture belongs to the project it presents.
05 / Technology index
The means behind the experience.
Built with
Interface
TypeScript / React / CSS
Static HTML at build time, hydrated for interaction.
Motion
GSAP / View Transitions / Lenis
Coordinated navigation; smooth scrolling on routes that need it.
Spatial work
Three.js / React Three Fiber / Drei
Live scenes in VERSO, ARGUS and the Contact lanyard.
Delivery
Vite / Cloudflare Workers
Prerendered pages, static assets and byte-range video delivery.
Verification
Vitest / Playwright / Oxlint
Unit tests, browser checks and a checked production build.
Broader toolkit +
Across other projects and disciplines; this is not the OMNIS dependency list.
LangChain / ChatGPT / Codex / Claude / Claude Code / Microsoft Copilot Studio / Power Automate / Power Apps / UiPath / n8n / OCR / pytesseract
Tools
GitHub / Azure DevOps / Jira / Figma
06 / In closing
One experience. Every detail accountable.
The aim is coherence: engineering that makes the visual idea dependable, and design that makes the engineering felt. The work is finished only when the two read as one.