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.
Target & Component Tree
Click any Bento card on the stage to tune its columns (2c..6c), rows (1r..2r), padding, radius, zoom, or color swatch individually. Click empty stage space or All Deck to deselect.
All Deck (9)
Component & Deck Size
Switch the card family (Kokonut, Telemetry, Gallery, Metric) and deck count (4, 6, 9, 18).
Geometry & Outer Gutter Dials
Drag horizontally, scroll wheel, or use arrow keys. When a card is selected, Pad, Rad & Zoom tune that card.
Width
980
Pad
14.0
Gap
12.0
Zoom
100%
Radius
14
Zone
55%
Gutter
16
Margin
10
Palette Swatches
Tunes the selected card (or All Deck when none selected); 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 |