Text Components

Animated text components with stunning effects built with TailwindCSS and Framer Motion.

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 other component groups for more UI elements.

Basic Components Advanced Components