<MacOSCursor>v4.0.513

Renders a macOS cursor with its hotspot placed at the component origin.

Named CSS cursors use SVGs bundled with the package. Custom cursors use the supplied image and hotspot.

Included cursors

The package includes 39 cursor assets. The pink crosshair marks the hotspot that is placed at the component origin.

Cursor	Preview
`alias`
`all-scroll`
`auto`
`beachball`
`busy`
`cell`
`col-resize`
`context-menu`
`copy`
`crosshair`
`e-resize`
`grab`
`grabbing`
`handpointing`
`help`
`n-resize`
`ne-resize`
`nesw-resize`
`no-drop`
`ns-resize`
`nw-resize`
`nwse-resize`
`poof`
`resizedown`
`resizeleft`
`resizeright`
`resizesouth`
`resizesoutheast`
`resizesouthwest`
`resizeup`
`resizeupdown`
`resizewest`
`resizewesteast`
`screenshotselection`
`screenshotwindow`
`text`
`textcursorvertical`
`zoom-in`
`zoom-out`

Example

Cursor.tsx
import {MacOSCursor} from '@remotion/mac-cursors';

export const Cursor = () => {
  return (
    <MacOSCursor
      cursor="pointer"
      style={{left: 200, top: 300, scale: 2}}
    />
  );
};

Custom cursors may be quoted or unquoted and may include a hotspot:

CustomCursor.tsx
import {MacOSCursor} from '@remotion/mac-cursors';

const src = 'data:image/svg+xml;base64,PHN2Zy8+';

export const CustomCursor = () => {
  return (
    <MacOSCursor
      cursor="custom"
      customCursor={`url("${src}") 12 8, pointer`}
    />
  );
};

API

`cursor?`

A CSS cursor name such as "default", "pointer", or "text". Set it to "custom" to use the customCursor prop. Default: "default".

Unknown cursor keywords render the default arrow. "none" renders nothing.

`customCursor?`

A CSS custom cursor value such as url("...") 12 8, pointer. It is used when cursor is set to "custom".

`className?`

A CSS class name for the cursor image.

`style?`

CSS styles for the cursor image. Use left and top to position it without changing the hotspot correction.

Timing and display props

The component also accepts InteractiveBaseProps, including durationInFrames, from, trimBefore, freeze, hidden, name, and showInTimeline.

Compatibility

Browsers			Environments
Chrome	Firefox	Safari	Client-side rendering	Server-side rendering	Player	Studio

Included cursors​

Example​

API​

cursor?​

customCursor?​

className?​

style?​

Timing and display props​

Compatibility​

See also​