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:T7e8,

Stroke Text FX is a dynamic animated text component built for Framer that uses SVG-based stroke animations to transform static typography into engaging, motion-driven visuals.

It supports both stroke and fill animations, allowing designers to create bold typographic effects with solid or gradient styling while maintaining full control over motion behavior.

Key features include

Smooth animated transitions between stroke and fill states
Support for solid colors and gradient stroke or fill styles
Two animation modes including stroke flow and bounce effects
Adjustable animation duration for fine-tuned motion control
Configurable stroke width for different visual weights
Optional looping with customizable delay timing
Full typography controls including font, spacing, and sizing
Responsive behavior optimized for modern layouts
Accessible design with aria-label support

How to use

Add the Stroke Text FX component to your Framer canvas
Enter your text and select desired font styles
Choose between solid or gradient stroke and fill options
Select animation type and adjust duration settings
Enable looping and configure delay if needed
Adjust stroke width and tag type based on design requirements
Use preview mode to test animation behavior in canvas

Best for

Hero headlines and landing page typography
Brand logos and animated wordmarks
Footer branding and section dividers
Marketing pages and promotional banners
Modern UI accents and creative storytelling sections

Stroke Text FX turns static text into expressive animated typography that enhances visual hierarchy and adds a modern, high-impact design feel to any Framer project.

5a:[["$","$L5d",null,{"post":{"id":"0199724f-14ca-7151-8b8d-b4f096104752","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"0bb62f72-7068-44a4-9b58-d61d6fa21810","name":"Saeef","slug":"saeef","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1237963/avatar-S0a4amXnS022WBzTOzdHVlrS01Te5g.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"cc1BgHsMPgOj4GLPfG5V","resolved":true,"title":"Stroke Text FX","body":"$5e","bodyJson":null,"introduction":"Animated SVG stroke text effect","slug":"stroke-text-effect","author":{"framerUserId":"0bb62f72-7068-44a4-9b58-d61d6fa21810","name":"Saeef","slug":"saeef","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1237963/avatar-S0a4amXnS022WBzTOzdHVlrS01Te5g.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/cc1BgHsMPgOj4GLPfG5V/stroke-text-effect-yxgqsJYZUO4CVBbimZXFBEDUuXjBhK","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-09-17T19:37:18.303Z","updatedAt":"2026-06-10T04:31:01.695Z","publishedAt":"2025-09-22T16:43:29.354Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://stroketexteffect.framer.ai/","price":"8","paymentUrl":"https://framerspark.lemonsqueezy.com/checkout/buy/18a947cf-93d9-4f9f-abbf-bb19d626f1ec","workshop":true,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"C0HorZozRsglWMn2ohFr","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-09-22T16:43:29.354Z","updatedAt":"2025-09-22T16:43:29.354Z","reported":false}}],"$L5f"]

Suggested for you