5c:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/3gx96u50v9idb.js","/creators-assets/_next/static/immutable/chunks/125_ce2ese0y_.js","/creators-assets/_next/static/immutable/chunks/2ii8lkleumgkk.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/069_m7850i8jf.js","/creators-assets/_next/static/immutable/chunks/03586ab1rea-b.js","/creators-assets/_next/static/immutable/chunks/19qq0hy3mz_vv.js","/creators-assets/_next/static/immutable/chunks/2oixy7hansmjm.js","/creators-assets/_next/static/immutable/chunks/2rczsbgoa3afm.js","/creators-assets/_next/static/immutable/chunks/2a63j-5qkrdf4.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/0-lv0573a1cyl.js","/creators-assets/_next/static/immutable/chunks/3kkqflhmmpg9p.js","/creators-assets/_next/static/immutable/chunks/0ib-rcz4b0eq3.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/24gcuxpvxd8dy.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3vd9_7_mqx0kl.js","/creators-assets/_next/static/immutable/chunks/3l37d07td4kzk.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3nw4q_evu8ge1.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/2qsfz_74auu2_.js","/creators-assets/_next/static/immutable/chunks/1xkjm3oyldl_r.js","/creators-assets/_next/static/immutable/chunks/16d5vpfsnfybw.js","/creators-assets/_next/static/immutable/chunks/3yfgkb3cck8zt.js","/creators-assets/_next/static/immutable/chunks/0rfcd366io6r9.js","/creators-assets/_next/static/immutable/chunks/2r15b2hek61lg.js","/creators-assets/_next/static/immutable/chunks/3kyaj4hrugjs0.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/2ryuxt_mk774w.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/3eh5q_6ksmw0l.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/0pc9t50m5x90i.js","/creators-assets/_next/static/immutable/chunks/2ee50z0bknh40.js","/creators-assets/_next/static/immutable/chunks/3f4d4x4z1mrzh.js","/creators-assets/_next/static/immutable/chunks/2rdaqkxiyeq_6.js","/creators-assets/_next/static/immutable/chunks/0e-wwv74y78f7.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js"],"PostDetailCard"] 5d:Tac6,

CoolWriter is a playful, scroll-driven typewriter effect for Framer. Text types itself out as visitors scroll — or on autoplay — with a glowing animated cursor, springy character reveals, and inline images or live Framer components dropped right between your words. Every detail is tunable from the property panel.
Features
- Two modes — type on scroll (scrubbed to scroll position) or classic autoplay speed
- Inline media & components — place images or real Framer components between words with [1], [2] tags
- Animated gradient cursor — two-color glow, blink, width, and trailing character effect with bounce, rotate, and scale
- Shimmer — multi-color shimmer sweep across freshly typed text
- Springy reveals & edge blur — per-character spring physics with distance, scale, stiffness, and soft blur falloff
- Full typography control — any font, size, alignment, letter spacing, line height, and paragraph gap
- Fast & accessible — animations pause offscreen, screen-reader friendly text, no dependencies
How to use
1. Add the component to your Framer canvas
2. Write your paragraphs in the property panel — use [1], [2] to place inline items
3. Pick Scroll or Autoplay mode and tune cursor, shimmer, and sparkle settings
4. Done
All settings
Everything is exposed in the property panel — no code needed:
- Content — multiple paragraphs, inline items ([1], [2] tags) as images or component slots with size, radius, background, rotation, offset, and vertical alignment per item
- Typography — full font picker, text color, alignment (left/center), line height, and paragraph gap
- Cursor — two gradient colors, width, blink toggle, and glow intensity
- Playback — Scroll or In View mode, scroll length, and typing speed
- Reveal — on/off, distance, scale, spring stiffness, and damping per character
- Trail — length, bounce, rotation, and scale of the trailing characters behind the cursor
- Shimmer — on/off, custom color palette, sweep length, and glow strength
- Edge blur — on/off, maximum blur, and falloff curve at the typing edge

