BlobCursor

PreviousNext

Organic blob cursor that smoothly follows the pointer with inertia and elastic morphing.

Docs
react-bitscomponent

Preview

Loading preview…
BlobCursor/BlobCursor.css
.blob-container {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.blob-main {
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
  user-select: none;
  cursor: default;
}

.blob {
  position: absolute;
  will-change: transform;
  transform: translate(-50%, -50%);
}

.inner-dot {
  position: absolute;
}

Installation

npx shadcn@latest add @react-bits/BlobCursor-JS-CSS

Usage

import { BlobCursorJSCSS } from "@/components/BlobCursor-JS-CSS"
<BlobCursorJSCSS />