Comet Card
A perspective, 3D, Tilt card as seen on Perplexity Comet's website.
Installation
Run the following command
npx shadcn@latest add @aceternity/comet-cardProps
| Prop | Type | Default | Description | Required |
|---|---|---|---|---|
rotateDepth | number | 17.5 | Controls the depth of 3D rotation effect on mouse movement. Higher values create more dramatic rotation. | No |
translateDepth | number | 20 | Controls the depth of translation (movement) effect on mouse movement. Higher values create more dramatic movement. | No |
className | string | undefined | Additional CSS classes to apply to the card container. | No |
children | React.ReactNode | - | The content to be rendered inside the card. | Yes |
Build websites faster and 10x better than your competitors with
Aceternity UI Pro
Next.js 15, Tailwind CSS v4 and Motion for react powered templates
200+ templates and blocks combined
Ready to copy paste component blocks, save days of development time
