Curved Loop
Customize Falling Text
Text Content
Highlight Words (comma separated)
Trigger Type
Gravity0.56
Font Size
Mouse Constraint Stiffness0.9
Props
| Property | Type | Default | Description |
|---|---|---|---|
| tag | string | "p" | HTML tag to render |
| text | string | "" | The text content to animate |
| className | string | "" | Additional class names |
| delay | number | 100 | Delay between animations for each letter (in ms) |
| duration | number | 0.6 | Duration of each letter animation (in seconds) |
| ease | string | "power3.out" | GSAP easing function |
| splitType | string | "chars" | Split type ("chars", "words", "lines", or "words, chars") |
| from | object | { opacity: 0, y: 40 } | Initial GSAP properties |
| to | object | { opacity: 1, y: 0 } | Target GSAP properties |
| threshold | number | 0.1 | Intersection threshold for ScrollTrigger |
| rootMargin | string | "-100px" | Root margin for ScrollTrigger |
| textAlign | string | "center" | Text alignment |
| onLetterAnimationComplete | function | - | Callback when all animations complete |
Dependencies
gsap@gsap/react
Created with ❤️ by Cybershoora