Blob Cursor

<div class="blob-cursor-area">

  <div
    class="blob-cursor"
    data-blob-cursor
  ></div>

  <div class="blob-cursor-content">
    Move your mouse inside this area
  </div>

</div>

.blob-cursor-area{
  position:relative;
  width:100%;
  min-height:220px;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;
  cursor:none;
}

.blob-cursor{
  position:absolute;
  top:0;
  left:0;

  width:70px;
  height:70px;

  border-radius:
    42% 58% 61% 39% /
    45% 38% 62% 55%;

  background:
    linear-gradient(
      135deg,
      rgba(34,211,238,.55),
      rgba(139,92,246,.45)
    );

  pointer-events:none;

  transform:translate(-50%, -50%);

  filter:blur(1px);

  box-shadow:
    0 0 28px rgba(34,211,238,.18);

  animation:
    blobShape 4s ease-in-out infinite;

  z-index:9999;
}

@keyframes blobShape{

  0%,100%{
    border-radius:
      42% 58% 61% 39% /
      45% 38% 62% 55%;
  }

  50%{
    border-radius:
      60% 40% 38% 62% /
      38% 60% 40% 62%;
  }
}

.blob-cursor-content{
  position:relative;
  z-index:1;

  color:#c7d2e5;
  font-size:16px;
  font-weight:600;
  text-align:center;

  pointer-events:none;
}

const area =
  document.querySelector('.blob-cursor-area');

const blob =
  document.querySelector('[data-blob-cursor]');

if (area) {

  area.addEventListener(
    'mousemove',
    function(event) {

      if (!blob) {
        return;
      }

      const rect =
        area.getBoundingClientRect();

      blob.style.left =
        event.clientX -
        rect.left +
        'px';

      blob.style.top =
        event.clientY -
        rect.top +
        'px';
    }
  );

}

How This Blob Cursor Works

This effect replaces the default pointer with a soft, organic blob shape that continuously morphs while following the mouse — giving it a fluid, liquid-like quality rather than a static shape. The HTML is minimal: a container (blob-cursor-area) holding the blob element itself (blob-cursor) and a simple text label inside.

The JavaScript here handles only positioning — a single mousemove listener calculates the cursor’s coordinates relative to the container and updates the blob’s left and top values accordingly. There’s no logic for hover states or click detection in this component; the entire visual personality comes from CSS.

The morphing shape is achieved using CSS’s border-radius property with four separate horizontal and vertical values (42% 58% 61% 39% / 45% 38% 62% 55%), which creates an irregular, organic blob rather than a perfect circle. A @keyframes animation called blobShape smoothly transitions between two different sets of these values every 4 seconds, causing the blob to continuously reshape itself even while stationary. A subtle blur(1px) filter softens the edges further, and a gradient background blending cyan and purple gives it depth. Like the spotlight effect, this blob only becomes visible on hover, controlled by a CSS :hover rule rather than JavaScript.

Customizing This Blob Cursor

Since almost everything here is CSS-driven, customization is straightforward:

• Change the blob’s colors — update the linear-gradient values in .blob-cursor (currently cyan to purple) to match your brand.
• Adjust the morphing speed — the 4s duration in the blobShape animation controls how quickly the shape shifts; a shorter duration feels more energetic, a longer one feels calmer.
• Change the blob size — modify the width and height values (currently 70px) for a larger or smaller cursor.
• Adjust the softness — increasing the blur() filter value makes the blob’s edges hazier, while reducing it (or removing it) gives a sharper, more defined shape.

Where to Use This Blob Cursor

Because this effect has a playful, organic feel, it fits best in creative and expressive contexts:

• Creative portfolios and design studio websites, where a fluid cursor reinforces an artistic, non-corporate brand identity.
• Landing pages for apps or products with a playful tone, adding personality without needing any additional interactive logic.
• Background or hero sections, used as ambient motion rather than tied to specific clickable elements.

Since this blob doesn’t currently react to hover states on specific items, it’s best suited for general ambient movement rather than effects meant to highlight individual buttons or links — for that kind of interaction, a component like the Cursor Ring Hover Effect or Text Hover Cursor would be a better fit.

Frequently Asked Questions

Why does the blob keep changing shape even when the mouse isn’t moving?
This is intentional — the shape-morphing animation runs continuously through CSS @keyframes, independent of mouse movement. Only the blob’s position is tied to the cursor; its shape animates on its own infinite loop.

Can I make the blob react to hovering over specific elements, like buttons?
Not with the current JavaScript, since it only listens for mousemove and doesn’t check what element is being hovered. Adding that behavior would require extending the script with mouseover/mouseout listeners similar to the ones used in the cursor ring hover effect.

Does the animation affect performance on longer page visits?
No. CSS animations like this one are handled by the browser’s own rendering engine rather than JavaScript, so they run efficiently in the background without consuming extra processing power, even if the blob keeps animating for an extended period.