Dither Gradient

An animated dithered gradient background effect using canvas with Bayer matrix dithering. Creates a beautiful retro-style aesthetic with customizable colors and animation.

Install

pnpm dlx shadcn@latest add "https://componentry.harshjdhv.com/r/dither-gradient.json"

Examples

Default

Dither Gradient

import { DitherGradient } from "@/components/ui/dither-gradient"

<div className="relative h-[300px] w-full overflow-hidden rounded-xl border bg-background">
  <DitherGradient />
  <div className="relative z-10 flex h-full items-center justify-center">
    <h3 className="text-2xl font-bold text-white">Dither Gradient</h3>
  </div>
</div>

Ocean to Forest

import { DitherGradient } from "@/components/ui/dither-gradient"

<div className="relative h-[300px] w-full overflow-hidden rounded-xl border bg-background">
  <DitherGradient 
    colorFrom="#06b6d4"
    colorMid="#10b981"
    colorTo="#84cc16"
  />
  <div className="relative z-10 flex h-full items-center justify-center">
    <h3 className="text-2xl font-bold text-white">Ocean to Forest</h3>
  </div>
</div>

Sunset Fire

import { DitherGradient } from "@/components/ui/dither-gradient"

<div className="relative h-[300px] w-full overflow-hidden rounded-xl border bg-background">
  <DitherGradient 
    colorFrom="#f97316"
    colorMid="#ef4444"
    colorTo="#be185d"
    intensity={0.2}
    speed={4}
    angle={120}
  />
  <div className="relative z-10 flex h-full items-center justify-center">
    <h3 className="text-2xl font-bold text-white">Sunset Fire</h3>
  </div>
</div>

Props

colorFrom

Start color of the gradient (default: #6366f1)

colorMid

Middle color of the gradient (default: #8b5cf6)

colorTo

End color of the gradient (default: #ec4899)

intensity

Dithering intensity from 0 to 1 (default: 0.15)

speed

Animation speed multiplier (default: 3)

angle

Gradient angle in degrees (default: 45)