Fade
Every example on this page is live, drawn by the library's Storybook, where you can also change its props and see the result.
Dithered transparent-to-background transition using 4×4 Bayer ordered dithering. Avoids visible banding from CSS gradients. Common use case: placing at the edge of a content area to indicate overflow.
Every pixel it draws is the background at full ink, so it is the way to fade content out on the frame, where an opacity-* would turn the text grey.
The last band is solid background, so the fade ends with nothing of the content showing through, even when a preview draws it scaled.
The Fade SVG is absolutely positioned with pointer-events: none, so it occupies zero space in the layout flow. Place it inside a position: relative container to anchor it to the desired edge.
Import
import { Fade } from "~lib/layout/fade";
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
direction | "to-top" | "to-bottom" | "to-left" | "to-right" | No | "to-bottom" | Fade direction |
size | number | No | 40 | Thickness of fade in px |