5c:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/3jpuro209qqra.js","/creators-assets/_next/static/immutable/chunks/2qlox892e2j_q.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/07e2f_v4-u-we.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/3orcs6a8eyfvz.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/39xjxvqtwa0x7.js","/creators-assets/_next/static/immutable/chunks/41zrh_r6fdtfq.js","/creators-assets/_next/static/immutable/chunks/120zfy8hqrcwf.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/2c_4he4mvu2r0.js","/creators-assets/_next/static/immutable/chunks/3n0g19afc7srh.js","/creators-assets/_next/static/immutable/chunks/3q7g04e77g4lf.js","/creators-assets/_next/static/immutable/chunks/1u1uuj9mj0hoo.js","/creators-assets/_next/static/immutable/chunks/0lmnldnlzsgok.js","/creators-assets/_next/static/immutable/chunks/2iw_-bo8jogap.js","/creators-assets/_next/static/immutable/chunks/0z2hzm-7v_g2c.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/27vyv0cqm_295.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/37uei1iwbnu3m.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/17w9c6wazundy.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/44oc0x6k7mw-i.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/2_qutx8yar-up.js","/creators-assets/_next/static/immutable/chunks/0p4vy6mn-x9zs.js"],"PostDetailCard"] 5d:Tb6e,

Ripple Effect adds a soft, water-like ripple that plays on hover — a subtle shadow on light or colored backgrounds, or a soft glow on dark ones, switchable with one Background setting.

It's a pure overlay layer with no styling of its own: drop it absolutely inside any Stack or Frame, on top of or behind your content, and it blends into whatever surface is already there. Text stays selectable and buttons or links stay fully clickable, no matter where it sits in the stack.

Key Features

Background: Light or Dark, auto-swaps the blend mode so the ripple always reads correctly
Start Size and End Size control how big the wave begins and grows
Speed and Opacity control how fast and how strong each ripple plays
Origin: Center, Entry Point, or Follow Cursor — choose where each wave starts
Cursor Rate (Follow Cursor only) sets how often the wave retriggers
Works on touch: a tap triggers the ripple on mobile too

Usage Notes

Built with a single embedded PNG, not a live WebGL shader — lighter on browser resources, no persistent render loop.

⚠ After setting Position to Absolute, clear the Z-Index value in Styles → Position (leave it empty — 0 does not work). Framer auto-assigns Z-Index 1 to absolute layers, and any explicit value blocks the blend mode from reaching the background behind it.

How to Set Up

Drag Ripple Effect into a Stack or Frame that already has a background
Set Position to Absolute, pin all 4 sides, and clear Z-Index in Styles → Position
Choose Light or Dark under Background to match your surface
Adjust Origin, Start Size, End Size, Speed, and Opacity to taste
Publish

Refund Policy

All sales of digital products are final and non-refundable. Questions? Contact hellonostromostudio@gmail.com before purchasing. Enjoy!

