Patrick Jackson

UI LAB · COMPOSE MULTIPLATFORM · WEBASSEMBLY

Explorations

Twenty-one experiments in what Jetpack Compose can render when it's pushed — runtime shaders, canvas physics, backdrop-blur glass, gesture springs, kinetic typography, and a design system that switches between Material 3 Expressive and Liquid Glass at runtime. One Kotlin codebase, compiled to WebAssembly for this page and building unchanged for Android and iOS.

Launch the lab →≈12 MB download · needs a WasmGC browser (any evergreen browser)
01

Aurora Veil

Northern lights in a runtime shader — noise ribbons over a star field.

shader · sksl
02

Gooey Metaballs

Liquid blobs that chase the pointer and merge.

canvas · gesture
03

Glass Deck

A frosted-glass player with live backdrop blur, à la haze.

glass · blur
04

Constellation

A particle field that links its neighbours and bends to your touch.

particles
05

Flow Field

Two thousand particles surfing Perlin noise, leaving phosphor trails.

particles · noise
06

Kinetic Type

Per-glyph choreography on a live text layout.

typography
07

Orbit Menu

A radial menu on spring physics — spin it, fling it.

gesture · physics
08

Elastic Deck

Rubber-band card swiping with tilt and springy re-stacking.

gesture · spring
09

Magnetic Dock

Dock icons swell under the pointer, macOS style.

gesture · spring
10

Liquid Gauge

A vessel of sloshing sine waves — drag to fill.

canvas · waves
11

Blob Morph

Harmonic blobs breathing between random species.

canvas · morph
12

Doom Fire

The 1993 PSX fire automaton, drag to torch.

canvas · retro
13

Ink Reveal

Scene changes blooming from your tap as spreading ink.

transition · mask
14

Isometric City

A cube city assembling itself on staggered springs.

canvas · fake-3d
15

Signal Tree

A recursive tree growing live, swaying in Perlin wind.

generative
16

Chart Morph

One dataset morphing between bars, line and radial.

dataviz · motion
17

Brushed Knob

A machined rotary knob with magnetic detents.

gesture · skeuomorph
18

Portal

A ticket that expands into a full scene on springs.

transition · spring
19

Marquee Wall

An endless tilted wall of drifting poster tiles.

fake-3d · motion
20

Ripple Shader

Tap-driven refraction ripples in pure SKSL.

shader · gesture
21

Chameleon

A complete mini-app (feed, component gallery, settings) built from one adaptive UI kit — Material 3 Expressive or Liquid Glass, switched live, with an in-app teardown of how it works.

design-system · toolkit

How it's built

Everything is drawn by Compose Multiplatform 1.11 (Kotlin 2.3, Skia via WasmGC) — no HTML, no CSS, no Material components. The demos sit on four small reusable libraries extracted along the way: aurora-glass (backdrop blur in the spirit of Chris Banes' haze),aurora-shaders (SKSL/AGSL runtime shaders with graceful fallbacks),aurora-particles (a pooled particle engine), and aurora-motion(springs, choreography, Perlin noise) — plus aurora-adaptive, the dual-design-language component kit behind demo 21.

Source lives incompose-explorations/in this site's repo, with research notes on the scene that inspired it and on the M3 × Liquid Glass adaptive system indocs/.