Water Ripple Text

PRONew

Preview live, install via shadcn or copy the source.

Installation

Install via shadcn

This will install the component and its dependencies automatically.

PRO COMPONENT

Unlock with PRO

This component is exclusive to reframe/ui PRO.
Get instant access to all premium components and templates.

Usage

water-ripple-usage.tsxTSX

Props

NameTypeDefaultRequiredDescription
textstringYesPrimary text (first line). Use \n for multi-line.
secondTextstringNoOptional second line below primary.
intensitynumber0.42NoRipple distortion intensity 0-1 (maps to shader distortion).
scalenumber1NoOverall text scale multiplier.
radiusnumber20NoRipple interaction radius (px in sim space).
rippleStrengthnumber1NoPressure added per ripple interaction.
waveAmplitudenumber0.01NoSecondary sine wave amplitude.
waveFrequencynumber10NoWave frequency.
dampingnumber0.002NoVelocity damping.
heightstring | number100vhNoContainer height.
backgroundstringNoBackground color.
colorstringNoPrimary text color.
classNamestringNoWrapper class.
© reframe/ui 2026Built by @thommysart
More in 3D & Shaders