Click Spark

Component 23

About

Clik spark animation

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

Code

How Click Spark is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { ClickSpark } from "@/components/ui/click-spark"; // Adjust path as needed

const DemoOne = () => {
  // Props for ClickSpark based on the usage example,
  // but sparkColor will be 'currentColor' to adapt to the theme.
  const sparkSizeValue: number = 10;
  const sparkRadiusValue: number = 15;
  const sparkCountValue: number = 8;
  const animationDuration: number = 400;

  return (
    <div className="flex flex-col w-full h-screen justify-center items-center 
                   select-none 
                   bg-white text-black 
                   dark:bg-black dark:text-white 
                   transition-colors duration-300">
      
      <ClickSpark
        sparkColor="currentColor" // This will be black in light mode, white in dark mode
        sparkSize={sparkSizeValue}
        sparkRadius={sparkRadiusValue}
        sparkCount={sparkCountValue}
        duration={animationDuration}
        // className for the ClickSpark wrapper div
        // This div will take up the full screen due to parent flex item taking space
        className="w-full h-full" 
      >
        {/* Content to display inside ClickSpark, centered by ClickSpark's inner div */}
        <div className="text-4xl sm:text-5xl font-bold 
                        text-black opacity-60
                        dark:text-white dark:opacity-60">
          Click Around!
        </div>
      </ClickSpark>
      
    </div>
  );
};

export { DemoOne };