Weave Pattern

A 12x12 grid of clipped line windows rendered on canvas, each rotating around a 45-degree field on a six-second loop. Cells fire in a diagonal stagger so rotations ripple across the board in alternating bands, like threads in a weave. Hovering pulls nearby cells out of phase - tension builds with distance falloff and eases back as you move away. Respects prefers-reduced-motion and only listens for hover on fine pointers.

weave-pattern-preview

Why it helps: A generative weave makes an ambient background feel crafted rather than decorative. The diagonal stagger reads as fabric, and the cursor tension gives it just enough interactivity to reward hovering without demanding attention.

Also good to know:

-Canvas-based rendering means no DOM accessibility for the visuals
-The 12x12 grid is fixed - density is not configurable via props
-Hover interaction only applies on fine pointers, so touch devices see the ambient loop only

Source

components/live/WeavePattern.tsx

// Loading source...

Usage

example.tsx

import { WeavePattern } from "@/components/live/WeavePattern";

<WeavePattern
  className="w-full aspect-video"
/>
import { WeavePattern } from "@/components/live/WeavePattern";

<WeavePattern
  className="w-full aspect-video"
/>

Props

className-

string

Additional CSS classes.

speed1

number

Playback speed multiplier for the rotation loop.

style-

CSSProperties

Inline styles.