SAMMIILabs

Labs

Where the rule stops being obedient.

11 experiments, studies and lab projects: shaders, physics, typography, a pixel village in VS Code. Built to understand something, kept because they still do. The finished work is on sammii.dev.

Experiments

One idea each, built to see it move.

  • Balloon Bonanza screenshot

    Balloon Bonanza

    React, TypeScript, Matter.js, Vite

    A physics playground of 100 balloons that float, bounce, and can be grabbed and flung across the screen. Matter.js has no buoyancy, so the float is faked from tuned gravity, density, and air friction; each balloon is a two-body compound with a wobbling knot. Holds 60fps across 200+ bodies and 300+ constraints.

    Try it View code
  • Day Lite screenshot

    Day Lite

    React, JavaScript, Mapbox GL, Vite

    Interactive globe visualising daylight patterns worldwide in real time using geospatial data from MapBox GL.

    Try it View code
  • Kinetic screenshot

    Kinetic

    Next.js, Framer Motion, TypeScript, Tailwind CSS

    25 interactive demos showcasing spring physics, layout animations, gesture-driven interactions, SVG morphing, scroll-linked parallax, and more. Each demo is self-contained with adjustable parameters and real-time feedback.

    Try it View code
  • Liquidity screenshot

    Liquidity

    Next.js, Typescript, GSAP, Rapier2D

    Experimental Next.js project exploring advanced animation techniques for creating liquid text effects through multiple approaches.

    Try it View code
  • Refract screenshot

    Refract

    WebGL, GLSL, JavaScript

    Text-to-shader generative art tool. Type any word or phrase and watch it rendered as a unique real-time GLSL shader, with colour, form, and motion derived from the semantic feel of the input.

    Try it View code
  • Spectra screenshot

    Spectra

    Three.js, GLSL, Web Audio API, Next.js

    Audio-reactive shader visualiser driven by microphone input. Domain-warped simplex noise fragment shader with bass, mid, and high frequency bands mapped to warp intensity, hue rotation, and shimmer, all running in real time on the GPU.

    Try it View code
  • Tailwind Colour Creator screenshot

    Tailwind Colour Creator

    React, TypeScript, Vite, Tailwind CSS

    Colour palette generator that produces Tailwind-accurate 11-step scales from any base colour. Derives lightness, saturation, and hue curves from official Tailwind palettes, with click-to-copy swatches and CSS variable or config output.

    Superseded by Gamut.

    Try it View code

Studies

Longer looks at a single question.

  • Creative Coding screenshot

    Creative Coding

    p5.js, JavaScript

    15 browser-based visual experiments treating a single photograph as raw material. Pixel data drives particle systems, edge detection, flow fields, Voronoi partitions, kaleidoscopes, and more; each sketch is unique to the source image.

    Try it View code

Lab projects

Bigger builds that never needed to be products.

  • Beyond Light VR screenshot

    Beyond Light VR

    Three.js, WebXR, GLSL, Vite

    WebXR reconstruction of my MA dissertation installation. A journey through the visible light spectrum from infrared to ultraviolet: quotes screen-printed on acetate walls remain invisible until the final UV phase, where they blaze to life with a custom GLSL UV-reactive shader before the room dissolves into white.

    Try it View code
  • Celestial map screenshot

    Celestial map

    D3.js, HTML5 Canvas, Vite

    Interactive star globe rendered on Canvas using D3 orthographic projection. Realistic star colours from B-V colour index, magnitude-scaled sizes with glow effects, constellation lines and labels, Milky Way band, drag-to-rotate with idle spin, and a time slider that shifts the sky in right ascension.

    Try it View code
  • Isle screenshot

    Isle

    TypeScript, Canvas API, VS Code Extension API, Astronomy Engine

    VS Code extension that visualises active Claude Code agent sessions as pixel-art characters in an Animal Crossing-style village. Agents sit at desks in an office, wander outdoors, and display real-time status. Dynamic time-of-day, seasonal changes, a pond, trees, and flowers.