Moiré Interference Field
Two stripe layers a fraction of a degree apart, generating a shifting fringe field under the cursor.
- Category
- Backgrounds
- Added
- 2026-09-21
- Deps
- none
- Updated
- 2026-09-21
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
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
// ---------------------------------------------------------------
}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.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Pointer Warp Dot Field
backgroundsA canvas dot grid that bulges and brightens away from the cursor.
Signal Field
backgroundsA machined dot grid lit by slow waves of light, with a pointer lens and click ripples.
Beam Sweep Backdrop
backgroundsSlow conic light beams rotating behind content, CSS-only and compositor-friendly.