Granular Sand Text

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

Installation

npm install @reactbytes/granular-text

Usage

import { GranularText } from "@reactbytes/granular-text";

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

Properties

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | text | string | MORPH | The word/text to render and animate. | | radius | number | 65 | Radius around mouse where particles are affected. | | force | number | 7 | Strength of dispersion force. | | gravity | number | 0.35 | Gravity/downward acceleration on particles. | | cooldown | number | 100 | Cooldown time in frames before recall starts. | | recallSpeed | number | 0.14 | Speed of snap-back recall. | | color | color | #ffffff | Foreground color of the stable vector text. | | activeColorHex | color | #f59e0b | Particle dispersion active color (hex). | | recallColorHex | color | #3b82f6 | Particle recall color (hex). |

Presets

This component includes the following design presets:

• Default Style (default)
• Golden Dispersion (gold)
• High Gravity Collapse (crash)

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 - Granular Sand Text.