Comet Hero

Heroes 113

About

An animated SVG component recreating the swirling line animation from the Perplexity Comet download page. Features four 3D-rotated circles with gradient strokes (teal, orange, rose, amber) animated via strokeDashOffset. The visual effect comes from carefully tuned rotation angles, gradients, and animation speeds to achieve the signature swirling motion.

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

Code

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

Usage.tsx

import React from 'react';
import CometHero from "@/components/ui/comet-hero";
import { Download } from 'lucide-react';

// Custom Button Component
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  children: React.ReactNode;
}

const Button: React.FC<ButtonProps> = ({ children, className = '', ...props }) => {
  return (
    <button
      className={`inline-flex items-center justify-center gap-2 px-6 py-3 text-lg rounded-md font-medium bg-slate-100 text-slate-900 hover:bg-slate-200 transition-colors dark:bg-slate-800 dark:text-slate-100 dark:hover:bg-slate-700 ${className}`}
      {...props}
    >
      {children}
    </button>
  );
};

export default function CoinFlipPage() {
  return (
    <div className="flex items-center justify-center w-full min-h-screen relative">
      <div className="text-center">
        <h1 className="font-serif text-4xl dark:text-slate-200 text-slate-800 pb-2 tracking-wide">
          Welcome to Comet
        </h1>
        <p className="dark:text-slate-500 text-slate-600 text-sm font-sans tracking-wider">
          Your download is starting automatically. Click below to retry manually.
        </p>
        <div className="pt-8">
          <Button className="font-sans tracking-wide cursor-pointer">
            <Download className="w-4 h-4" />
            Download Comet
          </Button>
          <p className="text-slate-500 text-xs pt-2 font-sans tracking-wider">
            For macOS 14 or later
          </p>
        </div>
      </div>
      <div className="w-full max-w-[900px] absolute">
        <CometHero />
      </div>
    </div>
  );
}