A working archive of ideas and tools.

Hybrid Theory: Brand Kit

A complete brand design system extracted from Linkin Park's 2000 album Hybrid Theory. Covers the full color palette (Void, Concrete, Gravel, Ash, Smoke, Bone, Chalk, Blood, Crimson, Rage), a three-font type system (Bebas Neue display, Space Grotesk body, IBM Plex Mono labels), UI component library, spacing scale, motion tokens, and a full CSS variable reference, all drawn from the album art's urban decay aesthetic.

Color palette extracted from album art: poster background, dragonfly figure, crimson soldier silhouette, and grunge collage textures.

BMO: abandoned.pxl

Isometric pixel art of an abandoned BMO console, overgrown with vines and mushrooms. Rendered at 112px native width and scaled 6× with nearest-neighbor interpolation. Screen glow pulses, vines sway, fireflies drift. Toggle the pixel grid or pause the animation.

Isometric study. Overgrown teal console, vines, mushrooms. Screen glow and fireflies are code-driven.

Galaxy Lab: spiral.js

Interactive spiral galaxy simulator with 19 real-galaxy presets: Milky Way, Andromeda, M51, M87, and more. Monochrome canvas renderer with differential rotation, barred spirals, ring galaxies, ellipticals, and collision modes. Pan, zoom, drag, and tune arm count, tightness, speed, and particle density in real time.

Monochrome galaxy lab. 19 presets from the Local Group to merger events. All physics is approximate; beautiful anyway.

Entropy: entropy.html

A particle simulation visualising the tension between order and chaos: ordered particles resist entropic influence while chaotic ones drift and corrupt.

The Cosmic Web: cosmic-web-2.html

An interactive 3D atlas of the cosmic web: 160 procedurally generated objects across filaments, with bloom post-processing, discover mode, and redshift timeline filtering.

The Cosmic Library: cosmic_library.html

A first-person walkthrough of an infinite library: shelves stretching into starfields, floating books, and galaxies behind the spines. The corridor wraps, so you never arrive.

Spatial Case Law Kanban

A 3D WebGL kanban board for tracking South African case law across a 30-day study window. Cards grow, glow, and pulse based on urgency as you scrub the timeline; click to advance a case through To Brief → Briefed → To Revise → Mastered.

Three.js + OrbitControls + UnrealBloomPass. Single HTML file, no framework.

Jado Blob Studio: jadoblobstudio.html

A single-file playground for an animated blob character across three interactive stages: a checkbox-driven AI input card, a character-only variant, and a fully customizable morphing blob with mouse-tracked eyes, five expressions, and sparkle/press physics. Pure CSS and vanilla JavaScript, no canvas, no framework. A live control panel tunes colors, shape, size, float speed, eye style, and scene, with settings persisted to localStorage.

Vanilla JS + CSS only, no canvas or framework. Three tabs share one floating glass-header shell; the Studio Blob stage adds mouse-tracking eyes, an idle-sleep timer, and a live control panel with localStorage persistence.

Energy: energy-particle.html

A canvas particle field that assembles into the word "ENERGY" from thousands of sampled points, dispersing into a roaming scatter on hover and reassembling on exit.

Vanilla JS + canvas, no framework. Text is rasterised off-screen to sample particle positions; mouse proximity drives a radial repulsion force with velocity-based falloff.

DOT/MATRIX: dotmatrix-design-system.html

A kinetic icon system built on a 14×14 dot lattice, where twelve living pictograms (power levels, defrost, heat drink, loading, success, error, heart, scan) are pure functions of time rendered as SVG circles. Includes a state-machine demo with live speed and density controls, plus a full specification table of motion families, durations, and easings.

Vanilla JS + SVG, no framework. Each icon is a render(t, grid, n) function driven by a single requestAnimationFrame loop; brightness per dot is recomputed every frame rather than keyframed.

Golden Ratio: golden-ratio.html

A Fibonacci spiral built from thirteen nested squares, each scaled by 0.618 and rotated 90° from the last. Every square's quarter-arc breathes in and slides diagonally out on a staggered, yoyo-ing loop, tracing the spiral in fragments rather than one static curve.

GSAP + DrawSVGPlugin. A single base square/arc is cloned 12 times in JS, each clone shrunk by the golden ratio (0.618) and rotated 90° with position offsets computed per quadrant. Each arc gets its own repeating yoyo timeline, staggered into a master timeline; clicking the canvas toggles the master timeline's timeScale between 0 and 1 to pause/resume.