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.
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)
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.
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 Font
Normal Font Size
Normal Font Weight
Normal Color
Cursive FontIncludes popular Google Fonts like Dancing Script, Pacifico, Great Vibes, Caveat, and more
Cursive Font Size
Cursive Font Weight
Cursive Color
Duration – Total animation time
Auto Play – Start animation automatically on load
Loop – Repeat the animation after completion
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.
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.
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)
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.
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 Font
Normal Font Size
Normal Font Weight
Normal Color
Cursive FontIncludes popular Google Fonts like Dancing Script, Pacifico, Great Vibes, Caveat, and more
Cursive Font Size
Cursive Font Weight
Cursive Color
Duration – Total animation time
Auto Play – Start animation automatically on load
Loop – Repeat the animation after completion
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.
