Docs
Cursor Cards
Cursor Cards
Interactive cards with animated gradient borders that respond to cursor movement and proximity. Inspired by Cursor's website.
Installation
Usage
import { CursorCardsContainer, CursorCard } from "@/components/ui/cursor-cards";<CursorCardsContainer>
<CursorCard>
<div className="h-full w-full py-4 px-6 max-w-72 space-y-2">
<h3 className="font-gilroy text-2xl">Cursor Card</h3>
<p className="text-sm">
This is a cursor card component.
</p>
</div>
</CursorCard>
</CursorCardsContainer>Props
cursor-cards-container props.
| Prop | Type | Description | Default |
|---|---|---|---|
| children | React.ReactNode | The child components to render inside the container. | - |
| className | string | Additional custom classes. | - |
| proximityRange | number | Range in pixels for detecting mouse proximity. | 400 |
cursor-card props.
| Prop | Type | Description | Default |
|---|---|---|---|
| children | React.ReactNode | The content to render inside the card. | - |
| className | string | Additional custom classes. | - |
| illuminationRadius | number | Radius of the illumination effect in pixels. | 200 |
| illuminationColor | string | Color of the illumination effect. | "#FFFFFF10" |
| illuminationOpacity | number | Opacity of the illumination effect (0-1). | 0.8 |
| primaryHue | string | Primary color for the gradient border. | "#EC4899" |
| secondaryHue | string | Secondary color for the gradient border. | "#6D77D5" |
| borderColor | string | Default border color when not hovering. | "#E5E5E5" |