Ripple

Source: Magic UI ↗
Author: Magic UI
Licence: MIT

Loading…

Concentric rings pulse outward behind a word.

Code

"use client";

import { Ripple } from "@/lab/magicui/ui/ripple";

export default function RippleDemo() {
  return (
    <div className="relative flex h-full w-full flex-col items-center justify-center overflow-hidden">
      <p className="z-10 text-center text-5xl font-medium tracking-tighter whitespace-pre-wrap text-neutral-950">
        Ripple
      </p>
      <Ripple />
    </div>
  );
}

Prompt

Build "Ripple", a background animation. What it does: Concentric rings pulse outward behind a word. Write it as a single self-contained React component in TypeScript that fills its parent (w-full h-full), styled with Tailwind CSS. It sits on a light background, in a 16:10 frame. Respect prefers-reduced-motion with a still state, pause work when the element is off screen, and keep it accessible. Original: https://magicui.design/docs/components/ripple (Magic UI, MIT).