# Water Pebbles > A hero background of clear, shallow water over a pale stone floor, with smooth river pebbles on the bottom seen through the ripples. Click the water to drop a pebble in with a splash, drag one along the floor to push a bow wave and nudge the stones it meets. Canonical: https://gsapvault.com/effects/water-pebbles Live demo: https://gsapvault.com/demos/water-pebbles/index.html | Property | Value | |----------|-------| | Type | effect | | Tier | paid | | Price | £5 | | Difficulty | advanced | | Plugins | Core GSAP only | | Techniques | webgl-shader, wave-simulation, refraction, draggable | | Uses Lenis | No | ## Overview A hero background that turns the top of the page into a shallow tray of clear water over a pale stone floor. Smooth river pebbles lie on the bottom, seen through a gently moving surface: they bend with the ripples, catch drifting caustic light and carry soft shadows on the floor beneath them. Click or tap the water and a new pebble drops in with a splash, sinks out of focus and settles. Press a pebble and drag it along the floor: it trails your pointer with some weight, pushes a bow wave ahead of it and knocks the stones it runs into, which slide and turn before coming to rest. Arrow keys push the last pebble you touched, and your own buttons can drop pebbles or clear the tray. It is three.js and a single full-screen shader, with no images to host: the floor takes its colour from your page, every stone is generated with its own shape, tone and markings, and pebbles keep clear of any headline you mark. Without JavaScript, without WebGL or under reduced motion it shows a composed CSS still of pebbles resting on the floor instead. ## Features - Real refraction: the floor and every pebble are seen through the moving surface, so ripples visibly bend the stones beneath them - Click or tap to drop a pebble that splashes, sinks out of focus and settles onto the floor - Drag a pebble with weight: it trails the pointer, pushes a bow wave and nudges the stones it meets - Stones collide and turn on a glancing knock, heavier pebbles shoving lighter ones further - Every pebble is generated, not a photo: its own outline, grey tone, mottling, speckle and sometimes a pale quartz vein - The floor colour comes from your page's --page custom property, so the canvas always matches the surrounding design - Keep-clear zones: pebbles stay out from under any element you mark, so headlines on top stay readable - Starting layouts set in markup, with a separate layout for narrow screens - Drop and clear from your own buttons through two simple events - Keyboard control: arrow keys push the last pebble you touched - On touch, vertical swipes over open water still scroll the page - Renders only while on screen, and disposes the WebGL context and every GPU resource on teardown - A composed CSS still for no JavaScript, no WebGL and reduced motion ## Use Cases - Spa, wellness and skincare landing pages that want a calm, tactile first impression - Architecture, interior and landscape studios working with natural materials - Product launches for stone, ceramic, bath or homeware brands - Meditation and mindfulness apps looking for a hero people want to play with - Portfolio and agency sites that need one memorable, interactive above-the-fold moment ## Vibe-Code Ready Setup This effect includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested. [How AI-assisted setup works](https://gsapvault.com/vibe-coding) ## How It Works ### One shader, no images The whole scene is a single full-screen three.js shader. The floor, the stones, their shadows, the caustic light and the reflections on the surface are all drawn per pixel, so there are no textures to host and the scene stays sharp at any size and pixel density. The floor takes its colour from your page, which is why the hero blends into the design around it. ### Water you can disturb A small ripple simulation runs alongside the renderer. Drips, splashes, dragged stones and released stones all disturb it, and the rings spread, bounce and die away naturally. Everything beneath is seen through that surface, so a passing ripple visibly bends the pebbles and brightens and darkens the floor like light through real water. ### Pebbles with weight Each pebble is a physical body on the floor. A held stone trails your pointer rather than snapping to it, pushes a wave ahead of itself as it moves and shoves the stones it meets, lighter ones further than heavy ones, turning them slightly on a glancing hit. Released stones slide to a stop. Stones also slide out from under any content you mark to keep clear. ### Played moments on one clock The short, authored moments are GSAP tweens: a dropped pebble fading in and sinking into focus, a stone lifting slightly while held, and pebbles fading away when the tray is cleared or the oldest is replaced. The continuous simulation runs on the same GSAP ticker, so tweens and physics never drift apart, and the loop pauses whenever the effect is off screen. ### Graceful fallback A tiny check before first paint decides whether a canvas is coming. If it is not, because there is no JavaScript, no WebGL or the visitor prefers reduced motion, the composed CSS still of pebbles is what shows, and it is never hidden until a canvas actually exists. Tearing the effect down puts that still back and releases the WebGL context. ## Documentation How this effect works and how it goes into a page. The reference you use once you own the files (worked examples, events, the programmatic API, the class list) ships with the download. ### Quick Start **1. Add to your HTML ``:** _Code snippet omitted: it ships with the download._ The inline probe is not optional. The CSS still of pebbles is the fallback for no JavaScript, no WebGL and reduced motion, and without the probe it paints for the half second it takes three.js to arrive, then gets swapped for the canvas. The probe runs before first paint, stamps `html.gl` when a canvas is coming, and the stylesheet hides the still under that class. No JavaScript, no class, still shows; and the effect removes the class again if it cannot build a renderer after all. **2. Add to your ``:** _Code snippet omitted: it ships with the download._ **3. Add before the closing `` tag:** _Code snippet omitted: it ships with the download._ The script finds every `[data-pebbles]` element, inserts a canvas as its first child, and hides the still once the canvas is actually there. **Why the import map rather than a plain `