Live page · scroll inside

Premiumwater charity · light · landing page · gsap · lenis · html

Ripple

A water-charity site in pale blue and ink whose donation slider raises the water level in an SVG tank with a sine surface that sloshes and settles and recomputes the impact figures, with a hover-linked map of twelve wells, field stories, a money bar and a donate card.

Placeholder photos by Nathan Dumlao, Saifee Art, cool guy jon, Jouni Rajala and manu schwendener on Unsplash. Replace them with your own before launch.

What's inside

01
Filling-drop preloader
A clipped water rect rises inside the drop over 1.2 s with a small wave on its surface; the name fades; the slab lifts and the hero intro begins.
02
Fixed bar with donate pill
Turns translucent after 80 px; underlines draw in blue on hover.
03
Hero with a rising water column
Lines rise from masks; the photo settles from 1.08; the column's water level rises from 8 % to 100 % scrubbed across the hero with a surface that ripples a few times, and a small readout beside it climbs from 0 to 1,000 litres.
04
Donation slider with a water tank
Dragging the slider tweens the water's height (0.6 s power3.out), the surface sloshes with a sine path redrawn each frame and calms within about four seconds, and the figures count to their new values over 0.5 s; chips snap the slider.
05
Map of wells
Markers pop in with a stagger as the map enters; each sends out one 2.4 s halo as it lands; hovering a list row or a marker enlarges the marker 1.6× and draws a leader line to its label.
06
Field stories
Cards unroll from the bottom with a stagger; on hover the photo zooms 1.05 and the quote's backdrop deepens.
07
Where the money goes
The bar wipes in left to right on enter; figures count up; the photo drifts 8 % as it scrolls.
08
Donate card
The card rises in; choosing a chip ripples a blue ring outward from it (0.6 s); the button's label swaps to 'Give $X' as the amount changes; submitting shows a thank-you line with a small drop that fills.
09
Minimal footer
None beyond link colour on hover.

Utility pages in the same file: 404 · Style guide · Password · Changelog

How to use it

From prompt to a live page.

01
Walk the page
The preview is the real template: loader, scene, scroll choreography. Scroll inside it or open it full-screen.
02
Pick a palette
Token sets re-tint the whole page live, scene included. The prompt carries the one you chose.
03
Pick your stack
Single HTML, Next.js, React, Vue, Astro, WordPress blocks, Shopify sections or a Webflow build guide.
04
Copy the prompt
It carries the art direction, the tokens, the motion system and every section's layout, motion and content, in order.
05
Make it yours, then iterate
Swap copy and images first, keeping the structure. Then refine section by section rather than re-running the whole prompt.

More templates

Free♥ 0

Abacus

Accountancy practice

Template

Premium♥ 0

Kittiwake Air

travel/regional airline

Template

Premium♥ 0

Laneline

sport/mobile app

Template

Free♥ 0

Beacon

Feature flags

Template

Loading…

Ripple

What's inside

Filling-drop preloader

A clipped water rect rises inside the drop over 1.2 s with a small wave on its surface; the name fades; the slab lifts and the hero intro begins.

Fixed bar with donate pill

Turns translucent after 80 px; underlines draw in blue on hover.

Hero with a rising water column

Lines rise from masks; the photo settles from 1.08; the column's water level rises from 8 % to 100 % scrubbed across the hero with a surface that ripples a few times, and a small readout beside it climbs from 0 to 1,000 litres.

Donation slider with a water tank

Dragging the slider tweens the water's height (0.6 s power3.out), the surface sloshes with a sine path redrawn each frame and calms within about four seconds, and the figures count to their new values over 0.5 s; chips snap the slider.

Map of wells

Markers pop in with a stagger as the map enters; each sends out one 2.4 s halo as it lands; hovering a list row or a marker enlarges the marker 1.6× and draws a leader line to its label.

Field stories

Cards unroll from the bottom with a stagger; on hover the photo zooms 1.05 and the quote's backdrop deepens.

Where the money goes

The bar wipes in left to right on enter; figures count up; the photo drifts 8 % as it scrolls.

Donate card

The card rises in; choosing a chip ripples a blue ring outward from it (0.6 s); the button's label swaps to 'Give $X' as the amount changes; submitting shows a thank-you line with a small drop that fills.

Minimal footer

None beyond link colour on hover.

How to use it

From prompt to a live page.

Walk the page

The preview is the real template: loader, scene, scroll choreography. Scroll inside it or open it full-screen.

Pick a palette

Token sets re-tint the whole page live, scene included. The prompt carries the one you chose.

Pick your stack

Single HTML, Next.js, React, Vue, Astro, WordPress blocks, Shopify sections or a Webflow build guide.

Copy the prompt

It carries the art direction, the tokens, the motion system and every section's layout, motion and content, in order.

Make it yours, then iterate

Swap copy and images first, keeping the structure. Then refine section by section rather than re-running the whole prompt.