Project 02 / 3D / 2025
Kinetic Type Lab
Self-initiated toolA browser-based type playground that turns a word into architecture, then lets you photograph it.
01 / Brief
A letter is a building with one room.
Type is usually treated as a surface. Kinetic Type Lab asks what happens when it becomes a room. The brief was to build a tool that a designer could open in a browser, type a word into, and leave with a poster that felt designed rather than generated.
The constraint was intentional: one word at a time, one light rig, six material studies. The lab should feel like a piece of studio equipment, not a toy with a thousand sliders.
02 / Approach
Constrain the controls. Open the output.
I built a small extrusion pipeline around Three.js text geometry, then limited the controls on purpose. Six material presets, three camera moves, and a single light rig. The constraints make the output feel authored.
A Canvas 2D pass adds grain, crop marks, and the project's print metadata before export. The interface uses the same typographic grid as the artwork, so the tool and the output share a visual language.
“A letter is a building with one room.”
03 / Build
A real tool, not a case-study mockup.
The lab supports live text entry, real-time material swapping, orbit controls, and PNG export at 2400 × 3000. A custom depth material keeps the type readable from extreme angles.
GSAP handles the interface choreography; the renderer pauses when the tab is hidden. The entire experience is client-side and requires no account, upload, or server.
- 01Live text entry with beveled 3D geometry.
- 02Six material presets from chrome to translucent clay.
- 03Orbit camera with authored poster crops.
- 04High-resolution PNG export with print metadata.
K
Ψ
TYPE
06
2400
× 3000
04 / Outcome
What it leaves behind.
The lab is intentionally narrow: one word, six materials, one light rig. That constraint is the point. The next iteration would add a typeface importer, a saved-poster gallery, and a small set of curated starting words.