59:[["$","$L5c",null,{"post":{"id":"019fdc60-9438-763e-a0d9-b71553f1075f","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"042e00c3-0e8c-49d7-b0d9-458a683d2cbe","name":"Nostromo Studio","slug":"nostromo-studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/425429/avatar-hTmf9JbHiQIYsivHT2ttWZ6KjESn4J.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"8oeVBZZH7CKoUgAdAnjH","resolved":true,"title":"Soft Ripple Effect","body":"$5d","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Ripple Effect ","marks":[{"type":"bold"}]},{"type":"text","text":"adds a soft, water-like ripple that plays on hover — a subtle shadow on light or colored backgrounds, or a soft glow on dark ones, switchable with one Background setting."}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://ripple-effect.framer.website/preview","target":"_blank"}}],"attrs":{"name":"ocean","emoji":"🌊"}},{"type":"text","text":" Classic ","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://ripple-effect.framer.website/preview","target":"_blank"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://ripple-effect.framer.website/light","target":"_blank"}}],"attrs":{"name":"white_circle","emoji":"⚪"}},{"type":"text","text":" Light Mode","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://ripple-effect.framer.website/light","target":"_blank"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://ripple-effect.framer.website/dark","target":"_blank"}}],"attrs":{"name":"black_circle","emoji":"⚫"}},{"type":"text","text":" Dark Mode","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://ripple-effect.framer.website/dark","target":"_blank"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"framed_picture","emoji":"🖼"}},{"type":"text","text":" Picture","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://ripple-effect.framer.website/picture","target":"_blank"}}]}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"It's a pure overlay layer with no styling of its own: drop it absolutely inside any Stack or Frame, on top of or behind your content, and it blends into whatever surface is already there. Text stays selectable and buttons or links stay fully clickable, no matter where it sits in the stack."}]},{"type":"customHeading","content":[{"type":"text","text":"Key Features"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Background: Light or Dark, auto-swaps the blend mode so the ripple always reads correctly"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Start Size and End Size control how big the wave begins and grows"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Speed and Opacity control how fast and how strong each ripple plays"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Origin: Center, Entry Point, or Follow Cursor — choose where each wave starts"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Cursor Rate (Follow Cursor only) sets how often the wave retriggers"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Works on touch: a tap triggers the ripple on mobile too"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Usage Notes"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Built with a single embedded PNG, not a live WebGL shader — lighter on browser resources, no persistent render loop. "}]},{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"warning","emoji":"⚠"}},{"type":"text","text":" "},{"type":"text","text":"After setting Position to Absolute, clear the Z-Index value in Styles → Position ","marks":[{"type":"bold"}]},{"type":"text","text":"(leave it empty — 0 does not work). Framer auto-assigns Z-Index 1 to absolute layers, and any explicit value blocks the blend mode from reaching the background behind it."}]},{"type":"customHeading","content":[{"type":"text","text":"How to Set Up"}],"attrs":{"level":1}},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drag Ripple Effect into a Stack or Frame that already has a background"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Set Position to Absolute, pin all 4 sides, and clear Z-Index in Styles → Position"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Choose Light or Dark under Background to match your surface"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjust Origin, Start Size, End Size, Speed, and Opacity to taste"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Publish"}]}]}],"attrs":{"type":null,"start":1}},{"type":"customHeading","content":[{"type":"text","text":"Refund Policy"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"All sales of digital products are final and non-refundable. Questions? Contact "},{"type":"text","text":"hellonostromostudio@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:hellonostromostudio@gmail.com","target":"_blank"}}]},{"type":"text","text":" before purchasing. Enjoy!"}]}]},"introduction":"Add a Soft Ripple Wave on Hover","slug":"soft-ripple-effect","author":{"framerUserId":"042e00c3-0e8c-49d7-b0d9-458a683d2cbe","name":"Nostromo Studio","slug":"nostromo-studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/425429/avatar-hTmf9JbHiQIYsivHT2ttWZ6KjESn4J.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/042e00c3-0e8c-49d7-b0d9-458a683d2cbe/019fdc7a-546f-75a9-9f17-5a9d884ec316.jpg"}],"post":null,"createdAt":"2026-08-07T13:19:04.312Z","updatedAt":"2026-08-19T17:35:35.521Z","publishedAt":"2026-08-07T13:19:04.309Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://ripple-effect.framer.website/","price":"5","paymentUrl":"https://nostromo.lemonsqueezy.com/checkout/buy/34288663-ae29-472f-843e-6e80abbe5c7d","workshop":false,"categories":[{"id":"3a855006-6097-4489-b33b-8024cb26633e","name":"Interactions","slug":"interactions"}],"lastSaveId":"E7UA8Ai5mD8DbDLo1WbN"}}],"contests":[],"categories":[],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-07T13:19:04.760Z","updatedAt":"2026-08-07T13:19:04.760Z","reported":false}}],"$L5e"]

Suggested for you