Nexus UI

Cursor Buddy, animated React component

A soft little character whose eyes follow the pointer across the page, sliding round its curved face, blinking now and then, flinching when you come close and dozing off when left alone.

  • Free
  • Motion Effects
  • Hover
  • Spring
  • 3D

Play with it

Move the controls and watch it change. Copy code gives you a snippet with only the props you changed.

Props

PropTypeDefaultWhat it does
shape"squircle" | "pill" | "circle""squircle"Silhouette of the character.
fill"light" | "dark" | string"light"Body colour: the light or dark preset, or any CSS colour.
eyes"dots" | "slits" | "squares""dots"Eye style.
sizenumber120Height of the body in px. The pill is wider than it is tall.
follownumber60How far the head turns towards the pointer, 0–100.
sleepAfternumber9000Fall asleep after this many ms without pointer movement. 0 keeps it awake.
eyeColorstring—Eye colour. Defaults to ink on light bodies and white on dark ones.
classNamestring—Classes for the outer wrapper.

Add it to your project

  1. 1

    Prepare your project

    You need Tailwind CSS and the @/import alias. If shadcn isn't set up yet, initialise it once:

    npx shadcn@latest init

    Then add the Nexus registry to your components.json (the registries key is the part that matters):

    {
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "css": "src/app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "registries": {
    "@nexus-labs": "https://www.nexus-ui.com/api/registry/{name}"
  }
}
  2. 2

    Add the component

    Run this from your project root. It adds the component, the utilities it uses and its packages.

    npx shadcn@latest add @nexus-labs/cursor-buddy
  3. 3

    Check what was added

    With the standard aliases, these files land in your project:

    components/
    cursor-buddy/
    cursor-buddy.tsx
    index.ts
  4. 4

    Copying by hand? Install the packages

    Skip this if you used the command above.

    npm install framer-motion
  5. 5

    Use it in a page

    Import it and render it. The Code tab above has the full example.

    // app/page.tsx
import { CursorBuddy } from "@/components/cursor-buddy";

export default function Page() {
  return (
    <main>
      <CursorBuddy />
    </main>
  );
}

More motion effects