Nexus UI

Dot Sphere, animated React component

A slowly turning sphere of dots drawn on canvas: move the pointer across it and the dots part and spring back, drag it to spin and let go to watch it coast.

  • Free
  • Motion Effects
  • Hover
  • 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
dotsnumber420Number of dots spread over the sphere.
radiusnumber130Sphere radius in px. The canvas adds room around it for dots pushed outwards.
colorstring—Dot colour. Defaults to the current text colour, so it follows your theme.
repelnumber55How hard the pointer pushes dots away, 0–100.
speednumber30Idle spin speed, 0–100.
interactivebooleantrueLet the pointer push dots and drag to spin the sphere.
dotSizenumber3.4Base dot diameter in px; front dots draw larger, back dots smaller.
classNamestring—Classes for the canvas element.

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/dot-sphere
  3. 3

    Check what was added

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

    components/
    dot-sphere/
    dot-sphere.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 { DotSphere } from "@/components/dot-sphere";

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

More motion effects