Progressive Blur
プログレッシブブラー
A soft edge on scrollable content, so text dissolves rather than being cut off. One blur filter over a gradient mask still blurs evenly; the ramp comes from stacking layers, each blurring twice as hard over a shorter mask. The fade variant swaps the blur for a plain wash of the surface colour. Built with CSS mask images↗↗ and Tailwind CSS.
Line 1 of scrollable content
Line 2 of scrollable content
Line 3 of scrollable content
Line 4 of scrollable content
Line 5 of scrollable content
Line 6 of scrollable content
Line 7 of scrollable content
Line 8 of scrollable content
Line 9 of scrollable content
Line 10 of scrollable content
Line 11 of scrollable content
Line 12 of scrollable content
Line 13 of scrollable content
Line 14 of scrollable content
Installation
Copy and paste the following code into a new component file:1
How to use it2
Props
ProgressiveBlur
| Name | Default | Description |
|---|---|---|
| children | — | ReactNode The scrollable content |
| variant | "blur" | "blur" | "fade" Whether the edge blurs progressively or fades to the surface colour |
| edges | "both" | "both" | "top" | "bottom" Which edges get the treatment |
| size | 72 | number Height of the treated edge in pixels |
| layers | 5 | number Number of stacked blur layers, each doubling the previous radius |
| height | 320 | number Height of the scrollable viewport in pixels |
| dark | false | boolean Render the dark palette |