Radial Ripple Reveal Card

The Radial Ripple Reveal Card is an interactive UI component that creates a tap-like circular shrink animation at the exact cursor position. When the user hovers over the card, the image collapses inward as a shrinking radial clip, exposing the animated background below. The effect feels similar to a mobile ripple touch response — smooth, reactive, and visually engaging — making it perfect for modern portfolios, feature highlights, or experimental UI showcases.

lucide-reactframer-motion
Hover to Heal
Split

Installation

Install the required dependencies:

npm install lucide-react framer-motion
lib/utils.ts
import { clsx, type ClassValue } from "clsx"
  import { twMerge } from "tailwind-merge"
  
  export function cn(...inputs: ClassValue[]) {
    return twMerge(clsx(inputs))
  }
components/ui/radial-ripple-reveal-card.tsx
"use client";
import React from "react";
import { motion } from "framer-motion";

type cardProps = {
  title?: string;
  description?: string;
};

export function BorderGlowCardOne({ title, description }: cardProps) {
  return (
    <div className="flex justify-center flex-wrap items-center">
      <div className="group relative rounded-xl p-[2px] bg-gradient-to-br from-pink-500 via-purple-500 to-indigo-500 hover:shadow-2xl transition-all duration-300">
        <div className="rounded-xl bg-white dark:bg-zinc-900 p-6 group-hover:bg-opacity-90">
          <h3 className="text-lg font-bold text-black dark:text-white mb-2">
            Interactive Magic
          </h3>
          <p className="text-sm text-gray-700 dark:text-gray-300">
            Hover to experience gradient glow and subtle inner animation.
          </p>
        </div>
      </div>

      <motion.div
        whileHover={{ scale: 1.03 }}
        transition={{ duration: 0.4, ease: "easeInOut" }}
        className="relative rounded-xl overflow-hidden p-[2px] bg-gradient-to-tr from-purple-400 via-pink-500 to-red-500 shadow-xl"
      >
        <div className="bg-white dark:bg-zinc-900 rounded-xl p-5 h-full w-full">
          <h3 className="text-xl font-semibold text-black dark:text-white">
            Glow Card
          </h3>
          <p className="text-gray-600 dark:text-gray-300 mt-2">
            Subtle scale with glowing gradient border.
          </p>
        </div>
      </motion.div>
    </div>
  );
}
  
export function BorderGlowCardTwo() {
  return (
    <div className="flex justify-center flex-wrap items-center">
      <div className="group relative rounded-xl p-[2px] bg-gradient-to-br from-pink-500 via-purple-500 to-indigo-500 hover:shadow-2xl transition-all duration-300">
        <div className="rounded-xl bg-white dark:bg-zinc-900 p-6 group-hover:bg-opacity-90">
          <h3 className="text-lg font-bold text-black dark:text-white mb-2">
            Interactive Magic
          </h3>
          <p className="text-sm text-gray-700 dark:text-gray-300">
            Hover to experience gradient glow and subtle inner animation.
          </p>
        </div>
      </div>

      <motion.div
        whileHover={{ scale: 1.03 }}
        transition={{ duration: 0.4, ease: "easeInOut" }}
        className="relative rounded-xl overflow-hidden p-[2px] bg-gradient-to-tr from-purple-400 via-pink-500 to-red-500 shadow-xl"
      >
        <div className="bg-white dark:bg-zinc-900 rounded-xl p-5 h-full w-full">
          <h3 className="text-xl font-semibold text-black dark:text-white">
            Glow Card
          </h3>
          <p className="text-gray-600 dark:text-gray-300 mt-2">
            Subtle scale with glowing gradient border.
          </p>
        </div>
      </motion.div>
    </div>
  );
}