---
id: "2115818357144662038"
source: https://x.com/julihespenheide/status/2115818357144662038
author: "Julian Hespenheide (@julihespenheide)"
media: "gif, 1800x970, 4.8s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Shuffling Tile Mosaic Music Note

## Summary
A looping GIF of a beamed double music note built from a grid of small tiles on a vivid mint background, where every tile keeps reshuffling between black squares, half-square triangles, dotted dice faces and yellow wedges. A compact study in generative pattern systems: a fixed silhouette, a tiny tile vocabulary and random reassignment produce endless variety.

## Style
- Theme: light (saturated mint field)
- Mood: playful, glitchy, rhythmic, graphic
- Tags: generative-art, tile-mosaic, truchet, pixel-glyph, pattern-system, loop, music
- Category: Art, Motion

## Palette
| Role | Hex |
|---|---|
| Mint background | #01FF94 |
| Alt mint | #00FE95 |
| Grid line aqua | #03F3A7 |
| Tile black | #030502 |
| Tile yellow | #E9EF3D |
| Shadow green | #278B5A |
| Tile white | #FFFFFF |

## Typography
No text. The only figure is a pictogram (two eighth notes joined by a beam), drawn entirely with tiles rather than a typeface.

## Layout
- About 1.86:1 (1800x970). A faint square grid of about 22px cells with 1px aqua lines covers a centred region about 50% wide and 85% tall.
- The note silhouette spans about 14 x 17 cells and sits slightly above centre: two stems, a top beam three cells thick and two note heads at the bottom-left of each stem.
- Tiles fill cells exactly with no gaps or radius; there are no shadows or depth.

## Elements
- Solid tile: a black square.
- Triangle tiles: a square split on the diagonal, one half black and the other yellow, white or mint (transparent), in any of 4 rotations.
- Dot tiles: black squares with 1 to 9 small yellow or white dots like dice faces (dots about 2px).
- Stripe tiles: black with two or three thin vertical slots.
- Edge cells: some cells along the outline switch between filled and empty, so the silhouette edges flicker while the overall note stays readable.

## Motion
- 0.2s, 1.1s, 1.9s, 2.8s, 3.6s, 4.5s: every frame shows a fully reshuffled set of tiles, so the pattern changes at roughly 8 to 12 steps per second.
- Swaps are instant (no easing); triangle tiles appear to rotate in 90deg steps.
- Yellow density rises and falls (more yellow at 2.8s, mostly black at 1.1s and 4.5s), giving a pulse of about 1.7s.
- The loop is 4.8s and restarts seamlessly.

## Rebuild it
1. Define the glyph as a 14 x 17 boolean mask (array of strings with "#" for filled cells).
2. Render a CSS grid with `grid-template-columns: repeat(14, 22px)`, `gap: 0`, on a mint page with a repeating linear-gradient grid behind it (1px #03F3A7 every 22px).
3. Make a Tile component that picks a variant (solid, triangle, dots, stripes) and a rotation; draw triangles with `clip-path: polygon(0 0, 100% 0, 0 100%)` over a coloured base and dots with radial-gradient backgrounds.
4. Run a `setInterval` of 110ms that reassigns random variants to all cells; randomly toggle about 6% of edge cells on and off for the jitter.
5. Optionally ramp yellow probability with `0.3 + 0.2 * sin(t * 3.7)` to recreate the pulse.
6. Use Motion only for an optional rotate snap (`transition={{ duration: 0 }}`) so swaps stay crisp; respect reduced motion by slowing to 1 swap per second.

## Generation prompt
A looping pixel-art animation on a bright mint green background with a faint aqua grid: a beamed double music note made of small square tiles that constantly reshuffle between black squares, black and yellow diagonal half-triangles, dotted dice-like faces and thin stripes, with a few white wedges; flat, crisp, graphic, generative, glitchy rhythm.