Bubble Float Cursor

Component 1

About

A canvas-based custom cursor effect that spawns translucent soap bubbles which rise, wobble, and fade as the mouse moves inside a container, and pop into droplets on click.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Bubble Float Cursor to your project and fits it to your theme.

Code

How Bubble Float Cursor is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import BubbleFloatCursor from "@/components/ui/bubble-float-cursor";
import * as React from "react";

export default function BubbleFloatCursorDemo() {
  const containerRef = React.useRef<HTMLDivElement>(null);

  return (
    <div
      ref={containerRef}
      className="relative w-full h-screen overflow-hidden bg-[#0a1420] text-white"
      style={{ cursor: "none" }}
    >
      <BubbleFloatCursor
        containerRef={containerRef}
        config={{
          hue: 200,
          spawnRate: 5,
          maxSize: 25,
          riseSpeed: 1.6,
          pointerAnim: true,
          pointerSizeMult: 1.55,
          clickAnim: true,
        }}
      />
    </div>
  );
}