Future UI

Ripple

✦ Effects

Canvas hover effect that creates ripples on background images.

effectsripple

No preview available

Canvas2D + GSAP ~ Hover to Interact

Controls

0.35
14

Effects / React Component

About Ripple

Canvas hover effect that creates ripples on background images.

Category Effects
Framework React + TypeScript
Dependencies gsap
Tags effects, ripple

Install Ripple in your project

Copy the shadcn CLI command below. Replace YOUR_LICENSE_KEY with the license key from your FutureUI account — or log in and it will auto-fill for you.

npx shadcn@latest add "https://futureui.studio/api/registry/ripple.json?key=YOUR_LICENSE_KEY"

Usage example

import { useRef, useState, useEffect } from 'react';
import { RippleEffect } from './ripple-effect';

export default function Example() {
  const containerRef = useRef<HTMLDivElement>(null);
  const [size, setSize] = useState<{ width: number; height: number } | null>(null);

  useEffect(() => {
    const el = containerRef.current;
    if (!el) return;
    const ro = new ResizeObserver(([entry]) => {
      const { width, height } = entry.contentRect;
      if (width > 0 && height > 0) setSize({ width: Math.round(width), height: Math.round(height) });
    });
    ro.observe(el);
    return () => ro.disconnect();
  }, []);

  return (
    <div ref={containerRef} style={{ width: '100%', height: 500 }}>
      {size && <RippleEffect
        imageSrc="/your-image.jpg"
        width={size.width}
        height={size.height}
        strength={14}
        radius={0.35}
      />}
    </div>
  );
}