lab.hoangle.xyz
Interface experiments by Hoang Le. This is where the effects live that hoangle.xyz refuses on principle — canvas, shaders, motion, typography pushed until something interesting happens.
9 experiments
- 01Type Pressure FieldA lattice of variable-font glyphs that deforms under pointer pressure and springs back.Move or drag the pointer across the field; dwell to deepen the well.Canvas 2DRoboto Flex (wght, wdth)Spring physicsLive
- 02GPGPU Name Particle MorphA quarter-million GPU particles form any typed word, scatter under force and spring back.Type a word and press Enter, change the particle count, or move the pointer and press Scatter.Three.jsWebGL2 GPGPURoboto FlexLive
- 03Scroll-Driven Poster TerrainA headline raster becomes layered contour terrain driven by scroll and editable controls.Scroll the terrain, edit the headline, or adjust light and altitude with the keyboard.Canvas 2DRoboto FlexHeightfieldLive
- 04Ink Diffusion LetterformsPointer strokes inject dye into a WebGL2 fluid field masked by heavy INK letterforms.Drag through the letterforms to inject ink, then switch its rendered reading.WebGL2GLSL stable fluidsLetterform masksLive
- 05Refraction Material LabDraggable translucent panels refract live typography while material controls expose thickness, roughness, dispersion, and light.Drag or arrow-key the panels, then sweep thickness, roughness, dispersion, and light angle.Three.jsMeshPhysicalMaterialCanvas 2D typographyLive
- 06WebGPU Compute FlowfieldA raw WebGPU compute pass drives agents through a vector field that visitors paint and persist.Drag to paint currents, steer the arrow/Space brush, and tune the agent count while the HUD reports p95.Requires WebGPU browserWebGPUWGSL computeStorage buffersAdditive trailsLive
- 07Brief BuilderA branching project-intake form driven by a state machine that stays visible while you answer.Choose a project type, follow the branch the machine selects, and copy the resulting brief.XState v5react-hook-formMotionTypeScriptLive
- 08ReorgA generated org of up to five thousand people, laid out as a tidy tree you can pan, search and rewire.Drag to pan, ⌘-scroll to zoom, click a node to focus its branch, press m to move someone under any manager.Tidy tree layoutCanvas 2D + DOM LODCommand-log undoTypeScriptLive
- 09RecalcA spreadsheet turned inside out: 104,000 cells, a hand-written formula engine, and one keypress that flips the sheet into the dependency graph that just recomputed it.Type formulas, select ranges, insert and delete rows, build a circular reference on purpose — then flip.Pratt parserDependency DAGHand-rolled windowingARIA gridLive