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 & Puzzle Deck
All Deck
Click any Bento card on the stage to tune its span, padding, radius, zoom, or color swatch individually. Click chips below to add (+) or remove (×) widgets.
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 |