DocumentationText ComponentsOverview

Text Components

Animated text components with stunning effects built with TailwindCSS and Framer Motion. Add life to your text with smooth animations, hover effects, and engaging interactions.

Scramble Hover
reactanimation
Text component that animates by scrambling its letters on hover, then resolves to the original text. Useful for headings, buttons, and interactive UI.
Hover over this text!
Custom duration and speed example
Try me too!
View Component
Typewriter Text
reactanimation
Animates text as if being typed out, letter by letter. Supports custom speed and looping.
View Component
Wave Text
reactanimation
Animates each letter in a wave pattern using Framer Motion.
Wave animation for your text!
Higher amplitude wave
Faster wave speed
motion/react
View Component
Reveal Text
reactanimation
Reveals text with a fade or slide-in effect, optionally triggered on scroll into view.
Reveal text with fade/slide!
Slide in from left
Delayed reveal
This reveals when in view
motion/react
View Component
Scroll Reveal Paragraph
Newreactmotion
A paragraph component that reveals words progressively as the user scrolls, creating a smooth text reveal animation effect.

LoremLoremipsumipsumdolordolorsitsitamet,amet,consecteturconsecteturadipiscingadipiscingelit.elit.SedSeddodoeiusmodeiusmodtemportemporincididuntincididuntututlaborelaboreetetdoloredoloremagnamagnaaliqua.aliqua.UtUtenimenimadadminimminimveniam,veniam,quisquisnostrudnostrudexercitationexercitationullamcoullamcolaborislaborisnisinisiututaliquipaliquipexexeaeacommodocommodoconsequat.consequat.DuisDuisauteauteirureiruredolordolorininreprehenderitreprehenderitininvoluptatevoluptatevelitvelitesseessecillumcillumdoloredoloreeueufugiatfugiatnullanullapariatur.pariatur.ExcepteurExcepteursintsintoccaecatoccaecatcupidatatcupidatatnonnonproident,proident,suntsuntininculpaculpaquiquiofficiaofficiadeseruntdeseruntmollitmollitanimanimididestestlaborum.laborum.SedSedututperspiciatisperspiciatisundeundeomnisomnisisteistenatusnatuserrorerrorsitsitvoluptatemvoluptatemaccusantiumaccusantiumdoloremquedoloremquelaudantium,laudantium,totamtotamremremaperiam,aperiam,eaqueeaqueipsaipsaquaequaeababilloilloinventoreinventoreveritatisveritatisetetquasiquasiarchitectoarchitectobeataebeataevitaevitaedictadictasuntsuntexplicabo.explicabo.NemoNemoenimenimipsamipsamvoluptatemvoluptatemquiaquiavoluptasvoluptassitsitaspernaturaspernaturautautoditoditautautfugit,fugit,sedsedquiaquiaconsequunturconsequunturmagnimagnidoloresdoloreseoseosquiquirationerationevoluptatemvoluptatemsequisequinesciunt.nesciunt.

motion/react
View Component

Looking for more?

Explore our basic components and advanced components for more UI elements.

Basic ComponentsAdvanced Components