Layout that learns from a designer's drags

Show the layout what you want with a few drags. The code learns its numbers, and its limits stay exact.

1 A sizing function nobody can quite tune

A designer wants the important cards bigger, and everything to scale with the screen. An engineer wrote three constants. They're wrong, and every round of “a bit wider on tablets?” is another guess.

the layout code runs as a Handwired net

cards out of bounds (50 screen widths × 20 cards) 0
furthest from your drags –
net vs plain JS, max difference –

0 drags logged

screen width1280 px

2 Predict

You'll drag cards at one or two screen widths. After learning, at a screen width you never touched, will any card overflow the screen?

3 Drag, then learn

Drag the right edge of a few cards to the width you want (or simulate a designer). Try two or three screen widths, so it can tell “fixed size” from “grows with the screen”. Then learn: three constants move in the code, and every card at every width follows.

4 The foil: a generic model on the same drags

Train a small neural net (2→12→1) on the same drags. It fits them, but it has no idea that “never wider than the screen” is a rule.

show its layout above

Reach for Handwired when a designer can show you what they want faster than they can describe it, and the layout still has hard limits.

The simulated designer drags 4 importance levels at 1280, 900 and 420 px, aiming at hidden constants (BASE 140, PER_LEVEL 70, SHARE 0.16) with ±6 px of hand wobble. The bounds check covers 50 screen widths from 320 to 1440 px with 20 seeded cards each. Widths are float32 in the net and float64 in JavaScript, so they agree to a fraction of a pixel, not bit for bit; the clamp itself is exact. Row packing is ordinary JavaScript.