Galactic Key · Component Rig

Self-Fitting KokonutUI + Magic UI Card Rig

Drag either chart to resize the cards; the browser measures every card's real text, so no line gets cut.

Text Cut measured
0 px
guess 32 px → 0 px
Fit Time measured
6.5 ms
full 17.0 ms → 6.5 ms
Column Blend calculated
2.90 cols
jump 522 px → 348 px
Card Decks live
9 cards · card
4 · 9 · 18 · 3 tiers

Who benefits: every cockpit gets self-fitting cards at 4, 9, or 18.

Second-order: cards morph across pill, card, drawer without crushed copy.

Risk: freeform canvas art still needs a visual check.

Next: drag a chart or pick a tier. Nothing needed from you.

3D Energy Surface drag
2D Liquid vs Snap cyan · amber

Live Bento Stage

2.90 cols 738 px 0 px 6.5 ms 100% · 760 px
Reference Comparison & Universal Architecture Proof

Instead of guessing `headerChrome = 68 * scale`, `gk-rig.js` renders one off-screen `.koko-card` clone with `height: auto`, measures each real sub-element (`headH`, `metricH`, `drawerH`, `footH`, `lineH`), quantizes `.koko-body` to exact integer line multiples (`lines × lineH`), and checks real `scrollHeight - clientHeight` on every card after layout.

Failure Mode Lumped Height Guess (v1 Bug) Universal Clone + Quantized Rig (v2) Measured Proof
Mid-Letter Text Slicing Unmodeled sparkline + footer ate 48 px, slicing `.koko-body` mid-glyph Measures real sub-elements + locks body height to `k × lineHeight` 0 px DOM overflow across 4, 9, and 18 cards
Crowded Narrow Cards Crushed paragraphs into 1-line slits at high density Semantic Density Morph (`Pill` ↔ `Card` ↔ `Drawer`) 3 clean semantic modes · 0 crushed lines
Monotonous Equal-Width Grid Every card forced into identical `1×1` cells Automatic `2×1` hero bento bin-packing when columns ≥ 2 Zero card overlaps across all widths
False "Exact Fit" Badges Stamped green from formula prediction without checking DOM Reads real `scrollHeight - clientHeight` from every card after paint 100% ground-truth DOM badge verification