Moiré Interference Field
Two stripe layers a fraction of a degree apart, generating a shifting fringe field under the cursor.
DOM + CSS0 deps1 file · 3 KB TSX
Props
"use client";
import { useCallback, useRef } from "react";
export function MoireInterferenceField({
hue = "#7dd3fc",
period = 3.1,
conic = false,
}: {
hue?: string;
/** Swap the linear ruling for a radial one, so the fringes form rings. */
conic?: boolean;
/** Stripe pitch in px. Keep it FRACTIONAL — see the note below. */
period?: number;
}) {
const wrapRef = useRef<HTMLDivElement>(null);
const handleMove = useCallback(
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this background
Two flat gradients, a fraction of a degree apart, produce structure hundreds of pixels across. Where the rulings agree the difference blend renders black; where they drift apart it brightens, and because the drift accumulates across the surface a rotation far too small to see directly becomes an enormous, slowly reorganising fringe field. Three details decide whether it looks like an optical instrument or like a broken texture. The pitch must be fractional in device pixels and pre-filtered with a sub-pixel blur, because at integer pitches the rulings beat against the pixel grid and crawl differently in every browser. The wrapper must isolate, because a difference blend left unisolated composites against the whole page beneath it and inverts with the theme. And the pointer has to be mapped non-linearly, since everything worth looking at happens between about a sixth of a degree and two and a half degrees — mapped linearly, most of the surface feels dead. Pointer values are written straight to custom properties through a ref, so the component never re-renders while you move across it.
Curator’s note
Almost no JavaScript — two gradients, one blend mode and a pointer-driven angle. The whole effect is an optical accident you are steering.
