Scramble Reveal

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

Installation

npm install @reactbytes/scramble-reveal

Usage

import { ScrambleReveal } from "@reactbytes/scramble-reveal";

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

Properties

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | text | string | CREATIVE | The target text to reveal. | | scrambleChars | string | ABCDEFGHIJKLMNOPQRSTUVWXYZ!@#$%^&* | Characters used during the scramble phase. | | duration | number | 0.8 | Duration of each animation phase in seconds. | | scrambleStagger | number | 0.05 | Delay increment for the initial scramble appearance. | | revealStagger | number | 0.1 | Delay increment for the final character reveal. | | color | color | #34d399 | The base color of the text letters. | | uppercase | boolean | true | Whether to force the text to uppercase. |

Presets

This component includes the following design presets:

• Classic Push (default)
• System Reveal (matrix)
• Cinematic Slow (cinematic)

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 - Scramble Reveal.