Installation

Usage

import {
  CustomCursor,
  CustomCursorTarget,
} from '@/components/sora-ui/effects/custom-cursor';

export default function Page() {
  return (
    <CustomCursor color="#ff4c24">
      <CustomCursorTarget>
        <YourLogo />
      </CustomCursorTarget>
    </CustomCursor>
  );
}

Props

CustomCursorTarget

When to Use

Use CustomCursor on creative portfolio sites, interactive landing pages, or immersive showcases where a distinct cursor reinforces brand personality. It pairs well with hero sections that invite exploration.

Limit it to desktop viewports only — the component only activates when a pointer device is present. On touch devices it renders nothing and causes no side effects.

Accessibility

The custom cursor is purely visual. It does not change keyboard navigation, tab order, or focus indicators. Standard :focus-visible styles remain fully functional alongside it. When prefers-reduced-motion: reduce is set, the component already doesn't render — no extra configuration needed.