CustomCursor

Custom branded cursor replacement with smooth trailing motion.

stable overlay #cursor#motion#branding

Move your mouse here to see the cursor

The custom cursor is active globally while this demo is mounted. Mount at your app root in production.

Loading preview…

Usage

Mount at the app root so it's active sitewide. In the Djasha System playground it applies globally for the duration of the preview — this is intentional and expected. Use on brand-forward sites where cursor personality adds to the experience. Not for utility apps or sites with lots of precise click targets.

Do / Don't

- **Do** mount exactly once, at the layout root. - **Do** test with keyboard navigation — the cursor hides on mouse leave and respects focus order. - **Don't** use on sites with heavy form use — even though native cursor is restored on inputs, the overlay can feel distracting. - **Don't** stack multiple `<CustomCursor>` instances — they'll fight over the global class.

Tokens

A11y

Disabled on touch devices (doesn't mount on pointer:coarse). Falls back to native cursor if prefers-reduced-motion. Does not hide the native cursor on hover-interactive elements like inputs. Cleans up all event listeners and the global CSS class on unmount.

Source

src/components/CustomCursor.tsx

Live playground