Text Pressure
Hello!
Customize Text Pressure
#ffffff
#ff0000
Props
| Property | Type | Default | Description |
|---|---|---|---|
| text | string | "" | The text to be displayed and animated |
| flex | boolean | true | Enable flex layout for the text container |
| alpha | boolean | false | Enable alpha channel animation |
| stroke | boolean | false | Enable stroke effect |
| width | boolean | true | Enable width animation |
| weight | boolean | true | Enable font weight animation |
| italic | boolean | true | Enable italic style animation |
| textColor | string | "#000000" | Base color of the text |
| strokeColor | string | "#ff0000" | Color of the text stroke |
| minFontSize | number | 12 | Minimum font size in pixels |
| className | string | - | Additional CSS class name for the container |
| style | React.CSSProperties | {} | Inline styles for the container |
| 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 |
Created with ❤️ by Cybershoora