Woven 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 WovenField from "./WovenField";

export default function Example() {
  return (
    <WovenField
      color={"#a39078"}
      background={"#181612"}
      scale={1}
      angle={-30}
      speed={40}
      paused={false}
      minHeight={400}
      children={"Woven in light."}
      style={{
        "fontSize": 44,
        "color": "#f1e3d1",
        "letterSpacing": "-.05em"
      }}
    />
  );
}

Using Woven Field

Use scale to control the width of the woven ribbons and angle to set the fabric's direction.

Set minHeight for the background area and place foreground content in children. paused holds the weave in place without changing its colours.

Props

Name	Type	Required	Default	Description
color	string	No	"#a39078"	Ribbon colour.
background	string	No	"#181612"	Background colour.
scale	number	No	1	Scale of the woven pattern, at least 0.3.
angle	number	No	-30	Angle of the fabric in degrees.
speed	number	No	40	Animation duration in seconds.
paused	boolean	No	false	Pause decorative motion.
minHeight	number \| string	No	360	Minimum height of the bounded background.
children	ReactNode	No	undefined	Your foreground content.
className	string	No	""	Additional classes for the root element.
style	CSSProperties	No	undefined	Inline styles for caller-defined size, typography, and appearance.