Elastic Reveal

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

Installation

npm install @reactbytes/elastic-reveal

Usage

import { ElasticReveal } from "@reactbytes/elastic-reveal";

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

Properties

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | text | string | REACTBYTES | The text context to animate. | | duration | number | 0.6 | Animation duration for each letter in seconds. | | stagger | number | 0.02 | Delay increment between characters in seconds. | | direction | select | up | The direction letters roll towards. | | baseColor | color | #60a5fa | The initial color of the text. | | hoverColor | color | #FFFFFF | The color of the text when revealed on hover. | | uppercase | boolean | true | Whether to force the text to uppercase. | | animateFrom | select | left | Determines the origin of the wave animation. |

Presets

This component includes the following design presets:

• Classic Roll (default)
• Social Style (social)
• Rapid Kick (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 - Elastic Reveal.