5b:I[473921,["/creators-assets/_next/static/immutable/chunks/2bxtessbrg0z1.js","/creators-assets/_next/static/immutable/chunks/0lpbs3388m8i9.js","/creators-assets/_next/static/immutable/chunks/1cyyov0z5q-kt.js","/creators-assets/_next/static/immutable/chunks/3283ev4bymz-y.js","/creators-assets/_next/static/immutable/chunks/1tyeiicl34tqo.js","/creators-assets/_next/static/immutable/chunks/24bk4ojcoor5n.js","/creators-assets/_next/static/immutable/chunks/19vaojedolulr.js","/creators-assets/_next/static/immutable/chunks/1zalsqf-ioaic.js","/creators-assets/_next/static/immutable/chunks/00hohn9l3ocx9.js","/creators-assets/_next/static/immutable/chunks/09klh1t314i6_.js","/creators-assets/_next/static/immutable/chunks/0vxt9zvn936s0.js","/creators-assets/_next/static/immutable/chunks/1eyot9c9uwocm.js","/creators-assets/_next/static/immutable/chunks/15qb5jvtj_j-a.js","/creators-assets/_next/static/immutable/chunks/3p2-jhwmdt2w4.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/102julo6bufcv.js","/creators-assets/_next/static/immutable/chunks/2e-sz6cfsc9_9.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/3uo-268z2xnq9.js","/creators-assets/_next/static/immutable/chunks/3fujn21cf_mt1.js","/creators-assets/_next/static/immutable/chunks/2ypcsbrcjzeke.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3nnozhk_k4v6s.js","/creators-assets/_next/static/immutable/chunks/2ch5kewqiwntv.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/3xmobvbzj3637.js","/creators-assets/_next/static/immutable/chunks/26fs9mkd8gzie.js","/creators-assets/_next/static/immutable/chunks/0toe1wcov_38e.js","/creators-assets/_next/static/immutable/chunks/21ae0xqjlej6m.js","/creators-assets/_next/static/immutable/chunks/3xnhxg14xjx1h.js","/creators-assets/_next/static/immutable/chunks/0q4_4jbe5r70f.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/2warb3xv9rce7.js","/creators-assets/_next/static/immutable/chunks/1tvhyiuh-gmez.js","/creators-assets/_next/static/immutable/chunks/3un-l23eued0s.js","/creators-assets/_next/static/immutable/chunks/0u_jiik6ovv_e.js","/creators-assets/_next/static/immutable/chunks/3nd1mzwm7q_f7.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js"],"PostDetailCard"] 5c:T7f9,

Macula turns an ordinary block of color into something people want to touch. As the cursor moves, it leaves a gooey trail that expands and dissolves, uncovering the content beneath. It’s well suited to footers, hero sections, contact blocks, and anywhere you want a playful moment that still feels polished.

Place it behind your own text and links. Because Macula tracks the pointer across the page rather than only on itself, hover still works when other layers sit on top of it, so your headings, buttons, and links stay fully clickable.

Three reveal variants

Image: reveal any photo or artwork, scaled to cover the component.
Video: reveal a looping, muted video. Supports MP4, WebM, and MOV, with Cover, Contain, or Fill fit.
Text: reveal a message with its own background color, text color, and padding, styled with Framer’s native font control (family, weight, size, spacing, line height, alignment).

Fully tunable feel

Cover Color: the surface that gets smudged away.
Smoothing: how loosely the smudge trails the cursor.
Brush Size: how large the smudges grow.
Expand and Dissolve Time: how long each blob swells and fades.
Goo Blur: from crisp, separate drops to chunky, merged liquid shapes.

How to use

Drop Macula onto your canvas and size it. Add absolute with z-index of 0 to send it at the back of your content.
Pick a variant: Image, Video, or Text.
Add your content and set the cover color.
Place your own text or links on top, then adjust the feel with the brush controls.

Good for: footers, hero banners, portfolio sections, landing pages, event and campaign pages.

