Point Cursor
A sophisticated custom cursor system that transforms the standard mouse pointer into a precision instrument. It features a center dot and a smooth trailing ring that dynamically reacts to interactive elements, providing a premium feel to any section or entire application.
Interactive Playground
The custom cursor is only active inside this box. Hover over the elements to test the Dot-to-Ring transformation.
Has 'clickable' class
Normal behavior
npx futureuikit add point-cursorBuilt with Framer Motion for high-performance, physics-based animations.Smart isolation: the custom cursor is only active within the wrapped container.Intelligent hover detection: automatically expands when hovering over links, buttons, or elements with the 'clickable' class.Smooth trailing effect using spring-based motion values.Fully customizable colors for both the central dot and the trailing ring.Accessibility conscious: falls back to the system cursor when not active.
- Import PointCursor from your UI components directory.
- Wrap the desired section, page, or layout with the PointCursor component.
- Optionally customize 'dotColor' and 'ringColor' to match your theme.
- Add the 'clickable' class to any custom elements you want the cursor to react to.