The Houdini spot at hero scale
Live previews of the soft radial spot inside the full hero <MonotileBackground> on both surface variants. On paper, a low-alpha charcoal anchoring the bottom-right; on navy, a peak-blue lift glowing through the dark band.
Live preview · light
Live preview · dark
Two variants — light vs dark recipe
The spot's colour + alpha changes per surface family so it reads as a soft anchor on every background. Same position, same falloff curve; only the palette flips.
variant="light"- paper tone monotile + faint peak spot.variant="dark"- navy monotile + brighter spot.
The component call site
How to drop the spot into your own page. Single Astro component, one prop, covers any aspect ratio via SVG preserveAspectRatio.
<MonotileBackground variant="light" />
<MonotileBackground variant="dark" />The spot is baked into the monotile background SVG. It covers any aspect ratio automatically.