Docs
Text Drop
Text Drop
Displays a Text Drop component.
Loading...
Installation
Install the following dependencies:
npm install framer-motionCopy and paste the Text Drop code into your project.
API Reference
Props
| Prop | Type | Description | 
|---|---|---|
| text | string | The text to be displayed inside the component with drop and bounce effect. | 
| className | string | Optional custom class for the text, defaults to text-4xl font-bold. | 
| bounceDuration | number | Optional duration for the bounce animation, defaults to 1second. | 
| dropAnimationDuration | number | Optional duration for the drop animation, defaults to 2seconds. | 
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}
    />
  )
};