Spiral Animation

A mesmerizing animated golden spiral component featuring 600+ pulsing dots arranged in the mathematically perfect Fibonacci spiral pattern. Each dot pulses with smooth radius and opacity animations, creating a hypnotic wave effect that flows from center to edge. Built with TypeScript, fully customizable with props for dot count, colors, size, and animation timing. Perfect for landing pages, loading screens, or any interface that needs an elegant mathematical visualization.

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

import { SpiralAnimation } from "@/components/ui/spiral-animation";

const settings = {
  totalDots: 600,
  dotRadius: 2,
  size: 400,
  dotColor: "#ffffff",
  backgroundColor: "#000000",
  margin: 2,
};

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  return (
    <div className="h-screen w-screen">
      <SpiralAnimation {...s} />
    </div>
  );
}