Build a model on the front page instead of describing one

[thebuilder]

The gallery opened with three paragraphs claiming a model would assemble itself, and six cards of equal weight underneath: the bundled models, free build, the set search and the drop target all read as the same offer.

The header is now the demonstration

A canvas behind the type loads the real Example Car through the same loadModel the builder uses, and assembles it in the eight steps its author wrote, holds it, lifts it apart in reverse and starts again. Drag turns it.

It is a packed LDraw file rather than a hand-made stand-in, because a hero that fakes the product is the one thing a hero must not do. It is also cheap: 61 bricks, imported after mount, car loaded in 44ms: colours 11ms, fetch 3ms, parse 28ms, flatten 3ms, layout 0ms. The loop parks when the header scrolls out of view, prefers-reduced-motion skips straight to the built model, and the scene reads --scene-env / --scene-shadow off the stylesheet so it follows the theme.

The copy above it is down to one heading, since the model says the rest.

Two layout notes worth a reviewer's eye:

• The JS and CSS breakpoints are tied together on purpose. WIDE_PX is Tailwind's lg because the veil picks its direction at that breakpoint. They were 900 and 1024 for a while, and in the gap the model was placed for the side-by-side layout while the veil was still the stacked one, which buried the car in the heavy end of a gradient.
• The veil fades to ground/0, not transparent. transparent is transparent black, and a gradient run to it in oklab passes through colours that are neither.

The ways in are ranked

Search leads, at three fifths of the row and with three sets to press rather than type, because it reaches all ~1,470 official sets where everything below it reaches one. Free build sits beside it as the same decision made the other way. Bringing your own file became a strip rather than a tile: a real way in, but the only one that assumes you already have an .ldr on disk. The bundled models follow.

Also in here, from the same pass

• Icon-only buttons are square. The theme toggle was 4px wider than it was tall everywhere it appeared. .hud-square sizes both axes from one line of type plus the padding, so it stays square and matches the labelled buttons beside it. aspect-ratio does not work here — a flex item is sized from its content first, so the ratio loses to a 14px icon.
• Opening a set has a loading state, and it costs no layout shift. Packing a cold set is a few hundred network lookups with nothing visible happening. The suggestions row is hidden rather than unmounted so it holds its height while the bar sits over it, and the working note is written to the length of the licence one. Measured at 311px in both states.
• The back link out of the builder has a 112x32 target instead of 72x12, with the padding cancelled by an equal negative margin so nothing moved.
• The OG card carries the page's heading and one line, not a paragraph and a feature list.
• The favicon is the wordmark folded into a 2x2. What it replaces was a drawing of a brick — studs, body, a highlight — all of which is mush at 16px. The fourth quadrant is filled rather than transparent because browsers mask favicons with rounded corners, and an empty corner under that mask reads as a bite rather than a gap.
• A footer credit, at the far end of the link row.

Verification

pnpm check, pnpm typecheck, pnpm test (541 passing) and pnpm build are clean. The front page, /free and /build/pyramid were checked in a real browser at 1440, 960 and 390, in both themes, including the drag, the loading state and the favicon at 16/24/32/64 on light and dark chrome.

One copy assertion in OpenSetCard.test.tsx changed with the working note's wording; the test checks the same thing.

Not done

The README does not mention the hero. Happy to add a paragraph about the front page loading a real model if that is wanted.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
ldraw-builder	Ready	Preview	Aug 28, 2026 10:28am