available for work

menu

available for work

hello@o1tean.com

colophon

How this site is made, and the credits it owes.

type

HACKED · display, 24 px and up

designs in pixels

Hack · text and interface

sphinx of black quartz, judge my vow
0123456789 . : - = + * # % @

  • HACKED by David Libeau, licensed CC BY
  • Hack by Source Foundry, MIT

colour

  • void#07050athe page ground1.00:1 on void
  • plum#2b0f3fhairlines, decorative only1.20:1 on void
  • violet#8b5cf6idle tiles and scene light, never text4.79:1 on void
  • orchid#d97cffthe liquid: underline, focus, progress8.00:1 on void
  • blush#ffe3f6text16.97:1 on void
  • paper#f4ecf8the light ground under the mono logo17.58:1 on void
  • pink belongs to the logo →

the renderer

Diagram: four layers of the renderer, from the 3D scene up to the page
  1. scene: the 3D render
  2. glyph grid: Hack characters by luminance
  3. liquid lens: the smooth render, refracted
  4. page: HTML on top

generated illustration

  1. Three.js renders the 3D formation into an offscreen buffer at a fraction of the screen's resolution: smooth colour plus depth.
  2. A glyph pass cuts the screen into cells. Each cell reads the brightness under it and picks one of twelve Hack symbols, from a space to a full block, with edge strokes on silhouettes. No letters, no digits.
  3. One liquid loupe follows the pointer and the keyboard focus over the formation, and shrinks away over empty space. Inside it the smooth render shows through, refracted, with a slight riso misregistration. On a touch screen, a tap on the formation makes one ripple at that spot.
  4. Under every block of text the field is darkened to plum, and the page sits on top as plain HTML. Both passes run on the GPU, every frame.

stack & build

react
19.3.0
react-router
8.4.0
motion
14.1.0
three
0.186.1 via @react-three/fiber 9.8.1
vite
8.3.4
typescript
7.0.2
node.js
build time only
hosting
Cloudflare Workers static assets

Node.js runs only at build time, for Vite, the prerender, the images and the budget checks; nothing runs on a server. The per-pixel work is GLSL on the GPU and the CPU only steps a few springs per frame, so Rust compiled to WebAssembly would speed up nothing while forcing 'wasm-unsafe-eval' into the CSP.

performance & accessibility

metricbudget
initial route JS, gzip≤ 120 kB
motion features, gzip≤ 15 kB
3D chunk, gzip≤ 350 kB
CSS, gzip≤ 25 kB
fonts≤ 90 kB

Also budgeted, and measured at release rather than by each build: LCP on mobile ≤ 2.5 s, CLS ≤ 0.05, TBT ≤ 200 ms, a 60 fps median frame rate, 0 frames in a hidden tab, and posters ≤ 120 kB each.

The target is WCAG 2.2 AA. Every page works with the keyboard alone, with a visible focus ring, and is complete without JavaScript or WebGL. Reduced motion, reduced transparency and forced colours are respected, and the 3D scene is decorative, so screen readers skip it. Known issues: none recorded yet.

Report a problem: hello@o1tean.com

privacy

No cookies, no analytics, no third-party requests. Your settings stay in your browser:

  • localStorage o1:motion motion on or off
  • localStorage o1:3d 3D auto, low or off
  • sessionStorage o1:intro the logo intro has played this session

The live Content-Security-Policy:

default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data: blob:; font-src 'self'; connect-src 'self'; object-src 'none'; frame-ancestors 'none'; base-uri 'self'; form-action 'none'

settings

motion
3D

image credits

Atmospheric images, the renderer diagram and placeholder covers were generated with OpenAI image generation (Codex). They are not client work and not photographs of real places or people.

brief and direction: o1tean · exploration, drawing and review: Claude agents and OpenAI Codex