Neon Text Animation

Neon Text Animation is a typography-focused text component that animates selected words letter-by-letter in a cursive, handwritten style, while the rest of the text remains static and clean. It’s ideal for hero headlines, section titles, or callouts where you want to subtly draw attention to specific words without animating the entire sentence.

Instead of animating the whole text block, this component lets you choose exactly which words are animated, creating a refined contrast between standard typography and expressive script fonts.

What this component does

• Displays a full sentence or headline

• Animates only selected words with a cursive “writing-in” effect

• Reveals animated words character-by-character

• Keeps non-animated words static for better readability

• Supports autoplay and looping animations

• Works with semantic heading tags (H1–H6 or paragraph)

What makes it different

• Selective word animationAnimate only the words you choose, not the entire text.

• Dual typography systemUse one font style for normal text and a completely different cursive font for animated words.

• Character-based animationThe animation progresses across all animated words smoothly, instead of restarting per word.

• No keyframes or timelinesFully controlled from Framer’s Properties panel. No custom setup needed.

• Designed for headlinesBuilt with spacing, alignment, and overflow handling suitable for large text and hero sections.

Editable properties

Text & structure

• Full Text – The complete sentence or headline

• Animated Words – Comma-separated list of words to animate

• Heading Tag – H1, H2, H3, H4, H5, H6, or paragraph

Normal text styling

• Normal Font

• Normal Font Size

• Normal Font Weight

• Normal Color

Cursive (highlighted neon) text styling

• Cursive FontIncludes popular Google Fonts like Dancing Script, Pacifico, Great Vibes, Caveat, and more

• Cursive Font Size

• Cursive Font Weight

• Cursive Color

Animation controls

• Duration – Total animation time

• Auto Play – Start animation automatically on load

• Loop – Repeat the animation after completion

Best use cases

• Hero headlines

• Landing page value propositions

• Marketing slogans

• Portfolio titles

• Editorial or storytelling layouts

This component is perfect when you want subtle motion, typographic contrast, and precise control, without overwhelming the entire layout with animation.