Moiré Lattice
A restrained moiré background made from two offset line lattices.
Acoustic research / 2026
Patterns between frequencies.
A quiet field of intersecting lattices sits behind consumer-owned copy.
Customise
Code
<BgMoireLattice />Moiré Lattice is a free decorative background for React and Next.js. Two fine line fields share a 16-pixel pitch, with the second rotated by seven degrees to create a quiet interference pattern without a shader or canvas.
The second lattice moves by exactly one pitch over a finite 16-second CSS transform loop. It pauses while the field is offscreen or the document is hidden. Server rendering, reduced motion and print preserve a static field; forced-colour mode hides the decoration. Place semantic content above it on a consumer-owned reading surface.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/bg-moire-latticeUsage
import { BgMoireLattice } from "@/components/bg-moire-lattice";
export function Example() {
return (
<section className="relative isolate min-h-96 overflow-hidden bg-background">
<BgMoireLattice />
<div className="relative z-10 p-8">
<h2 className="text-3xl font-semibold">Your content here</h2>
<p className="mt-3 text-muted-foreground">The lattice stays behind the reading surface.</p>
</div>
</section>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | undefined | Additional classes merged onto the positioned background layer. |
Customisation
The registry item declares four semantic CSS tokens for the line color, surface, pitch and loop duration. The shipped defaults use the foreground, background, a 16px pitch and a 16s duration. Keep a pitch override matched to the travel distance if you adjust the repeating pattern:
:root {
--moire-line: var(--primary);
--moire-surface: var(--background);
--moire-pitch: 16px;
--moire-duration: 16s;
}Frequently asked questions
- Does Moiré Lattice contain the page content?
- No. It is an aria-hidden, pointer-inert absolute layer. The consumer owns the container size and all headings, links and reading surfaces.
- When does the lattice move?
- With no reduced-motion preference, the CSS transform runs for 16 seconds while the root is visible and the document is active. It pauses offscreen and in hidden tabs, stays static without IntersectionObserver, and is static for reduced motion and print.
- How does it behave in forced colours?
- The field is purely decorative and is hidden in forced-colour mode. Consumer-owned content remains independent and available.