Labs
Real-time, not rendered.
Thirty-one live WebGL experiments — not videos, not pre-rendered loops — each testing a different real-time technique against the same rule that runs through the rest of this site: cool blueprint-blue for what's still being built, solid copper for what's finished, driven by your scroll, your cursor, or real elapsed time.
Experiment 01 — Instanced field
Fields & Instancing
A field that responds to you.
729 elements, rendered in real time, running the same cool-to-warm — unbuilt-to-built — logic that runs through the rest of this site. Every frame, each one also checks its distance to a handful of real spatially-nearest neighbors — a spatial hash, never a full 729² scan — and draws a line to any pair genuinely close enough right now, brightening to copper the closer they sit and fading to blueprint as they drift apart. The field reads as a live constellation, not just individually-hoverable points. Move your pointer through it. Drag to orbit.
A lighter fallback for this device — no real-time 3D.
Experiment 02 — Shader surface
Shaders & Surfaces
A surface that ripples where you point.
A single plane, an 80×80 grid — 6,561 vertices — displaced in real time by GLSL simplex noise and the position of your cursor. Click anywhere and it leaves a real mark: an expanding ring that grows and fades over the actual seconds since that specific click. Up to five ripples run at once — a sixth click retires the oldest — and wherever two overlap, their heights genuinely add: real wave superposition, not one ripple sitting on top of another. The surface still warms from blueprint wire to solid copper the closer any of it sits to your cursor, and as this section scrolls further into view.
A lighter fallback for this device — no real-time 3D.
Experiment 03 — Generative type
Real Content
Words that assemble themselves.
Up to 3,000 points, sampled live from the rendered letterforms of HDR's own service names — Software & AI, Motion & CGI, Brand & Identity, Marketing & Growth, Photography & Film, Strategy & Consulting, Direction & Production — scattered as blueprint wire and assembling into solid copper type as you scroll. It cycles from one name to the next on real elapsed time — or click anywhere to take over: each click steps to the next name and holds it there, until you scroll again and hand control back to the timer.
A lighter fallback for this device — no real-time 3D.
Experiment 04 — Hand-rolled physics
Physics & Motion
Six shapes you can actually push.
Six low-poly forms with real velocity, real friction, real boundary collisions, and — new — real collisions with each other: each shape's hit-radius comes straight off its own geometry, and any overlap resolves with a genuine elastic-ish impulse, momentum conserved along the point of contact, the two shapes pushed apart so neither sinks into the other — no physics engine. Drag one and fling it into a neighbor: both carry real post-impact momentum, read as blueprint wire while still moving, and resolve to solid copper once they settle.
A lighter fallback for this device — no real-time 3D.
Experiment 05 — Bokeh field
Shaders & Surfaces
A lens that sharpens exactly where you drag.
900 billboarded subjects sit scattered through a fixed depth field, 0.5 to 40 meters from the lens, each one holding a real thin-lens circle-of-confusion formula — c = (f²/N)·|S1−S2|/(S2·(S1−f)) — evaluated fresh every frame on the GPU. The same real number that formula outputs sizes each subject's blur disc, shapes its iris (a genuine straight-bladed polygon, roughly nine sides wide open, five sides stopped down), and recolors it: near-zero blur reads a thin blueprint ring, heavy blur resolves to solid copper with a warm glow core. A grid-lined focal plane slides through the field in real time, reading out exactly where focus currently sits. Drag vertically to rack focus from 0.5m to 40m, and scroll or pinch to open or close the aperture from f/1.4 to f/16.
A lighter fallback for this device — no real-time 3D.
Experiment 06 — Force-directed graph
Fields & Instancing
A graph that organizes itself.
20 nodes and 26 edges to start, running real physics every frame: nodes repel each other by an inverse-square law, connected nodes pull together like springs, and damping bleeds off the energy until the whole thing settles into a stable layout — no pre-set positions, no physics engine. Reach in and nudge it: nodes read blueprint wire while still moving, and cool to solid copper as they settle. Click empty space to drop in a new node (up to 30) — it joins the simulation immediately, wired to its nearest neighbor by a real spring so the graph stays connected. Click directly on an edge to cut it; if that splits the graph in two, it stays split — no forced reconnection.
A lighter fallback for this device — no real-time 3D.
Experiment 07 — Raymarched metaballs
Shaders & Surfaces
Shapes that merge like liquid.
A real GLSL raymarcher — up to nine spheres blended with a smooth-minimum signed-distance field, sphere-traced per pixel, never flat circles overlapping. Five drift on independent curves, the sixth is your own cursor, and now clicking anywhere drops a seventh from a fixed pool of three, each one shrinking away over 2.4 real seconds since the moment you spawned it before its slot recycles. Every ball — drifting, cursor, or click-spawned — runs through the same field: color stays blueprint on an isolated cap and only turns copper exactly where two blobs actually fuse, a live measurement of merging, not a fixed gradient. Click to drop your own metaballs into the mix and watch them melt in, then fade.
A lighter fallback for this device — no real-time 3D.
Experiment 08 — Voronoi shatter
Structure & Growth
A wall you can break apart.
22 fragments to start, procedurally cut from one panel by clipping its rectangle against every other seed point's perpendicular bisector — a real 2D Voronoi partition, not a texture. Click the panel and it does two things at once: every shard fires outward with its own real velocity and spin, damping in real time before easing back together — blueprint wire mid-flight, solid copper once it resettles — and a new seed drops exactly where you clicked, re-cutting the whole partition into one more, finer cell, up to a 40-seed cap. Keep clicking to fragment it further; double-click to reset back to a fresh 22-seed panel.
A lighter fallback for this device — no real-time 3D.
Experiment 09 — Real-work skyline
Real Content
26 real projects, rendered as a skyline.
One tower per real HDR case study, fetched live from the database — not a hardcoded list. Each tower's height is scaled only by its title's character length, arranged left to right in the order the database returns them — a cosmetic detail, not a significance ranking. Move your cursor across the row: the nearest towers warm from blueprint wire to solid copper, and hovering one directly surfaces its real title. Click a tower and it's a real link: you land on that exact project's own case-study page, not a dead model.
A lighter fallback for this device — no real-time 3D.
Experiment 10 — Global connection arcs
Real Content
A globe that only draws what's real.
The sphere itself is real now: 134 coastline segments (1,841 points, public-domain Natural Earth 110m data) traced as blueprint line geometry, not an abstract wireframe grid standing in for "a planet." Three real points sit on that same map — Syria, the Netherlands, the UAE, the studio's three actual working countries — connected by three bezier arcs pushed outward from the surface. Auto-rotates on real elapsed time; drag to orbit it yourself. Every real coastline the studio doesn't yet have a footprint on stays cool blueprint wire; the confirmed footprint reads solid copper.
A lighter fallback for this device — no real-time 3D.
Experiment 11 — Kaleidoscope shader
Shaders & Surfaces
A mirror that folds around your cursor.
A full-viewport fragment shader: a drifting simplex-noise field, sampled through a 7-fold polar kaleidoscope fold — seven, because that's the real number of the studio's discipline wings, not an arbitrary choice. Move your cursor: it drives the fold's rotation and center in real time. Click and hold, and the fold count ramps smoothly toward fourteen — exactly double the real seven, one split per wing — the longer you hold; let go and it eases back down. Color runs warm copper near your cursor's center and cools to blueprint further out.
A lighter fallback for this device — no real-time 3D.
Experiment 12 — Ember trail brush
Fields & Instancing
Draw with matter that cools as it drifts.
A fixed pool of 320 instanced cubes, spawned along your cursor's real path and recycled once fully faded — never an unbounded particle count. Each spark starts solid copper, carries its own real upward drift, and cools toward blueprint the longer it survives, like a real ember losing heat as it rises. Move quickly and the trail visibly lags behind you; stop, and the last embers finish drifting and cooling on their own. Click, and 24 embers borrowed from that same pool burst outward in real random directions from the click point — a spark explosion layered on top of the trail, not a replacement for it.
A lighter fallback for this device — no real-time 3D.
Experiment 13 — Persistent terrain
Structure & Growth
A surface that remembers where you pressed.
An 80×80 grid — the same resolution as Experiment 02 — but the displacement here is real per-vertex memory, not a noise field: dragging across it writes into a persistent depth array that stays deformed after you let go, and digs deeper if you press the same spot again. A slow neighbor-averaging pass lets the terrain gently erode over time; freshly pressed ground reads blueprint, settling back toward copper as it smooths out. Double-click anywhere, and eight real averaging passes run instantly on just that local patch — a deliberate "smooth this spot now," instead of waiting on the slow ambient erosion.
A lighter fallback for this device — no real-time 3D.
Experiment 14 — Code-rain
Real Content
Noise that resolves into real words.
1,080 blueprint rectangles fall through a 36-column grid, and every 7 real seconds one column resolves into one of the studio's seven actual discipline names — rasterized as a whole word so Arabic letter-joining and mixed Latin runs both read correctly, never invented text. Click the falling word's column — anywhere along its height, not just the letters — and it resolves right there: the name locks to copper immediately and the next real discipline starts falling, without waiting out the rest of the countdown.
A lighter fallback for this device — no real-time 3D.
Experiment 15 — Orbital gravity
Physics & Motion
Orbits driven by real gravity.
Four bodies orbit a central mass under real inverse-square gravity, integrated with 8 substeps a frame and a soft correction that keeps every orbit circular under sustained cursor input — your cursor's x-position tips the pull ±15% in real time. Click anywhere and a new body spawns exactly there, launched at the same real orbital-velocity formula the other four use, for whatever gravity is actually in effect that instant — a genuine orbit, not a decoration. Up to three of your own bodies can exist at once; spawn a fourth and the oldest retires.
A lighter fallback for this device — no real-time 3D.
Experiment 16 — Star field
Fields & Instancing
57 real stars, plotted where they actually are.
Every point on this sphere is a real star, placed by its actual right ascension and declination — the same coordinates astronomers use, not invented ones. Size and brightness both come from real apparent magnitude: Sirius, at magnitude -1.46, is the largest point out here. Three real constellations — Orion, the Big Dipper, and Cassiopeia — are traced in copper, their traditional star-to-star lines; every other cataloged star stays blueprint, unconnected. Drag to orbit the sphere and go find them.
A lighter fallback for this device — no real-time 3D.
Experiment 17 — Fluid dye advection
Shaders & Surfaces
A 64×64 grid, actually solving for flow.
This is Jos Stam's stable-fluids method running on the CPU, not a shader that fakes it: a real velocity field and a real dye field, both advected every frame and kept incompressible by 20 Jacobi pressure iterations. Move your cursor across the canvas and it injects real velocity and real dye at that exact cell, from your actual on-screen speed. Paint a fast trail and watch it read blueprint, then cool to copper in place as the fluid around it genuinely slows down — the color is the grid's own live speed, not an animation layered on top.
A lighter fallback for this device — no real-time 3D.
Experiment 18 — Flocking
Fields & Instancing
96 agents, three real steering forces, no flight path.
Every frame, each of 96 low-poly agents recomputes three genuine Craig Reynolds forces from its real neighbors within a bounded radius — steer away from whoever's too close, match the group's average heading, drift toward its average position. Color is that alignment made visible: a live, remeasured-every-frame average of how closely an agent's own heading matches its neighbors', so a coordinated flock reads solid copper and a scattering one flashes back to blueprint wire. Move your cursor in — it's a predator, not a magnet — and watch a settled formation break apart, then steer itself back together.
A lighter fallback for this device — no real-time 3D.
Experiment 19 — Reaction-diffusion
Shaders & Surfaces
12,096 cells, one real Gray-Scott equation, no baked texture.
A 144×84 grid of two simulated chemicals evolves under the actual Gray-Scott reaction-diffusion equations — real diffusion, reaction, and feed/kill terms (0.055 and 0.062, the same values that produce this coral pattern in any correct implementation) — ten genuine steps every single frame. Brightness is the real chemical concentration, so the coral shape you see is the actual simulation state; the blueprint-to-copper hue is how fast that cell's chemistry is still changing, so a growing reaction front glows blueprint and a resolved patch settles to copper. Click or drag anywhere to inject a real dose of the reactive chemical and watch the same equations decide what grows back.
A lighter fallback for this device — no real-time 3D.
Experiment 20 — Chladni resonance
Structure & Growth
1,400 grains finding a resonating plate's silent lines.
The real Chladni equation for a square plate — cos(nπx/L)·cos(mπy/L) − cos(mπx/L)·cos(nπy/L) — computed live at every one of 1,400 scattered grains, each one gradient-descending toward the nearest point where that equation actually crosses zero: the real nodal line a physical Chladni plate leaves in sand once it stops vibrating there. Cursor X sets mode n, cursor Y sets mode m — 64 real combinations from 1 through 8 — so retuning the plate is just moving your mouse. A grain reads blueprint while it's still migrating across a vibrating region and settles to copper once it's genuinely resting on a node. Move the cursor and watch the pattern reorganize.
A lighter fallback for this device — no real-time 3D.
Experiment 21 — Cloth simulation
Physics & Motion
560 point-masses, Verlet-integrated, hung from a rail.
A 28×20 grid of point-masses connected by structural, shear, and bend springs, integrated every frame with real Verlet position updates — gravity, a wind force that genuinely drifts over elapsed time, and eight constraint-relaxation passes keeping every spring near its real rest length. The top row is pinned; everything else is free to fall and sway. Grab any point and drag it — the grab raycasts onto the cloth's own live, currently-deformed shape, and letting go hands your real cursor velocity back to the simulation. Still fabric reads copper; anything actually moving — falling into place, caught by the wind, or under your cursor — reads blueprint.
A lighter fallback for this device — no real-time 3D.
Experiment 22 — Julia set shader
Shaders & Surfaces
A fractal shaped by where you point.
A real GLSL Julia set — z = z² + c, iterated up to 130 times per pixel with smooth escape-time coloring, not banded rainbow bands. Move your cursor: it perturbs c around a real, well-known Julia constant, continuously reshaping the fractal. Scroll to zoom. Fast-escaping regions read deep blueprint; points that barely escape warm toward copper; the bounded interior — genuinely stable forever — reads solid copper.
A lighter fallback for this device — no real-time 3D.
Experiment 23 — L-system growth
Structure & Growth
A grammar that grows itself into a tree.
A real Lindenmayer system — the classic X→F+[[X]-X]-F[-FX]+X plant grammar, expanded five generations into 1,488 real turtle-graphics branch segments, each rendered as a tapered instanced cylinder. Nothing is complete on mount: every branch is scheduled to extend from base to tip at its own real moment, in the exact order a turtle would trace it. Actively-extending tips read blueprint; branches that finished growing keep cooling to solid copper for several seconds after. Drag to orbit while it grows.
A lighter fallback for this device — no real-time 3D.
Experiment 24 — Magnetic field lines
Structure & Growth
A field, traced, not drawn.
Two real magnetic dipoles, one of them yours to drag. Eighteen field lines are numerically integrated every time it moves — small steps along the actual local field direction at each point, from the real B = (3(m·r̂)r̂ − m)/r³ equation, not an approximated curve. Color runs blueprint to copper along each line's own length by real field strength, weak to near a pole. Pull the loose end and watch all eighteen re-trace live.
A lighter fallback for this device — no real-time 3D.
Experiment 25 — Particle fireworks
Fields & Instancing
Click, and it actually falls.
Click anywhere to launch a burst — 140 particles thrown out in a real uniform spherical spray, then genuinely pulled down by gravity and slowed by drag, frame by frame. Each spark cools from copper to blueprint and fades on its own real clock, no two the same age. A fixed pool of 900 recycles the oldest sparks first, so however many bursts you stack up, it never grows unbounded.
A lighter fallback for this device — no real-time 3D.
Experiment 26 — Elastic ball pit
Physics & Motion
A pile that actually settles.
150 uniform spheres fall under real gravity into a bounded container, resolved every frame with a genuinely elastic ball-to-ball collision — momentum and kinetic energy both conserved along the real contact normal — broad-phased through a real spatial hash rebuilt every frame, never an all-pairs scan. Only the walls and floor bleed real energy, so the pile genuinely settles over several real seconds instead of bouncing forever: still-moving balls read blueprint wire, resting ones cool to solid copper. Move your cursor through the pit and it sweeps a real localized field, scattering nearby balls like a hand through a real ball pit. Click to toss in a fresh handful.
A lighter fallback for this device — no real-time 3D.
Experiment 27 — Mechanical gear train
Mechanism & Geometry
Six real gears, one true ratio chain.
A six-gear train (10, 28, 12, 20, 14, 24 real teeth, one shared module so every mesh is geometrically true), each gear's teeth built as real trapezoidal prisms, not implied outlines. One hand-crank sets gear one's real angular velocity — drag it, or let the idle auto-crank turn it slowly on its own — and every other gear's speed is computed fresh each frame from the textbook meshing relation ω₂ = -ω₁ × N₁/N₂, chained down the line with the sign flipping at every mesh point. Small, fast gears warm from blueprint wire toward solid copper before the big, slow ones — the same real angular speed driving both the motion and the color. Grab the crank and turn it.
A lighter fallback for this device — no real-time 3D.
Experiment 28 — Jansen linkage
Mechanism & Geometry
A wire skeleton, walking on Jansen's own numbers.
Six legs, three real crank-phase stations 2π/3 apart, each solved fresh every frame from Theo Jansen's own published eight-bar link ratios — the same circle-circle intersection chain his actual Strandbeest linkage runs, closing two genuinely rigid coupler triangles and tracing the real flattened foot-path loop. Blueprint through the aerial return, warming to copper exactly through the flat, planted power stroke — a real per-leg signal, not a fixed gradient. Drag to turn the crank by hand, scroll to nudge it, or leave it — it keeps walking at its own real cadence.
A lighter fallback for this device — no real-time 3D.
Experiment 29 — Strange attractor
Physics & Motion
Almost the same start. Nowhere near the same path.
A real chaotic system — the Aizawa attractor (a=0.95, b=0.7, c=0.6, d=3.5, e=0.25, f=0.1) — integrated live with genuine fourth-order Runge-Kutta, eight real substeps a frame. One reference trajectory traces a glowing trail along the actual curve; 239 more start within a thousandth of a unit of it and are integrated completely independently from there, off the exact same equations. Within seconds they've visibly split from a single point into a diffuse cloud — real sensitive dependence on initial conditions, not a scripted spread. Color runs blueprint to copper by each point's own real local speed, warming further the more a point has actually strayed from the reference. Move your cursor and two of the real constants shift live, reshaping the attractor's wings as you go — click to reseed the swarm from wherever the reference sits right now.
A lighter fallback for this device — no real-time 3D.
Experiment 30 — Circuit router
Mechanism & Geometry
A board that re-routes itself the instant you move a pin.
A real congestion-aware A* search — 312 grid vertices, four-directional moves only, states augmented by incoming direction so bends carry a genuine cost — solves every trace between up to 18 terminals as a strictly axis-aligned Manhattan route, discouraged from crossing another pin or a cell an earlier trace already claimed this pass. Traces mid-recompute read blueprint; once resolved they settle to copper, and a small current visibly walks each settled trace's own real path length. Drag any pin anywhere on the grid and watch every route re-solve live; click empty space to drop a new terminal, auto-wired to its nearest neighbor.
A lighter fallback for this device — no real-time 3D.
Experiment 31 — Glide dynamics
Physics & Motion
A real glider, banking on your cursor's word.
A real point-mass flight model: lift = 0.5·ρ·v²·S·CL(α) and drag = 0.5·ρ·v²·S·CD(α), both functions of a genuine angle of attack, summed each frame with real gravity and integrated into an actual glide — a settled trim near 7:1. The nose always points where the plane is really going; banking tilts the real lift vector sideways, and that sideways pull is what turns it. Move the cursor to bank and pitch six real planes in flight, click to hand-throw a new one.
A lighter fallback for this device — no real-time 3D.
Real-time WebGL via Three.js / React Three Fiber across all thirty-one experiments — not video loops. Each degrades to a static state on devices that prefer reduced motion or can't run WebGL.
Navigate
01 / 31Instanced field