Dual Sparks

Heroes 19

About

A canvas background effect that emits animated spark waves radiating outward and inward from the top corners of a container, for hero sections and decorative backgrounds.

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

Code

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

Usage.tsx

import { DualSparks } from "@/components/ui/dualsparks";

export default function DualSparksDemo() {
  return (
    <DualSparks
      sparkColor="#000000"
      sparkColorDark="#ffffff"
      sparkSize={2}
      sparkCount={22}
      ringsPerWave={3}
      waveInterval={1200}
      maxRadius={1000}
      corners="both"
      className="w-full h-screen flex items-center bg-black justify-center"
    >
      <h2 className="bg-clip-text text-transparent text-center bg-linear-to-b from-neutral-900 to-neutral-700 dark:from-neutral-600 dark:to-white text-2xl md:text-4xl lg:text-7xl font-sans font-bold tracking-tight relative z-20">
        DualSparks, <br /> Background.
      </h2>
    </DualSparks>
  );
}