Moire Field React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import MoireField from "./MoireField";

export default function Example() {
  return (
    <MoireField
      color={"#ac94c4"}
      background={"#17131d"}
      spacing={12}
      speed={30}
      interactive={true}
      minHeight={400}
      children={"Between the lines."}
      style={{
        "fontSize": 38,
        "letterSpacing": "-.05em",
        "color": "#f2eaf8"
      }}
    />
  );
}

Using Moire Field

Use spacing to tune the interference pattern's density and minHeight to size the surrounding field.

Turn interactive off for a background that should drift without responding to the pointer. Keep text over a part of the field with sufficient contrast.

Props

Name	Type	Required	Default	Description
color	string	No	"#c3b5d6"	Colour of both line fields.
background	string	No	"#17131d"	Background CSS colour.
spacing	number	No	12	Distance between rings in pixels, clamped to at least four.
speed	number	No	30	Animation cycle duration in seconds.
interactive	boolean	No	true	Let horizontal pointer movement rotate the upper field.
minHeight	number \| string	No	360	Minimum height in pixels or a CSS length.
children	ReactNode	No	undefined	Optional content layered over the pattern.
className	string	No	""	Additional CSS classes merged with the component styles.
style	CSSProperties	No	undefined	Inline styles for sizing, typography, and visual overrides.