Installation
pnpm dlx shadcn@latest add https://dithercn.dev/r/dither-fade.jsonUsage
import { DitherFade } from "@/components/dithercn/dither-fade";
export function Changelog() {
return (
<section className="relative overflow-hidden">
<ChangelogEntries />
<DitherFade side="bottom" size={200} />
</section>
);
}Put the fade inside a relative parent. It covers size along side and paints color over whatever is underneath: sparse cells on the content side, solid at the edge. The default colour is --dither-paper, your page background.
It is still and drawn with CSS masks, so it renders on the server and uses no WebGL. Use as many as you like on one page.
Examples
Between two sections
Give the fade the colour of the section below it, or leave the default when that section uses the page background. The upper section dissolves into the next one with no hard line.
Both ends of a row
side="left" and side="right" fade a scrolling row at its ends. Different sizes on each side hint at which way there is more to see.
Drifting edge
With animate the edge wanders slowly, drawn with WebGL. Keep it for one hero-sized seam; the still fade is the better default.
Props
| Prop | Type | Default |
|---|---|---|
| side The edge of the parent the fade sits on. The colour is solid there. | Type: "top" | "bottom" | "left" | "right" | Default "bottom" |
| size Depth of the fade. A number is CSS pixels; a string is any CSS length, such as "30%". | Type: number | string | Default 160 |
| color The colour the content fades into: a palette name such as "grey", a CSS variable name, or any CSS colour. | Type: DitherColor | Default "--dither-paper" |
| matrix The threshold pattern. See Dither engine. | Type: "bayer2" | "bayer4" | "bayer8" | "blue-noise" | Default "bayer4" |
| cell Size of one dither cell in CSS pixels. | Type: number | Default --dither-cell |
| animate true lets the edge drift slowly, drawn with WebGL. | Type: boolean | Default false |
| className Extra classes for the fade's box. | Type: string | Default – |
Notes
- The fade is decorative and hidden from assistive technology. Content under it stays in the page and is still read out, so do not hide anything important beneath it.
- The still fade has no motion. With
animate, reduced motion holds one still frame, and it pauses offscreen like the other backgrounds. - The still fade is 16 masked layers and no script. The animated one costs one small draw per frame and one WebGL context.