Light, rendered one dot at a time

An ordered-dither field that follows your theme, your brand colors and your pointer.

components/ui/dither-field-demo.tsx

import { DitherField } from "@/registry/magicui/dither-field"

export function DitherFieldDemo() {
  return (
    <DitherField
      pattern="horizon"
      color={["var(--dither-low)", "var(--dither-mid)", "var(--dither-high)"]}
      className="bg-background flex h-[420px] w-full flex-col items-center justify-center gap-4 rounded-lg border px-4 pb-28 text-center select-none [--dither-high:#4c1d95] [--dither-low:#c4b5fd] [--dither-mid:#7c3aed] md:h-[500px] md:gap-6 md:px-6 md:pb-24 dark:[--dither-high:#ede9fe] dark:[--dither-low:#2e1065] dark:[--dither-mid:#8b5cf6]"
    >
      <h1 className="max-w-xl text-3xl font-semibold tracking-tighter text-balance sm:text-4xl md:text-6xl">
        Light, rendered one dot at a time
      </h1>
      <p className="text-muted-foreground max-w-md text-sm text-balance md:text-base">
        An ordered-dither field that follows your theme, your brand colors and
        your pointer.
      </p>
      <div className="flex flex-wrap justify-center gap-2 md:gap-3">
        <button
          type="button"
          className="bg-foreground text-background h-9 rounded-full px-4 text-sm font-medium whitespace-nowrap md:h-10 md:px-5"
        >
          Get started
        </button>
        <button
          type="button"
          className="bg-background/80 h-9 rounded-full border px-4 text-sm font-medium whitespace-nowrap backdrop-blur md:h-10 md:px-5"
        >
          Learn more
        </button>
      </div>
    </DitherField>
  )
}

Prop	Type	Default	Description
`pattern`	`string`	`"horizon"`	One of `horizon`, `glow`, `aurora`, `waves` or `clouds`
`src`	`string`	`-`	Image or video URL to dither instead. Remote files must allow CORS
`color`	`string \| string[]`	`"currentColor"`	A CSS color, or a `[low, mid, high]` ramp from dim to bright dots
`dotSize`	`number`	`1`	Size of one dot in CSS pixels
`intensity`	`number`	`0.75`	Brightness of the field
`speed`	`number`	`1`	Animation speed. `0` holds a still frame
`fps`	`number`	`30`	Maximum frames per second
`interactive`	`boolean`	`true`	Brighten the dots under the pointer

Open in

horizon

glow

aurora

waves

clouds

components/ui/dither-field-patterns-demo.tsx

import { DitherField } from "@/registry/magicui/dither-field"

const patterns = ["horizon", "glow", "aurora", "waves", "clouds"] as const

export function DitherFieldPatternsDemo() {
  return (
    <div className="grid w-full grid-cols-2 gap-3 md:grid-cols-5">
      {patterns.map((pattern) => (
        <DitherField
          key={pattern}
          pattern={pattern}
          className="bg-background flex h-32 items-end rounded-lg border p-3 select-none last:col-span-2 md:h-40 md:last:col-span-1"
        >
          <code className="bg-background/80 rounded px-1.5 py-0.5 text-xs backdrop-blur">
            {pattern}
          </code>
        </DitherField>
      ))}
    </div>
  )
}

Open in

Live previews

Every branch gets a URL the moment you push.

Edge cache

Static assets served from 300 cities.

Instant rollbacks

Go back to any deploy in one click.

components/ui/dither-field-card-demo.tsx

import { DitherField } from "@/registry/magicui/dither-field"

const cards = [
  {
    pattern: "glow",
    title: "Live previews",
    body: "Every branch gets a URL the moment you push.",
    className: "md:col-span-2",
  },
  {
    pattern: "clouds",
    title: "Edge cache",
    body: "Static assets served from 300 cities.",
    className: "",
  },
  {
    pattern: "waves",
    title: "Instant rollbacks",
    body: "Go back to any deploy in one click.",
    className: "md:col-span-3",
  },
] as const

