Kinetic Ribbon Text

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

Installation

npm install @reactbytes/kinetic-text

Usage

import { KineticText } from "@reactbytes/kinetic-text";

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

Properties

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | text | string | KINETIC | The word/text to render and animate. | | staggerDelay | number | 80 | Stagger delay in milliseconds between character entrances. | | color | color | #ffffff | Foreground color of the letters. | | activeStrokeColor | color | rgba(0, 245, 255, 0.45) | Color of the ribbon/string when interaction is active (dragging). | | strokeColor | color | rgba(255, 255, 255, 0.08) | Color of the ribbon/string when not active. |

Presets

This component includes the following design presets:

• Default Style (default)
• Matrix Green (matrix)
• Cyberpunk Neon (cyberpunk)

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 - Kinetic Ribbon Text.