Custom Cursor — Site-wide Interactive Cursor

[AbinVarghexe]

Description

Implement a custom cursor design across the entire site based on the Figma design (Section: "Cursor Design", Node 645:1066).

Requirements

• Custom cursor that replaces the default browser cursor
• Smooth follow animation with slight lag/spring effect
• Cursor changes state on interactive elements (links, buttons)
• Possible states: default, hover (expand), click (shrink)
• Hide default cursor via CSS (cursor: none)

Technical Requirements

• Create app/components/ui/CustomCursor.tsx component
• Mount in root layout.tsx so it persists across all pages
• Use Framer Motion for smooth cursor tracking
• Must not interfere with pointer events on clickable elements
• Performance: use requestAnimationFrame or motion values, NOT state-driven re-renders
• Disable on touch devices (mobile/tablet)

Branch

feat/custom-cursor

Figma Reference

• Section: Node 645:1066

Parent: #1