Skip to main content

<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.

CursorPreview
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.

Inherited props​

<MacOSCursor> inherits from, durationInFrames, trimBefore, playbackRate, freeze, hidden, name and showInTimeline from <Sequence>.

From v4.0.528, it also inherits premountFor, postmountFor, styleWhilePremounted and styleWhilePostmounted from <Sequence>.

Compatibility​

BrowsersEnvironments
Chrome
Firefox
Safari

See also​