ABCs

A 26-day WebGL design sprint: one interactive 3D letter per day, A through Z. Each entry uses a distinct typeface and showcases a different Three.js capability, from ambient lighting and bloom post-processing to skinned mesh joints and WebXR. The constraint is the point: one letter, one font, one technique, one day.

Client	Personal project
Role	Interaction Designer. WebGL Development, Typography
Deliverable	Interactive 3D letters (Three.js), 18 of 26 complete
Venue	danielchurchill.dev/work/personal/abcs

Sprint Progress

18 of 26 letters complete. Click any completed entry to view the interactive piece.

A Abril Fatface AmbientLight B Berkshire Swash BufferGeometry C Cinzel CubeCamera D DM Serif Display DecalGeometry E Ephesis EffectComposer F Fjalla One FogExp2 G Graduate GPUComputationRenderer H Hahmlet HemisphereLight I IBM Plex Serif InstancedMesh J Joti One JoltPhysics K Karla KTX2Loader L Lora Bold LatheGeometry M Montserrat MeshPhysicalMaterial N Nixie One NodeMaterial (TSL) O Oleo Script OscillationField P Pinyon Script PathFollowing Q Quicksand Quaternion SLERP R Raleway RenderTarget

S Syne

T Teko

U Ubuntu

V Varela Round

W Work Sans

X Xanh Mono

Y Yanone Kaffeesatz

Z Zilla Slab

Format

Every entry is self-contained: one HTML page, one JavaScript module, one font loaded at runtime via Three.js's FontLoader. No shared state between letters beyond a small base scene utility. The constraint forces variety: each technique has to be learned, implemented, and polished in a single sitting.

Fonts are sourced from Google Fonts and converted to Three.js's JSON typeface format. Techniques span the full breadth of the Three.js API: lighting models, geometry generation, post-processing passes, shader materials, physics-adjacent tricks, and experimental extensions like WebXR.

Stack

Three.js, Vite, vanilla JavaScript. No framework overhead; each entry is as close to the metal as possible. The build pipeline handles font conversion and module bundling; everything else is hand-written per letter.