export function DitherFieldCardDemo() {
  return (
    <div className="grid w-full max-w-3xl gap-4 md:grid-cols-3">
      {cards.map((card) => (
        <DitherField
          key={card.title}
          pattern={card.pattern}
          color="var(--muted-foreground)"
          intensity={0.6}
          className={`bg-card flex h-44 flex-col justify-end rounded-xl border p-5 select-none md:h-56 md:p-6 ${card.className}`}
        >
          {/* Fades the dots out behind the text so it stays readable. */}
          <div className="from-card absolute inset-x-0 bottom-0 h-2/3 bg-linear-to-t to-transparent" />
          <h3 className="relative text-lg font-semibold tracking-tight">
            {card.title}
          </h3>
          <p className="text-muted-foreground relative text-sm">{card.body}</p>
        </DitherField>
      ))}
    </div>
  )
}

Open in

Dither

components/ui/dither-field-text-demo.tsx

import { DitherField } from "@/registry/magicui/dither-field"

export function DitherFieldTextDemo() {
  return (
    <DitherField
      pattern="clouds"
      color={["var(--dither-low)", "var(--dither-mid)", "var(--dither-high)"]}
      intensity={1.1}
      className="h-64 w-full rounded-lg border bg-white [--dither-high:#164e63] [--dither-low:#67e8f9] [--dither-mid:#0891b2] md:h-[400px] dark:bg-black dark:[--dither-high:#ecfeff] dark:[--dither-low:#0e7490] dark:[--dither-mid:#22d3ee]"
    >
      {/* The overlay hides the dots everywhere except inside the letters. */}
      <div className="absolute inset-0 flex items-center justify-center bg-white mix-blend-screen select-none dark:bg-black dark:mix-blend-multiply">
        <span className="text-7xl leading-none font-black tracking-tighter text-black sm:text-9xl dark:text-white">
          Dither
        </span>
      </div>
    </DitherField>
  )
}

Open in

components/ui/dither-field-image-demo.tsx

import { DitherField } from "@/registry/magicui/dither-field"

export function DitherFieldImageDemo() {
  return (
    <DitherField
      src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?q=80&w=1600&auto=format&fit=crop"
      color={["#7c2d12", "#fb923c", "#fff7ed"]}
      dotSize={2}
      intensity={0.8}
      className="h-72 w-full rounded-lg border bg-black md:h-[500px]"
    />
  )
}

Open in

Ink on paper

Chalk on slate

Sodium

Glacier

components/ui/dither-field-colors-demo.tsx

import {
  DitherField,
  type DitherColor,
  type DitherPattern,
} from "@/registry/magicui/dither-field"

const tiles: {
  label: string
  pattern: DitherPattern
  color: DitherColor
  intensity?: number
  className: string
}[] = [
  {
    label: "Ink on paper",
    pattern: "horizon",
    color: "#0a0a0a",
    className: "bg-white text-neutral-950",
  },
  {
    label: "Chalk on slate",
    pattern: "horizon",
    color: "#fafafa",
    className: "bg-neutral-950 text-white",
  },
  {
    label: "Sodium",
    pattern: "glow",
    color: ["#78350f", "#f59e0b", "#fef3c7"],
    className: "bg-[#140b02] text-amber-50",
  },
  {
    label: "Glacier",
    pattern: "aurora",
    color: ["#164e63", "#06b6d4", "#cffafe"],
    intensity: 1.1,
    className: "bg-[#020f14] text-cyan-50",
  },
]

export function DitherFieldColorsDemo() {
  return (
    <div className="grid w-full grid-cols-2 gap-3 md:grid-cols-4 md:gap-4">
      {tiles.map((tile) => (
        <DitherField
          key={tile.label}
          pattern={tile.pattern}
          color={tile.color}
          intensity={tile.intensity}
          className={`flex h-48 items-start rounded-xl border p-4 select-none md:h-64 ${tile.className}`}
        >
          <p className="text-sm font-medium">{tile.label}</p>
        </DitherField>
      ))}
    </div>
  )
}

Dither Field

Light, rendered one dot at a time

Installation

Usage

Props

Examples

Patterns

Card Background

Live previews

Edge cache

Instant rollbacks

Text Mask

Image

Colors

Dither Field

Light, rendered one dot at a time

Installation

Usage

Props

Examples

Patterns

Card Background

Live previews

Edge cache

Instant rollbacks

Text Mask

Image

Colors