Text
BaseText
A lightweight, GSAP-powered text component with smooth, built-in animations. Ships standalone—no extra load, just clean text motion.
npx argn-ui@latest add text
This command installs GSAP and @gsap/react if missing, and injects a ready-to-use animated text component with prop-based animation controls.
Examples
1. Scramble Button
Scramble button adds a quick, glitchy reveal to your button text.
<Text animateInView="scramble" className="text-left">
Gonna Scramble here! Its pure matrix vibe!!
</Text>Gonna Scramble here! Its pure matrix vibe!!
2. Fade Button
Scramble button adds a quick, glitchy reveal to your button text.
<Text animateInView="slide-up">
This is simple slide up...but can you make it better?
</Text>This is simple slide up...but can you make it better?
3. Right Fade Button
Scramble button adds a quick, glitchy reveal to your button text.
<Text animateInView="slide-left" wobble>
Now, we are just sliding towards different direction...
</Text>Now, we are just sliding towards different direction...
4. Fade Down Button w/ Wobble Effect
Scramble button adds a quick, glitchy reveal to your button text.
<Text animateInView="slide-right" wobble wobbleBy="chars" >
And this is right....but wait, something's different.
</Text>And this is right....but wait, something's different.
5. Fade Down Button w/ Wobble Effect
Scramble button adds a quick, glitchy reveal to your button text.
<Text animateInView="slide-up" wobble wobbleBy="words" >
Oh, just words instead of letters.....that's cool!
</Text>Oh, different then the last one.....that's cool!
Component Props
| Prop Key | Prop Value | Explanation |
|---|---|---|
| animateInView? | "scramble" | "slide-up" | "slide-down" | "slide-left" | "slide-right" | Specifies the animation to trigger when the text enters the viewport. |
| wobble? | boolean | Toggles the wobble animation effect when the text is in view. |
| wobbleBy? | "words" | "chars" | Applies the wobble effect to individual characters or entire words. |