Blob Cursor
Velocity-based squash and stretch blob with elastic trailing ring.
Component Showcase
Blob Cursor
Velocity-based squash and stretch blob with elastic trailing ring.
GSAPCursor
Choose Installation Method
Select how you want to add this component to your project
Run command in your project root
$ npx @melonui-dev/cli add blob-cursor
How to import and use
app/page.tsx
import { JuicyCursor } from "@/components/blob-cursor";
export default function Page() {
return (
<main className="flex min-h-screen items-center justify-center bg-[#050505] p-8">
<JuicyCursor />
</main>
);
}AI Automation Agent Prompt
Feed this prompt to Claude, ChatGPT, or Gemini to quickly write custom integrations, layouts, or configure props for this component on your system.
I want to integrate the MelonUI "Blob Cursor" component into my React/Next.js project.
Component description: "Velocity-based squash and stretch blob with elastic trailing ring."
CLI Installation command: `npx @melonui-dev/cli add blob-cursor`
Tags/Technologies used: GSAP, Cursor
Please write a premium, responsive React page component in Next.js that:
1. Imports `JuicyCursor` from `@/components/blob-cursor`.
2. Places it inside a visually stunning layout matching a dark-mode, glassmorphism design system.
3. Outlines its props and options with clean code structure and comments.