Blob Cursor

Component 16

About

Blob cursor animation

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

Code

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

Usage.tsx

import { useState, useEffect, FC } from 'react';

import { BlobCursor } from "@/components/ui/blob-cursor"; 

const DemoOne: FC = () => {
  const [isDarkMode, setIsDarkMode] = useState(true); // 
  useEffect(() => {
    
    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
    const handleChange = () => {
      const darkMode = mediaQuery.matches;
      setIsDarkMode(darkMode);
      document.documentElement.classList.toggle('dark', darkMode);
    };
    handleChange();
    mediaQuery.addEventListener('change', handleChange);
    return () => mediaQuery.removeEventListener('change', handleChange);
  }, []);


  const blobFillColor = isDarkMode ? "#FFFFFF" : "#000000";
  const pageBgColor = isDarkMode ? "bg-black" : "bg-white";
  const pageTextColor = isDarkMode ? "text-white" : "text-black"; 


  return (
    <div className={`w-full h-screen relative overflow-hidden cursor-none
                   ${pageBgColor} ${pageTextColor}
                   transition-colors duration-300`}>
      

      <BlobCursor 
        fillColor={blobFillColor}

      />
      
      
      <div className="absolute inset-0 flex flex-col justify-center items-center pointer-events-none select-none z-0">
        <h1 className={`text-6xl font-bold opacity-10 ${pageTextColor}`}>
          Blob Cursor Effect
        </h1>

      </div>
    </div>
  );
};

export { DemoOne };