Fall Down

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

Installation

npm install @reactbytes/fall-down

Usage

import { FallDown } from "@reactbytes/fall-down";

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

Properties

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | text | string | All Hail Rameez | The text to display and animate. | | uppercase | boolean | false | Whether to force uppercase text. | | loop | boolean | false | Whether the animation should loop. | | duration | number | 0.5 | Duration of the animation for each character in seconds. | | stagger | number | 0.045 | Delay between each character's animation in seconds. | | initialY | number | -60 | Initial vertical offset. | | color | color | #E8EAF0 | Hex color or any valid CSS color. |

Presets

This component includes the following design presets:

• Default Style (default)
• Dramatic Drop (dramatic)
• Soft Cascade (cascade)
• Rapid Entry (rapid)

Credits & Inspiration

Component Source

• ChandruMIT-o - Design & Development

Inspiration

• JP Belley - Visual Designer

For interactive playgrounds, customizable controls, and code copy-pasting, visit the full showcase page at React Bytes - Fall Down.