Moiré

Installation

Usage

Copyimport { Moire } from "@/components/dithercn/moire";
 
export function Hero() {
  return (
    <section className="relative isolate min-h-[480px]">
      <Moire className="absolute inset-0 -z-10" />
      <h1>Your headline</h1>
    </section>
  );
}

Two gratings of fine lines sit on top of each other. Each line is a whole number of dither cells wide, every pitch cells, so the lines stay crisp at any size. A line of one grating is drawn in the second palette colour, and a cell where lines of both gratings cross is drawn in the last. Where the gratings line up, their lines overlap into crisp ink stripes on open paper. Where they fall half a pitch apart, they fill each other's gaps with a flat tint. Between the two, the stripes thicken and soften, and the eye reads the change as broad bands many times larger than the lines themselves.

The bands move far more than the lines do. The gratings slide apart by a fraction of a cell per second, and the bands sweep across the box at dozens of pixels per second. At the same time the angle between the gratings breathes, so the bands swell, narrow and swing. The second grating is never quite flat: warp bends it by a cell or two in a few broad swells that change shape slowly. That bend is too small to see in the lines, but it curves the bands by most of their width. There are three variants:

• "lines": two sets of straight lines a few degrees apart. The bands run across the lines.
• "rings": two sets of concentric rings whose centres drift apart and together. The bands fan out from the middle as a slowly turning starburst.
• "mesh": two square grids, like a pair of window screens. The bands form a large lattice of their own.

bands sets how many bands cross the box, not how far the lines are turned, so a phone shows the same composition as a desktop.

Examples

Rings in a palette

colors gives each band the next colour from a list in turn. The lines that cross take the band's colour and the rest a tint of it, and the colours change halfway between two bands, inside the flat tint, so no colour edge cuts across the crisp stripes. With "rings", the bands fan out from the middle, so the colours do too. Ring colours run into each other across most of each band, and they fade towards grey near the middle, where every band meets, so the centre shows the rings' own interference rather than slices of colour.

Behind a headline

mask="center" clears an oval in the middle of the box, and the lines dissolve into dots towards it. Two big bands and two soft tints of the ink keep the pattern quiet behind the text.

Props

Notes

• It is decorative and hidden from assistive technology. Put real text on top of it, not inside it.
• With reduced motion turned on, it draws one still frame and stops.
• It pauses when scrolled out of view or when the tab is hidden, and releases its WebGL context when far offscreen. Without WebGL it draws the same two gratings as CSS repeating gradients, in the palette's middle colour, with the last colour where their lines cross, so the moiré still appears. An SVG displacement filter bends the second grating by warp, so the bands curve, though not in exactly the same shape as the shader's. With colors, the colour stripes stay straight while the bands bend, and the ring colours blend smoothly instead of as dots.
• Each line is drawn in whole cells and every cell is either on a line or not, so the fine pattern never blurs into grey and never flickers. No line moves more than a cell every few seconds; only the bands move quickly.
• It costs a few dot products per cell, at 30 fps and one pixel per dither cell. See Performance.