Components
Loading preview...
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.
@tonyzebastian
npx shadcn@latest add https://21st.dev/r/tonyzebastian/comet-heroimport 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>
);
}