Reveal Under

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

Installation

npm install @reactbytes/reveal-under

Usage

import { RevealUnder } from "@reactbytes/reveal-under";

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

Properties

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | firstWord | string | Hello | The primary word that covers the reveal. | | secondWord | string | World | The secondary word revealed from behind. | | direction | select | right | The direction in which the second word appears. | | duration | number | 1.5 | Total animation time in seconds. | | uppercase | boolean | true | Whether to force the text to uppercase. | | color | color | #E8EAF0 | Hex color for the text. |

Presets

This component includes the following design presets:

• Default Style (default)
• Classic Reveal Up (up)
• Rapid Punch (rapid)

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