Open the hero at the edges so the animation reads as its art

[singhharsh1708]

The hero's dark overlay was the wrong way round. It was lightest in the middle, right behind the copy, and near black everywhere else, so the canvas animation (the one thing the hero exists to show) only appeared as a faint glow under the words. The reference does the opposite: art at the sides, dark behind the centred text.

This flips it. The overlay is now 90% dark behind the copy and opens to 15% at the edges, the canvas runs at full opacity, and a short fade at the bottom hands over to the deploy strip.

Measured

Same production build before and after, in headless Chrome. For contrast, the hero text is hidden, the backdrop behind each line is sampled across four animation frames, and the brightest sample is kept. For edge brightness, the mean luma of the outer thirds of the hero, brightest frame.

	Before, desktop	After, desktop	Before, phone	After, phone
Edge brightness	17.7	28.5	23.0	25.9
Headline, first line	11.66:1	14.68:1	16.26:1	16.39:1
Headline, second line	6.75:1	9.48:1	7.72:1	9.49:1
Paragraph	5.55:1	7.35:1	4.78:1	6.75:1
Mono microcopy	7.16:1	6.44:1	7.66:1	7.47:1

So the art got brighter where it is meant to show, and the copy got more contrast, not less. The paragraph on a phone was the tightest line on the page at 4.78:1 and now has real margin. The microcopy dips slightly because it sits lower, where the overlay starts to open, and stays well clear of 4.5:1.

The existing hero tests still hold: the animation is the section's full-bleed backdrop, and nothing veils it with a fade from the page background.

Suite 485 passing. tsc --noEmit clean, eslint clean, production build clean.

Note, added later. A contrast probe used in later work turned out to average the whole screenshot instead of the pixels behind the text: in sharp 0.34, extract().stats() ignores the crop. The script behind the figures above no longer exists, so I cannot tell whether it had the same fault, and the figures should be treated as unverified. The surface measured here has since been redesigned. Current figures, measured correctly, are in the corrections on #399 and #400.

[vercel]

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

Project	Deployment	Actions	Updated
scrollcraft	Ready	Preview	Sep 11, 2026 5:44pm UTC