Components
CrystalCursorGhost
Cursor-following image preview that trails the mouse on hover.
CrystalCursorGhost creates a preview image that follows the cursor at 60fps using gsap.quickTo. Desktop only with graceful mobile fallback. Typically paired with a list of items where hovering reveals a project preview.
Import
import { CrystalCursorGhost } from '@artasce/crystal-ui';Usage
const [activeIndex, setActiveIndex] = useState<number | null>(null);
<div>
{projects.map((project, i) => (
<div
key={project.id}
onMouseEnter={() => setActiveIndex(i)}
onMouseLeave={() => setActiveIndex(null)}
>
{project.title}
</div>
))}
<CrystalCursorGhost
images={projects.map(p => p.image)}
activeIndex={activeIndex}
/>
</div>Props
CrystalCursorGhost Props
| Token | Variable | Value |
|---|---|---|
images | string[] | (required) |
activeIndex | number | null | (required) |
width | number | 680 |
height | number | 383 |
offsetX | number | 80 |
offsetY | number | -200 |
duration | number | 0.3 |
className | string | — |
Values update live with theme changes. Click any row to copy the CSS variable.
Performance
Uses gsap.quickTo instead of gsap.to for X/Y position updates, avoiding timeline creation on every mouse move. This ensures smooth 60fps tracking even on complex pages.