Background Ripple Effect

Heroes 288

About

A Hero component where background cells once clicked, create a ripple effect

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Background Ripple Effect to your project and fits it to your theme.

Code

How Background Ripple Effect is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { BackgroundCells } from "@/components/blocks/background-ripple-effect";

export const BackgroundCellsDemo = () => {
  return (
    <BackgroundCells className="bg-slate-950">
      <h1 className="md:text-2xl lg:text-7xl font-medium text-center bg-clip-text text-transparent bg-gradient-to-b from-neutral-100 to-neutral-400 pointer-events-none">
        Background cell animation <br />
        with framer motion
      </h1>
    </BackgroundCells>
  );
};