Effects

Animated Text

Text that moves with intent: blur-in, rotating words, palette gradients, shine, decrypting, counting numbers and words that light up as you scroll. Readers always get the plain text.
import { BlurText, RotatingText, GradientText, ShinyText, DecryptedText, CountUp, ScrollRevealText } from "pleate/effects/animated-text";

Headlines

Plan less. Travel more.

Trips to Lisbon

Every color is yours.

Your itinerary is being prepared…

Numbers and codes

128K

travellers

4.9

average rating

€2.4M

saved on bookings

CONFIRMATION HT-2041

Hover me: booking secured

Scroll-lit statement

Scroll the page: words light up as they pass.

Pleate keeps the details out of your way: solid surfaces, calm motion and colors that follow you, so the trip, not the interface, is what people remember.

Props

BlurText

Rise out of blur on view.

text, by: "word" | "letter", as, stagger, delay, distance, once

RotatingText

Rolling word, resizing smoothly.

words, interval, pillClassName

GradientText / ShinyText

Animated fills (palette by default).

colors, speed / base, shine, speed

DecryptedText

Scramble then resolve.

text, trigger: "view" | "hover", speed, characters

CountUp

Counts on view.

to, from, duration, format (Intl), locale

ScrollRevealText

Words light up with scroll.

text, as

Accessibility

  • Split text is aria-hidden with the full sentence in a visually hidden copy.
  • Reduced motion shows the final state immediately.