5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:Tabb,

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

Animation controls

Duration – Total animation time
Auto Play – Start animation automatically on load
Loop – Repeat the animation after completion

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

5a:[["$","$L5d",null,{"post":{"id":"019c1ffb-73e2-722a-84f3-8482a05bdeb3","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"2ea40666-4bd8-4d92-aae7-afb2bf982188","name":"Martina Gazenova","slug":"martina-gazenova","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/515538/avatar-HIx8i3QYglETly5wF9cV5OXwufFQcs.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"KFKoR1LvQ6Yw7JrnVoDG","resolved":true,"title":"Neon Text Animation","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Neon Text Animation","marks":[{"type":"bold"}]},{"type":"text","text":" 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."}]},{"type":"paragraph","content":[{"type":"text","text":"Instead of animating the whole text block, this component lets you "},{"type":"text","text":"choose exactly which words are animated","marks":[{"type":"bold"}]},{"type":"text","text":", creating a refined contrast between standard typography and expressive script fonts."}]},{"type":"customHeading","content":[{"type":"text","text":"What this component does"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Displays a full sentence or headline"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animates only selected words with a cursive “writing-in” effect"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reveals animated words character-by-character"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Keeps non-animated words static for better readability"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Supports autoplay and looping animations"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Works with semantic heading tags (H1–H6 or paragraph)"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"What makes it different"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Selective word animation","marks":[{"type":"bold"}]},{"type":"text","text":"Animate only the words you choose, not the entire text."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dual typography system","marks":[{"type":"bold"}]},{"type":"text","text":"Use one font style for normal text and a completely different cursive font for animated words."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Character-based animation","marks":[{"type":"bold"}]},{"type":"text","text":"The animation progresses across all animated words smoothly, instead of restarting per word."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"No keyframes or timelines","marks":[{"type":"bold"}]},{"type":"text","text":"Fully controlled from Framer’s Properties panel. No custom setup needed."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Designed for headlines","marks":[{"type":"bold"}]},{"type":"text","text":"Built with spacing, alignment, and overflow handling suitable for large text and hero sections."}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Editable properties"}],"attrs":{"level":1}},{"type":"customHeading","content":[{"type":"text","text":"Text & structure"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Full Text","marks":[{"type":"bold"}]},{"type":"text","text":" – The complete sentence or headline"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animated Words","marks":[{"type":"bold"}]},{"type":"text","text":" – Comma-separated list of words to animate"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Heading Tag","marks":[{"type":"bold"}]},{"type":"text","text":" – H1, H2, H3, H4, H5, H6, or paragraph"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Normal text styling"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Normal Font","marks":[{"type":"bold"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Normal Font Size","marks":[{"type":"bold"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Normal Font Weight","marks":[{"type":"bold"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Normal Color","marks":[{"type":"bold"}]}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Animation controls"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Duration","marks":[{"type":"bold"}]},{"type":"text","text":" – Total animation time"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Auto Play","marks":[{"type":"bold"}]},{"type":"text","text":" – Start animation automatically on load"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Loop","marks":[{"type":"bold"}]},{"type":"text","text":" – Repeat the animation after completion"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"This component is perfect when you want "},{"type":"text","text":"subtle motion, typographic contrast, and precise control","marks":[{"type":"bold"}]},{"type":"text","text":", without overwhelming the entire layout with animation."}]}]},"introduction":"Make keywords come alive","slug":"neon-text-animation","author":{"framerUserId":"2ea40666-4bd8-4d92-aae7-afb2bf982188","name":"Martina Gazenova","slug":"martina-gazenova","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/515538/avatar-HIx8i3QYglETly5wF9cV5OXwufFQcs.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/KFKoR1LvQ6Yw7JrnVoDG/neon-text-animation-8qXhlmRVahmEnuGV8ZiJnzmBDVJhuT","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-01-21T22:20:30.376Z","updatedAt":"2026-09-16T19:47:15.809Z","publishedAt":"2026-02-02T20:11:38.850Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://pink-confidence-249368.framer.app","price":"5","paymentUrl":"https://buy.polar.sh/polar_cl_qvhTu5ckVSAyHI4ECW4JwZq31BOsv65uc8hk023bYNt","workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"2MSy1FBLXcmykydswQ0v","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-02-02T20:11:38.850Z","updatedAt":"2026-02-02T20:11:38.850Z","reported":false}}],"$L5f"]

Suggested for you