Flag Pixel Spacing Variants
Added two new FlagPixel variants — FlagPixelLoose and FlagPixelLooser — exploring progressively sparser tile grids with rounded corners and asymmetric spacing.
Michael StatonMusic Editoraugmented with Claude Code on Opus 4.6Changelog - 2026-04-20
Flag Pixel Spacing Variants
Overview
Two new variants of FlagPixel that progressively reduce tile size and increase spacing, moving from a dense mosaic toward a sparse dot-matrix aesthetic. Both add rounded corners via ShapeGeometry.
New Flare: FlagPixelLoose
Airy variant with smaller rounded-corner tiles and generous spacing.
Tiles fill 48% horizontal / 36% vertical (vs 82% in FlagPixel)
Vertical gaps roughly double horizontal gaps
Rounded corners via
THREE.ShapeGeometrywith quadratic bezier curvesConfigurable
cornerRadiusprop (0-0.5, default 0.35)Same wave physics and parallax as FlagPixel
New Flare: FlagPixelLooser
Sparsest variant — tiles shrink further with spacing increased by another third.
Tiles fill 32% horizontal / 24% vertical
Approaching a dot-matrix / sparse LED display look
Default
cornerRadiusbumped to 0.4 (rounder at small size)Same wave physics and parallax as FlagPixel
Tile Fill Progression
| Component | H Fill | V Fill | Character |
| FlagPixel | 82% | 82% | Dense mosaic |
| FlagPixelLoose | 48% | 36% | Airy tiles |
| FlagPixelLooser | 32% | 24% | Sparse dots |
Flare Index
Added both new variants to the flare gallery at /design-system/flare/.