59:[["$","$L5c",null,{"post":{"id":"019f5bbf-7ec6-740c-a881-610366b4c3c4","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"81bf627c-06e1-4335-90ca-72f026917dc1","name":"Hussein Alalivi","slug":"hussein-alaliwi","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/81bf627c-06e1-4335-90ca-72f026917dc1/a2wmli81","followed":false,"followsYou":false},"media":[],"resources":[{"id":"LS9AqM5GQVgRyYhjPUHK","resolved":true,"title":"Coolwriter","body":"$5d","bodyJson":{"type":"doc","content":[{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"CoolWriter","marks":[{"type":"bold"}]},{"type":"text","text":" is a playful, scroll-driven typewriter effect for Framer. Text types itself out as visitors scroll — or on autoplay — with a glowing animated cursor, springy character reveals, and inline images or live Framer components dropped right between your words. Every detail is tunable from the property panel."}]},{"type":"paragraph"},{"type":"customHeading","content":[{"type":"text","text":"Features","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Two modes","marks":[{"type":"bold"}]},{"type":"text","text":" — type on scroll (scrubbed to scroll position) or classic autoplay speed"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Inline media & components","marks":[{"type":"bold"}]},{"type":"text","text":" — place images or real Framer components between words with [1], [2] tags"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animated gradient cursor","marks":[{"type":"bold"}]},{"type":"text","text":" — two-color glow, blink, width, and trailing character effect with bounce, rotate, and scale"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Shimmer","marks":[{"type":"bold"}]},{"type":"text","text":" — multi-color shimmer sweep across freshly typed text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Springy reveals & edge blur","marks":[{"type":"bold"}]},{"type":"text","text":" — per-character spring physics with distance, scale, stiffness, and soft blur falloff"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Full typography control","marks":[{"type":"bold"}]},{"type":"text","text":" — any font, size, alignment, letter spacing, line height, and paragraph gap"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fast & accessible","marks":[{"type":"bold"}]},{"type":"text","text":" — animations pause offscreen, screen-reader friendly text, no dependencies"}]}]}]},{"type":"paragraph"},{"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 the component to your Framer canvas"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Write your paragraphs in the property panel — use [1], [2] to place inline items"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pick Scroll or Autoplay mode and tune cursor, shimmer, and sparkle settings"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Done"}]}]}],"attrs":{"type":null,"start":1}},{"type":"paragraph"},{"type":"customHeading","content":[{"type":"text","text":"All settings","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Everything is exposed in the property panel — no code needed:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Content","marks":[{"type":"bold"}]},{"type":"text","text":" — multiple paragraphs, inline items ([1], [2] tags) as images or component slots with size, radius, background, rotation, offset, and vertical alignment per item"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Typography","marks":[{"type":"bold"}]},{"type":"text","text":" — full font picker, text color, alignment (left/center), line height, and paragraph gap"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Cursor","marks":[{"type":"bold"}]},{"type":"text","text":" — two gradient colors, width, blink toggle, and glow intensity"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Playback","marks":[{"type":"bold"}]},{"type":"text","text":" — Scroll or In View mode, scroll length, and typing speed"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reveal","marks":[{"type":"bold"}]},{"type":"text","text":" — on/off, distance, scale, spring stiffness, and damping per character"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Trail","marks":[{"type":"bold"}]},{"type":"text","text":" — length, bounce, rotation, and scale of the trailing characters behind the cursor"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Shimmer","marks":[{"type":"bold"}]},{"type":"text","text":" — on/off, custom color palette, sweep length, and glow strength"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Edge blur","marks":[{"type":"bold"}]},{"type":"text","text":" — on/off, maximum blur, and falloff curve at the typing edge"}]}]}]}]}]}]},"introduction":"Playful Typewriter Effect","slug":"coolwriter","author":{"framerUserId":"81bf627c-06e1-4335-90ca-72f026917dc1","name":"Hussein Alalivi","slug":"hussein-alaliwi","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/81bf627c-06e1-4335-90ca-72f026917dc1/a2wmli81","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/81bf627c-06e1-4335-90ca-72f026917dc1/019f5bbf-673d-77ca-b9c8-1a0dd8268d17.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":3200,"height":2400}}],"post":null,"createdAt":"2026-07-13T13:51:43.908Z","updatedAt":"2026-07-13T13:51:43.908Z","publishedAt":"2026-07-13T13:51:43.903Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://coolwriter.framer.website/","price":"15","paymentUrl":"https://buy.polar.sh/polar_cl_f2Z58B1HKA1wFjBB0JurKJAIPhi6kaDrJ1UKq3jhy0d","workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"GyZytvC1UYzLXeWWEgoT","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":7,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-13T13:51:44.326Z","updatedAt":"2026-07-13T13:51:44.326Z","reported":false}}],"$L5e"]

Suggested for you