proNew207 lines · framer-motion

Ripple Pond

Click anywhere, watch it answer. A full-width section backed by a canvas ripple pond: clicking or tapping anywhere sends out an expanding, fading ring, and quiet ambient ripples rise on their own so the surface is never still, under a short glass-card headline.

Use it for: A playful, tactile section break for a product demo or interactive showcase that rewards the visitor for touching the page.
Themes: Light + dark
License: Commercial use

Live

Tap the pond

Click anywhere, watch it answer

The surface ripples wherever you touch, and sometimes on its own.

tsx

"use client";

import * as React from "react";
import { motion, useReducedMotion } from "framer-motion";
import { cn } from "@/lib/utils";

function useReducedMotionSafe() {
  const prefersReduced = useReducedMotion();
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => setMounted(true), []);
  return mounted ? !!prefersReduced : false;
}

/**
 * Full-width section backed by a canvas ripple pond: clicking anywhere sends out an
 * expanding, fading ring, and quiet ambient ripples rise on their own so the surface
 * never looks dead. A glass card holds a short headline on top.
 */

export interface BgRippleProps {
  eyebrow?: string;
  headline?: string;

The rest is in Pro.

Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.

Get Pro

How it behaves

→A pointerdown anywhere in the section spawns an expanding, fading ring at that point; up to 24 rings can be alive at once.
→Ambient ripples spawn on their own every ambientEvery seconds (set to 0 to disable) at a slowly drifting position, so the pond stays alive without input.
→speed scales how fast rings expand and fade; accent picks the ring colour token, re-read from CSS variables on theme change.
→Pauses the animation loop when the section scrolls offscreen or the tab is hidden; with prefers-reduced-motion, clicks still draw a single static ring instead of an expanding, looping one.

Accessibility

✓Canvas and overlays are aria-hidden and pointer-events are routed to the ripple layer directly; the heading and copy remain in the accessibility tree.
✓Headline sits on a translucent blurred card for contrast against the ripples in both themes.
✓The click interaction is a decorative enhancement and carries no required keyboard equivalent since it triggers no state change outside the canvas.
✓Honours prefers-reduced-motion.