Cursor Bubble

Component 24

About

A floating label that follows the cursor and elastic-pops into view when hovering over interactive links, buttons, or logos.

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

Code

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

Usage.tsx

"use client";

import {
  CursorBubble,
  CursorBubbleTarget,
} from "@/components/ui/cursor-bubble";

export function CursorBubbleExample() {
  return (
    <CursorBubble className="flex h-[min(320px,50dvh)] w-full flex-col items-center justify-center gap-6 text-center sm:h-72">
      <CursorBubbleTarget label="explore">
        <span className="font-medium text-2xl underline underline-offset-4 sm:text-3xl">
          Our work
        </span>
      </CursorBubbleTarget>
      <CursorBubbleTarget label="say hi">
        <span className="text-muted-foreground text-sm">Get in touch</span>
      </CursorBubbleTarget>
    </CursorBubble>
  );
}

export default CursorBubbleExample;