Moiré Field
A full-bleed background for hero sections. Two fine, crisp gratings are laid over each other, creating slow interference bands that glide across the surface.
Dependencies
Interaction
Raw WebGL shader rendering dual linear, ring, or dot gratings with analytical smoothstep anti-aliasing and damped pointer interaction.
Props
| Prop | Type | Description |
|---|---|---|
| variant | "lines" | "rings" | "dots" | Pattern geometry: linear gratings, concentric rings, or dot grids. |
| pitch | number | Distance between lines or dots in CSS pixels clamped between 6 and 32. |
| thickness | number | Coverage stroke duty cycle or dot radius ratio clamped between 0 and 1. |
| angle | number | Base orientation angle of grating A in degrees. |
| drift | number | Strength of idle breathing and orbital motion between 0 and 1. |
| interactive | boolean | Whether pointer movement nudges offset and angle with exponential damping. |
| calm | "none" | "left" | "right" | "center" | "bottom" | Soft fade falloff on a designated region to preserve content legibility. |
| calmAmount | number | Intensity of the calm falloff reduction from 0 to 1. |
| colorA | string | Hex or rgb color for primary grating A. |
| colorB | string | Hex or rgb color for secondary grating B. |
| background | string | Base canvas background color. |
| paused | boolean | Halts the animation loop when true. |
MIT License. Free to use in personal and commercial projects. Built for Peel UI.