Swarm Text

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

Installation

npm install @reactbytes/swarm-text

Usage

import { SwarmText } from "@reactbytes/swarm-text";

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

Properties

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | texts | string | Developer, Designer, Philosopher, Physicist | Array of words to rotate/morph through (comma-separated). | | delay | number | 3000 | Duration in milliseconds to display each word before swapping. | | fontSize | number | 48 | Font size of the dynamic text on the canvas (pixels). | | friction | number | 0.85 | Friction / damping coefficient for the particle movements. | | springStiffness | number | 0.08 | Spring stiffness factor pulling particles back to text target points. | | particleSize | number | 1.8 | Base radius of the rendered particles. | | step | number | 3 | Grid pixel sampling step. Lower values increase particle density but decrease performance. | | mouseRepel | boolean | true | Enables particle repulsion when hovering with the cursor or dragging. | | repelRadius | number | 60 | Radius of influence around the mouse in pixels. | | repelStrength | number | 4 | Repelling force factor pushing particles away from the mouse. | | textColor | color | #E8EAF0 | Hex or CSS color for the text particles. |

Presets

This component includes the following design presets:

• Default Swarm (default)
• Cyberpunk Terminal (cyberpunk)
• Warm Sunset (sunset)
• Cosmic Nebula (fluid-cosmic)

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