Liquid Cursor

Component 165

About

Pointer-following liquid cursor effect: a fixed full-screen canvas overlay paints colored particles along the mouse path and runs them through an SVG gooey filter for a smooth, blob-like trail.

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

Code

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

Usage.tsx

"use client";

import { useEffect } from "react";
import { LiquidCursor } from "@/components/ui/liquid-cursor";

export default function LiquidCursorDemo() {
  // Seed a colorful trail on mount by dispatching synthetic mousemove events.
  // This makes the static preview/screenshot show visible particles even before
  // a real cursor enters the iframe; a real visitor's pointer keeps the trail going.
  useEffect(() => {
    let frame = 0;
    let raf = 0;
    let cancelled = false;
    const tick = () => {
      if (cancelled) return;
      const w = window.innerWidth;
      const h = window.innerHeight;
      const t = frame / 14;
      const x = w / 2 + Math.sin(t) * w * 0.3;
      const y = h / 2 + Math.cos(t * 0.7) * h * 0.22;
      window.dispatchEvent(new MouseEvent("mousemove", { clientX: x, clientY: y }));
      frame++;
      if (frame < 200) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => {
      cancelled = true;
      if (raf) cancelAnimationFrame(raf);
    };
  }, []);

  return (
    <div className="relative flex w-full min-h-screen items-center justify-center bg-black overflow-hidden p-8">
      <LiquidCursor />
      <div className="relative text-center max-w-2xl space-y-4 select-none">
        <h1 className="text-5xl md:text-6xl font-bold tracking-tight text-white">
          Liquid Cursor
        </h1>
        <p className="text-lg text-white/60">
          Move your cursor across the screen to mix colors with a gooey, liquid effect.
        </p>
      </div>
    </div>
  );
}

export { LiquidCursorDemo };