Ghost Ether

Backgrounds 41

About

An interactive WebGL fluid simulation background that swirls with mist-like color trails, reacting to mouse and touch movement.

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

Code

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

Usage.tsx

"use client";

import GhostEther from "@/components/ui/ghost-ether";

export default function GhostEtherDemo() {
  return (
    <div className="relative w-full h-screen bg-zinc-950 overflow-hidden">
      <GhostEther
        colors={["#7b2cbf", "#3f37c9", "#00f5d4"]}
        mouseForce={22}
        cursorSize={75}
        isViscous={true}
        viscous={25}
        iterationsViscous={24}
        iterationsPoisson={24}
        resolution={0.5}
        isBounce={false}
        autoDemo={true}
        autoSpeed={0.5}
        autoIntensity={2.0}
        takeoverDuration={0.3}
        autoResumeDelay={2000}
        autoRampDuration={1.0}
        className="w-full h-full"
      />
    </div>
  );
}