// why this exists
brand-locked OG variants under one shared frame
How it works
// 01 DPI and pixel density
Each variant is a React component that renders a 1200x630 div, locked to aspect ratio with Tailwind. Type sizing uses container query units (cqw) so the layout reads correctly at full size and at the lab's 0.72 preview scale. The portrait is the same canonical hero file used on the home page. Color tokens are hard-coded to the brand palette: signal #4400ff, violet #7a14d4, pink #fd109a, dark stack #06060c.
Ten different design takes on the 1200x630 link-preview card. Same headline, same portrait, same brand palette. Each tile commits to one aesthetic so the differences are easy to compare in a single scroll. Pick the winner and the chosen variant gets promoted into the real opengraph-image route.
Frequently asked questions
Why ten?
Each variant is one clear aesthetic commitment: editorial, terminal, magazine, brutalist, glitch, etc. Ten gives enough range to see the spectrum without being overwhelming.
Why not generate them with ImageResponse?
These are previews. Once Michael picks a winner the chosen layout gets ported into the real /opengraph-image.tsx route which uses Next's ImageResponse to render to PNG at request time.
Why placeholder copy?
The real headline and subhead get swapped once messaging is locked. Locking the layout first means the design choice does not get tangled up with the copy choice.