Are the text animations performant?

Yes. They run on Framer Motion with transform and opacity animations and respect reduced motion.

How do I adopt the type scale?

The sizes are based on Tailwind utilities. You copy the classes or set up your own scale in your configuration.

Text animations for headlines, words and numbers. On hover, on scroll or on loop.

Highlighted words that draw their own icon on hover and reveal a preview image.

Animated Highlight Text

Good ideas rarely come at your desk. They need movement, real enthusiasm and the courage to just start.

Text that fades in as you scroll.

Typewriter Cycle

We build

Scramble Text

Split Line Masking

Text across several lines,

line by line,

faded in.

Hover Blur Text

Blur To Clear

Smooth Reveal

More components with PremiumUnlock premium

FAQ

The examples rely on freely available web fonts. You can swap the font family in your configuration at any time.

Didn't find your question? We're happy to help.