Two soft wave lattices share a field and leave slow moire bands. Closer to print optics than particles.
14px
18°
12°
1
0.72
0.5
tsx
import { Moire } from "@/components/motion/moire"export function Example() { return ( <Moire className="h-[420px] w-full" color="#3b82f6" spacing={14} angle={18} skew={12} speed={1} contrast={0.72} opacity={0.5} /> )}Installation
npx @arctis-sh/@arctis-sh/ui@latest add moireUsage
import { Moire } from "@/components/motion/moire"<Moire className="h-[420px] w-full" color="#3b82f6" spacing={14} skew={12}/>API Reference
Moire
| Prop | Type | Default |
|---|---|---|
| color | string | #3b82f6 |
| backgroundColor | string | — |
| spacing | number | 14 |
| angle | number | 18 |
| skew | number | 12 |
| speed | number | 1 |
| contrast | number | 0.72 |
| opacity | number | 0.5 |
| soft | number | 2 |
| dpr | number | 1.5 |
| className | string | — |
| children | ReactNode | — |
Also accepts the other native div attributes. spacing is in pixels. angle and skew are in degrees.