Helix 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 HelixField from "./HelixField";

export default function Example() {
  return (
    <HelixField
      color={"#c7b5dd"}
      secondaryColor={"#d3bc95"}
      background={"#181923"}
      strands={34}
      speed={0.5}
      paused={false}
      height={420}
    />
  );
}

Using Helix Field

Place Helix Field inside a section with an explicit height. Its canvas is positioned independently of the layout, so resizing does not expand the parent.

The animation pauses when the browser tab is hidden or reduced motion is enabled. Changing colours or density rebuilds the effect and cleans up the previous animation frame and observer.

Props

Name	Type	Required	Default	Description
color	string	No	"#c7b5dd"	First strand and rung colour.
secondaryColor	string	No	"#d3bc95"	Second strand colour.
background	string	No	"#181923"	Canvas background.
strands	number	No	34	Number of connected particle pairs, from 12 to 70.
speed	number	No	0.5	Angular speed in radians per second.
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.