UI Lab is a set of seven interactive UI experiments by Bruno Jaamaa.
== WHAT IS THIS ==
────────────────────────────────────────
UI Lab is a set of seven interactive UI experiments by Bruno Jaamaa, built between 30 September and 1 October 2026 inside his design guide, Frontend Design Basics. Each one runs on its own page: Pixel to HD, Shape-Aware ASCII, Ease Racetrack, Micro-interaction Bench, Event Horizon, Infinite Zoom and 3D Pipes. They are built with three.js, React Three Fiber, GLSL shaders, GSAP, Canvas 2D and CSS. The demos are live at frontenddesignbasics.vercel.app/lab, with the code under the MIT licence.
== </the pieces> ==
────────────────────────────────────────
01
Pixel to HD
Sep 2026
An image that resolves from flying cubes to 1-bit dither to full HD.
phase 02: cubes cross the threshold plane and turn into 1-bit ditherstill image · the live demo loads on request
Pixel to HD is a reveal in four phases: flight, threshold, develop and chrome. A square crop of the guide's banner is rebuilt as 32,400 instanced cubes (10,000 on a phone) that fly through a see-through plane. Past the plane each cube is drawn as 1-bit dither, then the picture develops tile by tile into the full image and ends on a chrome mark. Every phase is driven by a single progress value, so the same component plays on its own, scrubs from a slider or follows page scroll.
three.js · react three fiber · drei · glsl · gsap
02
Shape-Aware ASCII
Sep 2026
A 3D scene drawn in text, with glyphs chosen to follow each edge.
the dodecahedron: plain tone ramp left of the split, shape-matched glyphs rightstill image · the live demo loads on request
Shape-Aware ASCII renders a lit 3D object using only monospace characters. A plain ASCII filter picks a glyph by brightness, which turns edges into noise. Here each 6 by 10 pixel cell is sampled inside and around itself, and where an edge crosses the cell it gets the glyph whose own shape is closest, out of 95 printable characters measured at load. Flat faces keep a simple tone ramp. A draggable split compares the result with the plain ramp. There are two subjects, a dodecahedron and a sphere of points.
mid-race at quarter speed: twelve eases, same distance, same durationstill image · the live demo loads on request
Ease Racetrack is a tool for choosing an easing curve. Twelve GSAP eases run the same distance in the same duration, one lane each, so the ease is the only thing that differs. The move can be switched between position, scale, blur, rotation and clip-path, slowed to quarter speed or scrubbed by hand. Each lane shows its curve, a live value and a note on when to use it, and clicking a lane copies the exact GSAP line. It outputs GSAP strings only.
gsap · svg · css · react
04
Micro-interaction Bench
Oct 2026
Six everyday components, each shown in all eight states side by side.
six components across eight states, with a live cell at the start of each rowstill image · the live demo loads on request
Micro-interaction Bench lays out a button, toggle, checkbox, tabs, text input and toast, each in eight states at once: rest, hover, focus, pressed, loading, success, error and disabled. The first cell of every row is a working component. The rest are the same markup with a data attribute naming the state, so CSS draws each state and its transition. A GSAP timeline flips the attribute so every transition plays in turn, and one CSS variable slows everything to quarter speed. It is black and white only.
css · gsap · react
05
Event Horizon
Sep 2026
A raymarched black hole that bends its disk and a wordmark into arcs.
the amber palette: the disk and the wordmark bent around the holestill image · the live demo loads on request
Event Horizon is a black hole drawn in a fragment shader. Each pixel fires a ray that bends under gravity over up to 200 steps. Where a ray crosses the disk it is shaded with a temperature falloff, Doppler brightening on the approaching side and streaks that orbit at different speeds. Rays that escape read a star field and a wordmark behind the hole, so the type wraps into a ring. Dragging tilts the view. It is marched at half resolution, which shows as soft edges on standard screens.
three.js · react three fiber · glsl · gsap
06
Infinite Zoom
Oct 2026
A seamless endless zoom through four nested screens, in plain Canvas 2D.
layer 1: the desktop, with the desk photo that holds the next layerstill image · the live demo loads on request
Infinite Zoom is a looping zoom through nested screens: a Windows 95 desktop, a photo of a desk on it, the monitor on that desk, a phone drawn on the monitor, one pixel of the phone, and inside the pixel the desktop again. Every layer is drawn as vectors in Canvas 2D, with no WebGL and no image files. The zoom runs about the fixed point of the chained layers, so the frame after one full cycle is identical to the first and the loop has no seam.
canvas 2d · react
07
3D Pipes
Sep 2026
The 3D Pipes screensaver rebuilt for the browser, 16 colours and all.
classic mode: six pipe colours, dithered to a 16-colour palettestill image · the live demo loads on request
3D Pipes rebuilds the Windows screensaver for the browser. Pipes random-walk through a 3D grid, and the whole scene is two instanced meshes: one of cylinders, one of sphere joints. The canvas renders about 480 lines tall, is upscaled with nearest-neighbour sampling, then dithered to a 16-colour palette through a Bayer 4x4 matrix. A neon mode swaps in a glow shader with bloom. Because three.js is a large download, a Canvas 2D renderer draws the same pipes first and hands over once WebGL has drawn.
three.js · react three fiber · drei · postprocessing · glsl · canvas 2d
role & context
Solo: the design and the code of every piece. All seven were built inside the Frontend Design Basics guide.
== </the story> ==
────────────────────────────────────────
UI Lab is a set of seven interactive UI experiments by Bruno Jaamaa. Each one is a small, finished piece of interface or graphics work that runs on its own page in the browser.
The pieces were built inside Frontend Design Basics, the design guide Jaamaa started on 28 September 2026. That guide holds 40 live pieces made by mixing the tools it documents. These seven are ones that stand on their own, and each demonstrates one of the guide's principles. All seven were built between 30 September and 1 October 2026, each in one or two commits.
Four are WebGL scenes built with three.js and React Three Fiber: Pixel to HD, Shape-Aware ASCII, 3D Pipes and Event Horizon, which is a single raymarched shader. Infinite Zoom is plain Canvas 2D. Ease Racetrack and Micro-interaction Bench are teaching tools built from DOM, SVG, CSS and GSAP.
Each piece was checked on the live site on 2 October 2026: it moves, it holds still when reduced motion is switched on, it logs no console errors, and it does not overflow at phone width. Each is described below with a picture and a live demo. Jaamaa designed and built all seven on his own.
== </architecture> ==
────────────────────────────────────────
The pieces live in the guide's Next.js 16 site. Each has its own route at /lab/<id>, inside a shared frame that adds a scrub slider, a pause control, a reduced-motion switch and an error boundary. The guide keeps a small budget of live WebGL contexts, two on a desktop and one on a phone, so each piece shows a still poster until it is near the viewport and then starts.
== </key decisions> ==
────────────────────────────────────────
DECISION 01
Pixel to HD: every phase is driven from one progress value, so the same component plays on its own, scrubs from a slider or follows page scroll.
DECISION 02
Shape-Aware ASCII: shape matching is limited to cells with real local contrast, and flat faces keep a simple tone ramp.
DECISION 03
Ease Racetrack: distance and duration are fixed across lanes, so the ease is the only variable.
DECISION 04
Micro-interaction Bench: swapped labels such as Save, Saved and Try again are stacked in one grid cell, so the widest sets the width and nothing jumps.
DECISION 05
Event Horizon: the rays are marched at half resolution into a float buffer, then upsampled with glow, tone mapping and grain.
DECISION 06
Infinite Zoom: the zoom runs about the fixed point of the chained layers, which makes the frame after one full cycle identical to the first.
DECISION 07
3D Pipes: a Canvas 2D renderer draws the same pipe state with the same camera and dither until WebGL has drawn, then hands over without a restart.
== </where it doesn’t work> ==
────────────────────────────────────────
Every piece was built between 30 September and 1 October 2026, each in one or two commits, so none has been through a second round of revision. Pixel to HD ends on the guide's own logo, and its source image cannot be swapped without editing the code. Shape-Aware ASCII has only two subjects, and the sphere reads as noisier than the solid. Ease Racetrack outputs GSAP strings only, with no CSS equivalent. Micro-interaction Bench is black and white, and nothing in it is packaged for reuse. Event Horizon shows soft, slightly blocky edges on a standard-density screen. Infinite Zoom only plays or scrubs, with no pointer control. 3D Pipes is one file of more than a thousand lines.
