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

ASCII Brush Field turns any section of your Framer site into a living ASCII art canvas.

It's built for hero sections, landing pages, portfolio headers, SaaS and developer-tool websites, AI product pages and any design that wants an interactive background effect without video or heavy WebGL.

Why it feels like a real brush

Continuous strokes, not dots. Fast flicks are filled in between pointer events, so the trail stays an unbroken stroke at any mouse speed.
Smooth falloff. Ink fades softly at the edge of the brush, so it paints rather than stamps.
Same timing on every screen. The fade is time-based, so trails last the same on 60Hz, 120Hz and ProMotion displays.
Never blocks clicks. The background ignores pointer events and reads the cursor from the window, so buttons, links and forms on top stay fully clickable.

Alive on mobile, too

Idle Drift adds a wandering brush that paints on its own. The background keeps moving when nobody is touching it, and touch devices with no cursor still see the effect.

Fully customizable

Glyphs: any characters from lightest to darkest, such as dashes and chevrons (·-–—=≡>»), binary (·-011001=≡>»), dots, blocks or symbols.
Font: full Framer font control with any font, weight, size, letter spacing and line height.
Ink and opacity: any color, from subtle texture to a bold graphic layer.
Brush: radius, strength and fade speed, for anything from a thin pen line to a wide airbrush.
Idle: turn the drift on or off, and set its radius, strength and speed.
Offscreen: pause or keep running when out of view.
Reduced motion: respect or ignore the visitor's preference.

How to use

Add ASCII Brush Field to your page and stretch it to fill your hero or section.
Put it behind your content with your text and buttons layered above it. They stay clickable.
Choose your glyphs, font and ink color, then set the brush and fade to match your style.
Preview your site and move the mouse to paint.

5a:[["$","$L5d",null,{"post":{"id":"01a0f76f-fc73-775b-98a6-51af1e61be86","title":null,"body":"

New component after a long break, Check it out

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"New component after a long break, Check it out"}]}]},"author":{"framerUserId":"810bdf0d-2f4c-4df5-b997-752fa465f16a","name":"Tim Yeng","slug":"tim-yeng","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/75779/Frame%2036-5DNSBvkZIzzeoRY3P535oYmqvut5HK.png","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"piVmnrHa8Y7vz2BiAi1U","resolved":true,"title":"ASCII Brush Field","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"ASCII Brush Field turns any section of your Framer site into a living ASCII art canvas."}]},{"type":"paragraph","content":[{"type":"text","text":"It's built for hero sections, landing pages, portfolio headers, SaaS and developer-tool websites, AI product pages and any design that wants an interactive background effect without video or heavy WebGL. "}]},{"type":"customHeading","content":[{"type":"text","text":"Why it feels like a real brush","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Continuous strokes, not dots.","marks":[{"type":"bold"}]},{"type":"text","text":" Fast flicks are filled in between pointer events, so the trail stays an unbroken stroke at any mouse speed."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smooth falloff.","marks":[{"type":"bold"}]},{"type":"text","text":" Ink fades softly at the edge of the brush, so it paints rather than stamps."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Same timing on every screen.","marks":[{"type":"bold"}]},{"type":"text","text":" The fade is time-based, so trails last the same on 60Hz, 120Hz and ProMotion displays."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Never blocks clicks.","marks":[{"type":"bold"}]},{"type":"text","text":" The background ignores pointer events and reads the cursor from the window, so buttons, links and forms on top stay fully clickable."}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Alive on mobile, too","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Idle Drift adds a wandering brush that paints on its own. The background keeps moving when nobody is touching it, and touch devices with no cursor still see the effect."}]},{"type":"customHeading","content":[{"type":"text","text":"Fully customizable","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Glyphs:","marks":[{"type":"bold"}]},{"type":"text","text":" any characters from lightest to darkest, such as dashes and chevrons ("},{"type":"text","text":"·-–—=≡>»","marks":[{"type":"code"}]},{"type":"text","text":"), binary ("},{"type":"text","text":"·-011001=≡>»","marks":[{"type":"code"}]},{"type":"text","text":"), dots, blocks or symbols."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Font:","marks":[{"type":"bold"}]},{"type":"text","text":" full Framer font control with any font, weight, size, letter spacing and line height. "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Ink and opacity:","marks":[{"type":"bold"}]},{"type":"text","text":" any color, from subtle texture to a bold graphic layer."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Brush:","marks":[{"type":"bold"}]},{"type":"text","text":" radius, strength and fade speed, for anything from a thin pen line to a wide airbrush."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Idle:","marks":[{"type":"bold"}]},{"type":"text","text":" turn the drift on or off, and set its radius, strength and speed."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Offscreen:","marks":[{"type":"bold"}]},{"type":"text","text":" pause or keep running when out of view."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reduced motion:","marks":[{"type":"bold"}]},{"type":"text","text":" respect or ignore the visitor's preference."}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"How to use","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Add ASCII Brush Field to your page and stretch it to fill your hero or section."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Put it behind your content with your text and buttons layered above it. They stay clickable."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Choose your glyphs, font and ink color, then set the brush and fade to match your style."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Preview your site and move the mouse to paint."}]}]}],"attrs":{"type":null,"start":1}}]},"introduction":"ASCII Glyph trails follow cursor","slug":"ascii-brush-field","author":{"framerUserId":"810bdf0d-2f4c-4df5-b997-752fa465f16a","name":"Tim Yeng","slug":"tim-yeng","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/75779/Frame%2036-5DNSBvkZIzzeoRY3P535oYmqvut5HK.png","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/810bdf0d-2f4c-4df5-b997-752fa465f16a/01a0f76e-db10-704e-97d1-8a4db61becc8.png","metadata":{"tint":{"h":60,"s":86,"l":22},"width":3200,"height":2400}}],"post":null,"createdAt":"2026-10-01T12:28:25.931Z","updatedAt":"2026-10-01T12:28:25.931Z","publishedAt":"2026-10-01T12:28:25.926Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/ASCIIbrushfield-0Ntsaa.js@GjpZgJ2lvyudo5qqNJQg","previewUrl":"https://same-panda-824939.framer.app","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"323e97d6-f443-488c-8661-794a9a83a20f","name":"Effects","slug":"effects"}],"lastSaveId":"GjpZgJ2lvyudo5qqNJQg","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-10-01T12:28:26.611Z","updatedAt":"2026-10-01T12:28:26.611Z","reported":false}}],"$L5f"]

Suggested for you