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.
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
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.
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
All sales of digital products are final and non-refundable. Questions? Contact hellonostromostudio@gmail.com before purchasing. Enjoy!
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.
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
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.
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
All sales of digital products are final and non-refundable. Questions? Contact hellonostromostudio@gmail.com before purchasing. Enjoy!
