Helon Braid

A premium, modular React component from the React Bytes collection. Built with React and TypeScript.

Installation

npm install @reactbytes/helon-braid

Usage

import { HelonBraid } from "@reactbytes/helon-braid";

export default function Example() {
  return (
    <HelonBraid />
  );
}

Properties

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | spacingX | number | 80 | Horizontal node spacing (which defines cell columns). | | baseRadius | number | 65 | Structural blueprint arc radius and spacing factor. | | speed | number | 0.05 | Base speed coefficient for wave animations. | | excitationMultiplier | number | 12 | Intensity multiplier of node-trigger excitations. | | backgroundColor | color | #070a12 | Background container color (also used for masking Over/Under weaving layers). | | blueprintColor1 | color | #ffffff | Color of structural blueprint layer 1 (outer circles). | | blueprintColor2 | color | #3b82f6 | Color of structural blueprint layer 2 (under strands & mid circles). | | blueprintColor3 | color | #ec4899 | Color of structural blueprint layer 3 (over strands & inner circles). | | blueprintOpacity | number | 0.02 | Opacity of the structural background blueprint lines. |

Presets

This component includes the following design presets:

• Default Preon (default)
• Cosmic Braid (cosmic)
• Quantum Flare (hyper)
• Bio Synapse (emerald)

Credits & Inspiration

Component Source

• ChandruMIT-o - Design & Development

For interactive playgrounds, customizable controls, and code copy-pasting, visit the full showcase page at React Bytes - Helon Braid.