║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

export const metadata = { title: 'Cursor - Motion-Primitives', description: 'A custom cursor component with optional spring animations. It can be globally applied to the page or attached specifically to a parent element. Built for React, Next.js, and Tailwind CSS.', };

import { Cursor1 } from './cursor-1'; import { Cursor2 } from './cursor-2'; import { Cursor3 } from './cursor-3'; import ComponentCodePreview from '@/components/website/component-code-preview';

Cursor

A custom cursor component with optional spring animations. It can be globally applied to the page or attached specifically to a parent element.

Examples

Cursor with image and spring

<ComponentCodePreview component={<Cursor1 />} filePath='app/docs/cursor/cursor-1.tsx' />

Cursor with custom component

<ComponentCodePreview component={<Cursor2 />} filePath='app/docs/cursor/cursor-2.tsx' />

Cursor with image and spring

<ComponentCodePreview component={<Cursor3 />} filePath='app/docs/cursor/cursor-3.tsx' />

Installation

<Tabs defaultValue="cli"> <TabsList> <TabsTrigger value='cli'>CLI</TabsTrigger> <TabsTrigger value='manual'>Manual</TabsTrigger> </TabsList> <TabsContent value="cli"> <InstallationCli value='cursor' /> </TabsContent> <TabsContent value="manual"> <Steps>

<Step>Copy and paste the following code into your project.</Step>

<CodeBlock filePath='components/core/cursor.tsx' />

<Step>Update the import paths to match your project setup.</Step>

</Steps> </TabsContent> </Tabs>

Component API

| Prop | Type | Default | Description | | :--------------- | :----------------------------------------------- | :------- | :------------------------------------------------------------------------------------------------------------ | | children | ReactNode | required | Children to be rendered within the custom cursor. Mandatory. | | className | string | | Optional CSS class for styling the custom cursor container. | | springConfig | SpringOptions | | Configuration for the spring physics used in the cursor's movement. | | attachToParent | boolean | false | If true, the cursor will only be visible when hovering over its parent component. | | transition | Transition | | Transition settings from motion for animation effects. | | variants | Object (with initial, animated, exit properties) | | Variants for controlling the animation states with specific properties for initial, animate, and exit states. | | onPositionChange | (position: { x: number, y: number }) => void | | Callback function that is called when the cursor position changes. |

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║