Galactic Key · Component Rig
Self-Fitting KokonutUI + Magic UI Card Rig
Text Cut
DOM
0 px
guess 32 px → 0 px
Fit Time
live
6.5 ms
full 17.0 ms → 6.5 ms
Col Blend
calc
2.90 cols
jump 522 px → 348 px
Deck
tier
9 cards · card
4 · 9 · 18 · 3 tiers
Live Controls
- Icon Dials
- Drag horizontally, scroll wheel, or arrow keys; double-click any dial to enter an exact number. Gutter & Margin control the outer Bento viewport frame.
- Density & Swatches
- Pill hides body text, Card keeps a few lines, Drawer reveals sub-metrics. Swatch dots switch Titanium accents and surfaces.
Component & Deck Size
Switch the card family (Telemetry, Gallery, Metric) and deck count (4, 9, 18).
Icon Dials · Card & Outer Gutter
Drag a dial, scroll over it, or use arrow keys. Gutter & Margin adjust the outer stage frame.
W
980
Pad
14.0
Gap
12.0
Zoom
100%
Rad
14
Zone
55%
Gutter
16
Outer
10
Palette Swatches
Pick an accent dot and surface tone; contrast ratio updates live.
2D Liquid vs Snap
drag width · cyan/amber
3D Energy Surface
drag W × pad
Reference & Universal Architecture Proof
`gk-rig.js` renders an off-screen `.koko-card` clone with `height: auto`, measures each real zone (`headH`, `metricH`, `drawerH`, `footH`, `lineH`), quantizes `.koko-body` to integer line multiples (`lines × lineH`), and verifies `0 px` DOM overflow on every card after layout.
| Mode |
Universal Rig |
Proof |
| Text Slicing |
Locks body height to `k × lineHeight` |
0 px clip |
| Narrow Cards |
Density Morph (`Pill` ↔ `Card` ↔ `Drawer`) |
0 crushed lines |
| Bento Spans |
Automatic `2×1` hero bin-packing |
0 overlaps |