A real-time water surface that refracts whatever you put under it - your headline, your logo, or a photograph. Not a video loop and not a canned shader: your content is drawn into the scene and bent through an actual wave simulation on the GPU. Click the surface and it responds where you touched it. Turn on Rain and drops seed themselves.
All three modes running live:
https://mrmichael-parts-bin.netlify.app/preview/ripple-type-hero/variants
THREE KINDS OF CONTENT
Text - a headline you type. Multi-line: keeps your line breaks, wraps inside a column you set, shrinks to fit. Weight, alignment, leading and tracking are all controls.
A cut-out image - drop in a logo or a shape with transparency and it refracts as a clean silhouette in your Type color, exactly the way letterforms do.
A full-color image - a photograph keeps its own colors through the refraction. The Tint slider moves between the two: 1 flattens it to your Type color, 0 leaves it untouched.
CONTROLS
Content source, the full type and image sets, vertical position, Relief (how hard the water bends your content), Glow, Caustics, three colors and the CTA label. The panel shows only what applies to the content you picked.
BUILT FOR A DESIGN CANVAS
One file, zero npm dependencies - paste the URL onto your canvas and it lands in your Assets panel. Every control is live: drag a slider and the running simulation retunes instead of restarting. Sizes to any frame.
Respects prefers-reduced-motion - the simulation does not start and you get clean static type, or the plain image, instead. Your headline is always a real H1 for screen readers and SEO.
BEFORE YOU BUY
It is a dark-ground component. The water is reflection-only: still water is invisible and you only see it where a crest catches the light. That is what makes it read like real macro water, but it wants a dark Ground. It ships dark.
Needs WebGL2, which every current browser has. Where unavailable it falls back to static content, never an empty frame.
