Cinematic Shatter

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

Installation

npm install @reactbytes/shatter-text

Usage

import { ShatterText } from "@reactbytes/shatter-text";

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

Properties

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | text | string | FRAGMENTED | The text to assemble dynamically. | | scatterFactor | number | 400 | Maximum distance for initial chaos scatter on both X and Y axis. | | color | color | #FFFFFF | The base color of the text letters. | | uppercase | boolean | true | Whether to force the text to uppercase. | | textClassName | string | text-5xl font-black text-rb-accent-1 | Tailwind classes for font styling. |

Presets

This component includes the following design presets:

• Default Fracture (default)
• Explosive Scatter (explosive)

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 - Cinematic Shatter.