HAVE COURAGE TOUSE YOUR OWNUNDERSTANDING
This effect doesn’t really add that much but it’s fun
About this effect
The quote begins at 14× as a field of dots sampled from the live dom text. each character is measured with a range and drawn into an offscreen canvas at its real width, then read back on a max(2.2px, fontSize / 52) grid. pixels above an alpha cut of 128 become dots, revealed from right to left in 14 alpha bands.
as the zoom eases from 14× to 1×, the dots hold their position over the real heading. at 72% the quote is uncovered line by line with a clipped polygon that sweeps from 0 to 118%, trailing back to X - 18%. each line’s dots fade as its wipe passes underneath them.
The headline stays in the DOM for selection and screen readers; with reduced motion the final quote is shown immediately.