58:[["$","$L5b",null,{"post":{"id":"01a13cce-9363-7512-97b8-ab45c19ac71b","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"dc756cc3-0e70-4d81-b856-067a3159f858","name":"Jane","slug":"jane-muthoni-muchiri","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1587759/avatar-ztz6FeQVn24ahnOtuJ0eSgcXcREr4C.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"Y24OekgsesQu8dN3xm5J","resolved":true,"title":"Macula Reveal","body":"$5c","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Macula turns an ordinary block of color into something people want to touch. As the cursor moves, it leaves a gooey trail that expands and dissolves, uncovering the content beneath. It’s well suited to footers, hero sections, contact blocks, and anywhere you want a playful moment that still feels polished."}]},{"type":"paragraph","content":[{"type":"text","text":"Place it behind your own text and links. Because Macula tracks the pointer across the page rather than only on itself, hover still works when other layers sit on top of it, so your headings, buttons, and links stay fully clickable."}]},{"type":"paragraph","content":[{"type":"text","text":"Three reveal variants","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Image:","marks":[{"type":"bold"}]},{"type":"text","text":" reveal any photo or artwork, scaled to cover the component."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Video:","marks":[{"type":"bold"}]},{"type":"text","text":" reveal a looping, muted video. Supports MP4, WebM, and MOV, with Cover, Contain, or Fill fit."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Text:","marks":[{"type":"bold"}]},{"type":"text","text":" reveal a message with its own background color, text color, and padding, styled with Framer’s native font control (family, weight, size, spacing, line height, alignment)."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Fully tunable feel","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Cover Color:","marks":[{"type":"bold"}]},{"type":"text","text":" the surface that gets smudged away."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smoothing:","marks":[{"type":"bold"}]},{"type":"text","text":" how loosely the smudge trails the cursor."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Brush Size:","marks":[{"type":"bold"}]},{"type":"text","text":" how large the smudges grow."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Expand and Dissolve Time:","marks":[{"type":"bold"}]},{"type":"text","text":" how long each blob swells and fades."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Goo Blur:","marks":[{"type":"bold"}]},{"type":"text","text":" from crisp, separate drops to chunky, merged liquid shapes."}]},{"type":"paragraph"}]}]},{"type":"paragraph","content":[{"type":"text","text":"How to use","marks":[{"type":"bold"}]}]},{"type":"orderedList","attrs":{"start":1,"type":null},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drop Macula onto your canvas and size it. Add absolute with z-index of 0 to send it at the back of your content."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pick a variant: Image, Video, or Text."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Add your content and set the cover color."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Place your own text or links on top, then adjust the feel with the brush controls."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Good for:","marks":[{"type":"bold"}]},{"type":"text","text":" footers, hero banners, portfolio sections, landing pages, event and campaign pages."}]}]},"introduction":"a cursor-following smudge reveal","slug":"macula-reveal","author":{"framerUserId":"dc756cc3-0e70-4d81-b856-067a3159f858","name":"Jane","slug":"jane-muthoni-muchiri","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1587759/avatar-ztz6FeQVn24ahnOtuJ0eSgcXcREr4C.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/dc756cc3-0e70-4d81-b856-067a3159f858/01a13cce-1fca-7669-abed-f938603d08c4.png","metadata":{"tint":"hsl(0 67% 14%)","aspectRatio":1.3333333333333333}}],"post":null,"createdAt":"2026-10-14T23:45:32.866Z","updatedAt":"2026-10-14T23:54:53.722Z","publishedAt":"2026-10-14T23:45:32.863Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://macula-reveal.framer.website/","price":"12","paymentUrl":"https://janemuso.lemonsqueezy.com/checkout/buy/c8e97775-c59a-4c6f-913f-3d38bed3fb85","workshop":false,"categories":[{"id":"323e97d6-f443-488c-8661-794a9a83a20f","name":"Effects","slug":"effects"}],"lastSaveId":"X88QE6ZvJhzMIQIzN8dx","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-14T23:45:33.540Z","updatedAt":"2026-10-14T23:45:33.540Z","reported":false,"type":"post"}}],"$L5d"]

Suggested for you