Docs
Text Drop

Text Drop

Displays a Text Drop component.

Drop and Bounce Effect

Installation

Install the following dependencies:

npm install framer-motion

Copy and paste the Text Drop code into your project.

API Reference

Props

PropTypeDescription
textstringThe text to be displayed inside the component with drop and bounce effect.
classNamestringOptional custom class for the text, defaults to text-4xl font-bold.
bounceDurationnumberOptional duration for the bounce animation, defaults to 1 second.
dropAnimationDurationnumberOptional duration for the drop animation, defaults to 2 seconds.

Usage

export default function demo() {
  return (
    <TextDropEffect
      text="Drop and Bounce Effect"
      className="text-5xl font-bold text-center text-gradient"
      bounceDuration={1.5}
      dropAnimationDuration={2}
    />
  )
};
NO Lib Typi...Scaling