Cursor

import { Cursor } from '@hanzo/ui'

export function Default() {
  return (
    <Cursor>
      <YStack p="$8" items="center" justify="center" bg="$color2" rounded="$4">
        <SizableText>Move your mouse over this area</SizableText>
      </YStack>
    </Cursor>
  )
}

export function Labelled() {
  return (
    <Cursor cursorText="✨" cursorSize={28}>
      <YStack p="$8" items="center" justify="center" bg="$color2" rounded="$4">
        <SizableText>A label rides along with the dot</SizableText>
      </YStack>
    </Cursor>
  )
}

export function Small() {
  return (
    <Cursor cursorSize={10}>
      <YStack p="$8" items="center" justify="center" bg="$color2" rounded="$4">
        <SizableText>A smaller follower</SizableText>
      </YStack>
    </Cursor>
  )
}

Types

export type CursorPosition = { x: number; y: number }

export type CursorProps = {
  /** Content the cursor effect plays over. */
  children: ReactNode
  /** Label drawn inside the follower dot; omit for a bare dot. */
  cursorText?: string
  /** Diameter of the follower dot, in px. */
  cursorSize?: number
  /** Class notation, converted to style props on the frame. */
  className?: string
}

Exports