Dynamic Ripple renders a water-like disturbance that spreads from the pointer as you move across the surface, with separate touch handling for mobile. Ripple speed, density, and decay are configurable through props, and the effect works on top of any background. Built with React, canvas, and Tailwind CSS. Suited for hero sections, full-bleed feature demos, or landing pages that need an ambient interactive layer.
Installation
Usage
import { DynamicRipple } from "@/components/ui/dynamic-ripple";<DynamicRipple theme="blue" intensity={3} speed={3} rounded="lg">
<div className="p-8 relative z-10">Your content here</div>
</DynamicRipple>Props
| Prop | Type | Default | Description |
|---|---|---|---|
theme | string | "blue" | The color theme of the ripple effect. Options: "blue", "purple", "green", "amber", "rose", "custom". |
customColors | object | undefined | Custom colors for the ripple when theme is set to "custom". Should include properties: primary and secondary. |
intensity | number | 3 | The intensity of the ripple effect (1-5). |
speed | number | 3 | The speed of the ripple animation (1-5). |
reactToCursor | boolean | true | Whether to enable the ripple effect on cursor movement. |
autoAnimate | boolean | true | Whether to enable the automatic ripple animation. |
rounded | string | "lg" | The border radius of the component. Options: "none", "sm", "md", "lg", "xl", "full". |
gradientOverlay | boolean | true | Whether to apply a gradient overlay. |
className | string | "" | Additional CSS classes to apply. |
children | React.ReactNode | Required | Content to be rendered inside the ripple component. |