Guilloche 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 GuillocheField from "./GuillocheField";

export default function Example() {
  return (
    <GuillocheField
      color={"#c7ad7b"}
      background={"#191812"}
      petals={9}
      layers={16}
      speed={60}
      paused={false}
      height={420}
    />
  );
}

Using Guilloche Field

Use Guilloche Field behind a short title or as a decorative section. Pass foreground content through children and reserve space with height.

The petals and layers props change the geometry itself. Keep layers lower in small previews, and pause the animation when its section is hidden.

Props

Name	Type	Required	Default	Description
color	string	No	"#c7ad7b"	Engraved line and foreground colour.
background	string	No	"#191812"	Background surface.
petals	number	No	9	Number of lobes, from 3 to 18.
layers	number	No	16	Number of interlaced paths, from 3 to 32.
speed	number	No	60	Seconds per full rotation.
children	ReactNode	No	undefined	Optional foreground content.
height	number \| string	No	420	Reserved height of the effect.
paused	boolean	No	false	Pause the decorative animation.
className	string	No	""	Additional classes on the root element.
style	CSSProperties	No	undefined	Inline styles for sizing, typography and appearance.