Soft Ripple Effect

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.

• 🌊 Classic

• ⚪ Light Mode

• ⚫ Dark Mode

• 🖼 Picture

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

1. Drag Ripple Effect into a Stack or Frame that already has a background

2. Set Position to Absolute, pin all 4 sides, and clear Z-Index in Styles → Position

3. Choose Light or Dark under Background to match your surface

4. Adjust Origin, Start Size, End Size, Speed, and Opacity to taste

5. Publish

Refund Policy

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