Ripple Media · Smallest

Default

Click anywhere on the image to send a ring out from that point. The plain image shows until WebGL is ready. Images from another origin need crossOrigin set to anonymous.

Duration

Seconds per ripple. The default is 1; this compares 0.6 and 2.

import { RippleMedia } from "@smallest-inc/ui";

export default function RippleMediaDuration() {
  return (
    <div className="grid w-full grid-cols-2 gap-4">
      <RippleMedia
        src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?auto=format&fit=crop&w=1200&q=80"
        alt="Mountain ridge above a sea of clouds"
        crossOrigin="anonymous"
        duration={0.6}
        className="aspect-video w-full rounded-2xl"
      />
      <RippleMedia
        src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?auto=format&fit=crop&w=1200&q=80"
        alt="Mountain ridge above a sea of clouds"
        crossOrigin="anonymous"
        duration={2}
        className="aspect-video w-full rounded-2xl"
      />
    </div>
  );
}

Disabled

Skips WebGL and renders a plain image. Reduced motion does the same automatically.

Best practices

When to use

Use for a single decorative hero or marketing image where a tactile click effect adds delight.
Do not use it for product imagery, thumbnails or anything people click to navigate.

Behavior

Clicking sends a ring from the pointer. duration is seconds per ripple (default 1).
The plain image shows until WebGL is ready. disabled, or prefers-reduced-motion, keeps it static.
Images from another origin need crossOrigin="anonymous" or WebGL cannot read them.

Accessibility

alt describes the image, not the effect. The ripple is decorative and adds no information.