Phase Shell Text

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

Installation

npm install @reactbytes/phase-shell-text

Usage

import { PhaseShellText } from "@reactbytes/phase-shell-text";

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

Properties

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | text | string | PHASE | The word/text to render and animate. | | fontSize | number | 95 | Font size in pixels defining absolute container boundaries. | | impactForce | number | 1.3 | Multiplier applied to cursor deflection force on characters. | | influenceRadius | number | 80 | Distance threshold around pointer position. | | coreColor | color | #ffffff | Foreground color of the primary solid text hulls. | | inertialColor | color | rgba(129, 140, 248, 0.5) | Color of the middle inertial displacement shell. | | tensionColor | color | rgba(6, 182, 212, 0.4) | Color of the outer tension spring shell. |

Presets

This component includes the following design presets:

• Chronographic (Default) (chronographic)
• Heavy Latency (heavy)
• High Frequency (volatile)

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 - Phase Shell Text.