Drifting pools of light rendered through an ordered Bayer dither, like an old print or early Mac screen, with a cursor glow.
Bit by bit
Customize
Usage
import { DitherGradient } from "@/components/motionkit/dither-gradient";
<DitherGradient
className="h-[32rem] rounded-3xl"
>
<h1>Your hero</h1>
</DitherGradient>Motion
The exact curves this component runs, plotted with Motion's own maths.
Drift
Runs on its own
Retro-modern brands, developer tools, editorial sites and portfolios that want texture and character without noise or grain.
The canvas has one pixel per dither cell and is scaled up with image-rendering: pixelated, so each pixel stays crisp. Every frame works out a brightness for each cell from three slowly wandering Gaussian pools of light, plus one at the pointer, and dims the centre for text. Ordered dithering then adds that cell's threshold from an 8×8 Bayer matrix before rounding to one of four tones. Because the thresholds are spread so evenly, smooth gradients become fine, regular patterns rather than random speckle.
| Prop | Type | Default | Description |
|---|---|---|---|
| colors | [string, string] | ["#0E7C86", "#93CACE"] | The light's body and highlight. |
| pixelSize | number | 3 | Size of each dither pixel. |
| speed | number | 1 | Drift speed. 0 holds it still. |
| interactive | boolean | true | A glow that follows the pointer. |
| children | ReactNode | — | Your content, layered above. |
How we audit: the WCAG 2.2 animation checklist and respecting reduced motion in React.
Yes. The file starts with "use client", so you can import it straight into a Server Component page or layout. It works in Vite as is, and in Astro as a React island.
Nothing beyond React and Tailwind CSS v4. There is no MotionKit package and no Tailwind config to add.
Yes, with MotionKit Plus. Add the @motionkit registry and your personal token to components.json (the snippet is on your account page), then run npx shadcn@latest add @motionkit/dither-gradient. It saves the file to components/motionkit and installs its dependencies.
Dither Gradient is part of MotionKit Plus (£12 a month or £96 a year). The live preview and playground are free to explore; Plus unlocks its source code, every customisation control and commercial use.
With reduced motion on, it draws one still frame. It also stops drawing off screen.
Bit by bit
Customize
Usage
import { DitherGradient } from "@/components/motionkit/dither-gradient";
<DitherGradient
className="h-[32rem] rounded-3xl"
>
<h1>Your hero</h1>
</DitherGradient>Motion
The exact curves this component runs, plotted with Motion's own maths.
Drift
Runs on its own
The live preview is free to explore. Plus unlocks the source for Dither Gradient and every other premium component.