01 / FLUX
01
- WebGL2
- GLSL
- Half-float FBOs
FLUX
Navier–Stokes, solved every frame in shaders. Drag to paint. It never stops moving.
Open full screen →Thien Cao. Front-end engineer and graphics programmer. The work is redacted, the skill is not.
Discipline Front-end engineer
Graphics programmer
Graphics programmer
Status Available · one engagement at a time
Base San Francisco
Pacific time
Pacific time
The best front-end developer in the world.
I checked.
BOOTING GPU…
02 / MANIFESTO Scroll to read. Slowly. Let it land.
I don’t do “good enough.” I do the thing your last agency said was impossible, then I make it run on a phone from 2019.
Frameworks are for people who need help. I write the shaders, the physics, the parser, the protocol. Every byte on this page has my fingerprints on it.
Everything on this page is real. The fluid is simulated. The light is traced. The cloth falls. Scroll down and touch it.
— T.C. Every word load-tested.
03 / THE ARTIFACT Drag to spin · Scroll to mutate
COMPILING SHADER…
04 / THE WORK
Six programs
All live · All from scratch · Touch themThese are not videos and they are not screenshots. Every card below is the actual program running in your browser right now, at reduced resolution. Open one for the full thing, with the controls.
02 / LUMEN
02
- WebGL2
- GLSL
- Monte Carlo
LUMEN
Physically based light transport, converging live. Glass, metal, soft shadows, depth of field. No engine.
Open full screen →03 / TERRA
03
- WebGL2
- GLSL
- Raymarching
TERRA
Mountains, water, sky and clouds from noise. A flyover with no geometry at all. Steer with the mouse.
Open full screen →04 / SILK
04
- WebGL2
- GLSL
- PBD
SILK
Sixteen thousand particles, hung from two pins, solved on the GPU. Push through it with the cursor.
Open full screen →05 / LEDGER
05
- WebGL2
- Typed arrays
- Instancing
LEDGER
A synthetic market, a full order book, and a GPU heatmap of liquidity. Zero allocations in the hot path.
Open full screen →06 / ORACLE
06
- TypeScript
- DOM
- PerformanceObserver
ORACLE
An incremental parser, a resumable highlighter, and a virtualized transcript. The UI never blinks.
Open full screen → 05 / ARSENAL
Arsenal
Real physics · Grab one · Throw itEvery skill below is a rigid body in a Verlet solver I wrote for this section. Capsule collisions, friction, restitution, sleep states. Because a list would have been boring.
WebGL2WebGPUGLSLWGSLRaymarchingParticle systemsTypeScriptAstroReactSvelteWeb ComponentsRust → WASMWeb WorkersSharedArrayBufferBinary protocolsTransform feedbackDesign systemsAccessibilityPerformancePhysicsVerlet integrationIncremental parsersVirtualizationEdge renderingLighthouse 100Making seniors quiet
06 / TERMINAL
tcao.sh
type help. or don't. i'm not your dad.press ` anywhere to jump here · Tab completes a command · Shift+Tab exits · ↑↓ history · Ctrl+L clears
07 / RECEIPTS
Receipts
Talk is cheap. Numbers aren't.14
years shipping
zero of them mediocre
6
live programs on this page
every one written from scratch
0
runtime dependencies
on this site. count them.
260k
particles in the hero
at 120fps. on integrated graphics.
2
draw calls for those particles
the gpu does the work. that is what it is for.
1
slot open
it will not stay open
Measured right now, in your browser
–
Frames / second –
Frame time (ms) –
DOM nodes –
Long tasks since you got here Open devtools. Run Lighthouse. Check the network tab. I'll wait.
08 / CONTACT One slot. Bring taste.
I take one engagement at a time and I finish it. If your problem is hard enough, interesting enough, or embarrassing enough, write to me. If it isn’t, write to me anyway. I’ll tell you who to call.