Ripple Effect

lastmod 2023-03-09created 2014-02-145 edits

A ripple effect is a situation where, like the ever expanding ripples across water when an object is dropped into it, an effect from an initial state can be followed outwards incrementally.

A ripple effect is a situation in which the effect of an initial state gradually spreads outward, like the ripples that expand across water when an object is dropped into it.

The term ripple effect is often used colloquially to mean the multiplier effect in macroeconomics. For example, a decrease in one individual's spending reduces others' income and their ability to spend.

Categories

• React:TouchRipple
• Mui:ButtonBase
• Ripple Directive for the Vue version

Implementations

React Button Ripple Effect - CodeSandbox

https://codesandbox.io/s/react-button-ripple-effect-z8rqw?from-embed=&file=/src/components/Ripple.js

Pure CSS ripple effect for Material Design

https://codepen.io/finnhvman/pen/jLXKJw

Favorite site

• Wikipedia (en) Description of Ripple Effect
• OpenGL ES: Ripple Effect (water ripple effect)
• OpenGL Project on water ripple effects ¹
• 2D Water

For Android RenderScript

• Ripple Effect implemented with RenderScript
• Samsung S3 dandelion water ripple effect (b) - the Renderscript ready articles ²

References