Helix Text

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

Installation

npm install @reactbytes/helix-text

Usage

import { HelixText } from "@reactbytes/helix-text";

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

Properties

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | text | string | ROTOR | The word/text to render on the cylindrical rotors. | | fontSize | number | 90 | Font size in pixels defining the canvas bounds. | | torqueForce | number | 0.55 | Multiplier for rotational acceleration applied by mouse swipe speed. | | influenceRadius | number | 70 | Horizontal proximity radius for mouse-triggered torque. | | stiffness | number | 0.05 | Rotational home-base spring stiffness constant. | | damping | number | 0.81 | Rotational damping ratio. | | color | color | #ffffff | Foreground color of the front-facing characters. | | techColor | color | rgba(245, 158, 11, 0.45) | Color of technical spindle components and scale markers. |

Presets

This component includes the following design presets:

• Industrial Rotor (Default) (rotor)
• Kinetic Spin (spin)
• Fast Return (return)

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 - Helix Text.