---
id: "2115789995860517254"
source: https://x.com/emilkowalski/status/2115789995860517254
author: "Emil Kowalski (@emilkowalski)"
media: "video, 4096x2398, 46.2s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Dot Matrix Interaction Lab Gallery

## Summary
A dark gallery of paired interactive experiments rendered as fields of tiny dots: an orbiting accretion disc, a toggle switch grown from liquid, metaball mercury, a draggable SVG path, a cursor torch over text, contour lines, a particle stir, a word filling with liquid and a circular loupe. Each panel carries a blue bracketed label, a short instruction and the governing equation, making it a great reference for physics-driven micro-interactions.

## Style
- Theme: dark (charcoal canvas, grey dots, blue accents)
- Mood: experimental, scientific, tactile, quiet
- Tags: dot-matrix, generative, physics, spring-animation, metaballs, monospace, interaction-lab
- Category: Art, Motion

## Palette
| Role | Hex |
|---|---|
| Canvas | #10110E |
| Panel | #161615 |
| Hairline | #232425 |
| Dim dot | #3B3E40 |
| Caption grey | #6E6D69 |
| Bright dot | #D9D9D6 |
| Accent blue | #3A6FD8 |

## Typography
- Labels: monospace uppercase inside square brackets, blue, about 9px with 0.12em tracking. JetBrains Mono 500.
- Instructions: lowercase mono, grey, right-aligned at the top of each panel, about 9px.
- Equations and stats: mono 8px along the bottom of each panel (math symbols, units, counts).
- Code listings: mono with dim line numbers.
- The word in the liquid demo is a heavy rounded sans rendered in dots, about 12% of the panel height (Nunito 900 as a source shape).

## Layout
- About 1.71:1 (4096x2398). Each screen holds two square-ish panels side by side, about 46% of the width each, with roughly 4% gutters.
- Panel anatomy: label top-left, instruction top-right, canvas in the middle, equation line at the bottom, panel name caption beneath in grey.
- No visible card borders or radii; separation comes only from spacing and a faint #232425 rule.
- Dots sit on a fine grid of about 4px pitch; size and brightness encode the field value.

## Elements
- Accretion: concentric rings of dots with a bright core and stray dots orbiting it.
- Grown to shape: a pill switch outline drawn in dots with liquid blobs that flow into the knob.
- Mercury: dithered metaball blobs, one tinted blue, that follow and split from the cursor.
- Path: a code listing for a bell icon beside the drawn icon, with a slider that edits the path.
- Source and torch: code text with stiffness, damping and mass values; a text page revealed only inside a cursor-held light.
- Contours: wobbling iso-lines with blue highlighted segments.
- Stir: a crescent of particles swirling around the pointer.
- Level: a tilted dotted word with a blue liquid line that sloshes inside it.
- Loupe: a circle magnifying small print, with text set along its rim.

## Motion
- The 46s recording pages through pairs about every 8s (1.8s, 10.2s, 18.5s, 26.8s, 35.1s, 43.5s).
- Interactions are spring-driven: values such as stiffness 120, damping 14 and mass 1 are shown on screen, giving a soft 400ms to 700ms settle with slight overshoot.
- Fields update every frame; particles in the stir demo trail for about 1s; the liquid line in the level demo sloshes with a 1.2s decay.
- Page changes are hard cuts or quick 200ms fades.

## Rebuild it
1. Page: `bg-[#10110E]` with a two-column grid (`grid-cols-2 gap-16 max-w-6xl mx-auto`), each panel a `figure` with a header row (label and hint) and a footer row (equation).
2. Each canvas: a 2D canvas sized to device pixels; on every frame compute a scalar field (distance to blobs, noise or text mask) and draw dots on a 4px grid with radius `0.4 + v * 1.4` and alpha `0.2 + v * 0.8`.
3. Track the pointer with Motion `useSpring(x, { stiffness: 120, damping: 14, mass: 1 })` and feed the sprung value into the field.
4. Metaballs: sum `r^2 / d^2` per dot and threshold at 1; tint dots from one ball blue.
5. Text masks: draw the word to an offscreen canvas once, sample its alpha per dot, and add a sine-based liquid line clipped by the mask.
6. Labels: Tailwind `font-mono text-[9px] uppercase tracking-[0.12em] text-[#3A6FD8]`.

## Generation prompt
A dark charcoal screen showing two side-by-side experimental panels made entirely of tiny grey dots: a glowing orbiting ring of dots, liquid metal blobs with one blue blob, a swirl of particles, contour lines with blue highlights and a tilted word filled with a blue liquid line; small blue monospace labels in brackets, faint monospace equations beneath each panel; minimal, scientific, quiet, high contrast.