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

ASCII Ripple is the rare background component that makes visitors stop scrolling. It fills your canvas with a continuously animated field of characters — morphing, pulsing, and radiating in real time — creating an atmosphere that no static image or gradient could ever achieve. With ten curated character palettes ranging from minimal punctuation to katakana glyphs, five distinct wave propagation modes, and four cinematic color blend styles, every instance of ASCII Ripple feels entirely unique to your brand. Click anywhere on the canvas and a new ripple erupts from your cursor — a detail that transforms passive viewers into engaged participants. This is not a decorative afterthought; it is a signature statement that signals to every visitor that the craft behind your site operates at a different level.

Demo: https://asiibackground1.framer.website/playground

Perfect for

Creative Portfolios: Set the tone before a single word is read. ASCII Ripple establishes an immediate atmosphere of technical artistry that positions your work as premium and intentional.
Agency & Studio Landing Pages: Give your hero section a living texture that competitors simply cannot replicate with off-the-shelf templates — instant differentiation in a crowded market.
SaaS & Tech Products: Reinforce your brand's technical identity with a background that feels engineered, not designed. The circuit, binary, and braille palettes are especially powerful here.
Event & Conference Sites: Create memorable, immersive digital experiences for launches, summits, and product reveals where first impressions carry real commercial weight.

Feature Highlights

10 Character Palettes, Infinite Personality: From whisper-quiet dots to dense katakana grids, each palette unlocks a completely different aesthetic mood — switch in one click without touching a line of code.
5 Wave Architectures: Radial rings, diagonal sweeps, vortex spirals, horizontal flows, and organic noise patterns give you full control over the energy and direction your background communicates.
Click-to-Ripple Interactivity: Every tap or click spawns a live ripple that propagates across the field and fades naturally — turning your background into a tactile, memorable experience visitors will interact with repeatedly.
4 Cinematic Color Modes: Normal, Gradient, Inverse, and Pulse blend modes let you dial in everything from subtle monochrome depth to vivid dual-color wave crests that pulse with your accent color.
Performance-First Architecture: Built with frame-rate awareness, device pixel ratio capping, and visibility-based pause logic — it runs at 60fps without taxing your visitors' devices, even on high-density screens.

The "Why"

Building a live ASCII animation from scratch means weeks of canvas math, performance tuning, color interpolation, and cross-device testing — and that's before you've added interactivity or a single design control. ASCII Ripple delivers all of that in a drag-and-drop component that is production-ready from the first frame. Every edge case has already been handled: resize behavior, touch support, DPR management, and animation lifecycle — all bulletproof, all invisible to your visitors, all working the moment you drop it onto your canvas.

🛠 How to Use (3 Simple Steps)

Set Your Foundation: Drag ASCII Ripple onto your canvas and resize it to fill your hero, section, or full-page background. Set your Font Size to control grid density — smaller for a denser, more intense field.
Define the Aesthetic: Choose your Character Set, Wave Mode, and Blend Mode from the property panel. Dial in your Text Color, Background, and Accent Color to match your brand palette perfectly.
Preview & Deploy: Enable Click Ripples, hit Preview, and interact with your canvas. Adjust Ripple Strength and Fade to taste — then publish. Your background is live.

5a:[["$","$L5d",null,{"post":{"id":"019e9e95-2050-77d2-befa-523cd15c97f1","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"f9e9de99-7497-4b3f-b281-159bcc05f01b","name":"Gutemberg Lincoln","slug":"gutemberglincoln","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f9e9de99-7497-4b3f-b281-159bcc05f01b/dit7rylc","badges":["available","studio"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"PULkTjORhh6VljWBE3u9","resolved":true,"title":"ASCII Background","body":"$5e","bodyJson":null,"introduction":"Customized and animated ASCII background","slug":"ascii-background","author":{"framerUserId":"f9e9de99-7497-4b3f-b281-159bcc05f01b","name":"Gutemberg Lincoln","slug":"gutemberglincoln","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f9e9de99-7497-4b3f-b281-159bcc05f01b/dit7rylc","badges":["available","studio"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/PULkTjORhh6VljWBE3u9/ascii-background-A74060BF83DjXgsznROjckBWmb10DD","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-06-05T11:05:46.075Z","updatedAt":"2026-06-10T13:51:18.469Z","publishedAt":"2026-06-06T20:17:13.808Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://asiibackground1.framer.website/playground","price":"8","paymentUrl":"https://lumerise.gumroad.com/l/asciibackground","workshop":false,"categories":[{"id":"1a3a0eb3-698e-461a-bf42-2502a7ed43e0","name":"Backgrounds","slug":"backgrounds"}],"lastSaveId":"L03M6mRZo51uYz3GE2mo","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":17,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-06T20:17:13.808Z","updatedAt":"2026-06-06T20:17:13.808Z","reported":false}}],"$L5f"]

Suggested for you