Water Wave

$5

Water Wave

Simulate a realistic water surface

Details

Category

Last update

Suggest improvement or report a bug

Water Wave — Framer component

About this Component

Simulate a realistic water surface over any image — animated caustic light patterns, natural ripples, and refraction that make flat images feel like they're sitting under moving water. Works as a live animated filter or as a standalone animated texture.

Features

  • Real caustic simulation — recursive fractal noise drives natural, non-repeating caustic light patterns

  • Dual-layer distortion — combine primary caustics with a second distortion layer for extra depth

  • Independent wave noise — add simplex-noise-based ripples separate from the caustic pattern

  • Animated by default — fully time-based motion with adjustable speed, or freeze it as a static texture

  • Edge-aware distortion — control how strongly the caustic effect bends near image edges

  • Built in Paper style, running on a lightweight, zero-dependency shader engine for smooth performance

Controls

  • Image

  • Background Color

  • Highlight Color

  • Highlights

  • Layering

  • Edges

  • Waves

  • Caustic

  • Size

  • Speed

  • Scale / Rotation / Offset

How to use

  1. Add the Water component onto your canvas

  2. Upload an image to distort, or leave it empty to use as a standalone animated water texture

  3. Adjust Caustic and Layering to set how strong the light-refraction pattern looks

  4. Add Waves for extra organic movement independent of the caustics

  5. Set Speed to control animation pace, or set it to 0 to freeze on a single frame

Shader powered by Paper Shaders.

Asset updates

Get new Framer assets delivered to your inbox

New releases, free assets, and occasional offers. No spam.

Asset updates

Get new Framer assets delivered to your inbox

New releases, free assets, and occasional offers. No spam.