Dynamic Ripple

Interactive

Move your cursor over this card to create dynamic water ripple effects. Perfect for creating engaging UI elements.

High Intensity

A more intense ripple effect with slower speed, creating a cosmic wave-like animation that reacts to your movements.

Fast

A subtle but fast ripple effect that mimics the gentle pulse of nature. Lower intensity with higher speed.

Extreme

The most intense and fastest ripple effect, creating an energetic and dynamic interaction experience.

Installation

pnpm dlx shadcn@latest add "https://nuvyxui.vercel.app/r/dynamic-ripple.json"

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>

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`	`undefined`	Content to be rendered inside the ripple component.