Ghost Ether

The Ghost Ether component creates an interactive, high-performance fluid simulation using WebGL and Three.js. It responds dynamically to user mouse pointer movements and touch gestures, injecting forces into the fluid grid.

Preview

"use client";

import GhostEther from "@/registry/spark-ui/ghost-ether";

export default function GhostEtherDemo() {
  return (
    <div className="relative w-full h-96 bg-zinc-950 overflow-hidden rounded-2xl border border-zinc-200 dark:border-zinc-800">
      <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>
  );
}

Installation

$ npx shadcn@latest add https://spark-ui-olive.vercel.app/r/ghost-ether.json

Usage

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

"use client";

export default function GhostEtherDemo() {
  return (
    <div className="relative w-full h-96 bg-zinc-950 overflow-hidden rounded-2xl border border-zinc-200 dark:border-zinc-800">
      <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>
  );
}

Properties

Prop	Type	Default	Description
`colors`	`string[]`	`["#7B2CBF", "#3F37C9", "#00F5D4"]`	Array of hex color stops used to build the velocity-to-color mapping palette.
`mouseForce`	`number`	`20`	Strength multiplier applied to user pointer movement when injecting fluid velocity.
`cursorSize`	`number`	`100`	Radius (in pixels at base resolution) of the user pointer force brush.
`resolution`	`number`	`0.5`	Simulation texture scale relative to canvas size. Lower yields higher performance.
`isViscous`	`boolean`	`false`	Enables the iterative Gauss-Seidel viscosity solve for smoother, thicker flow.
`viscous`	`number`	`30`	Viscosity coefficient applied when isViscous is active.
`iterationsViscous`	`number`	`32`	Number of Jacobi iterations for the viscosity solve step.
`iterationsPoisson`	`number`	`32`	Number of pressure Poisson iterations to enforce fluid incompressibility.
`dt`	`number`	`0.014`	Constant time step size used for fluid simulation updates.
`BFECC`	`boolean`	`true`	Enables Back and Forth Error Compensation and Correction for sharper advection textures.
`isBounce`	`boolean`	`false`	If active, clamps velocity boundaries at the edges instead of soft wrapping.
`autoDemo`	`boolean`	`true`	Enables idle driving of the user cursor position when no interaction occurs.
`autoSpeed`	`number`	`0.5`	Wandering speed multiplier used when auto-demo is active.
`autoIntensity`	`number`	`2.2`	Force scaling applied to the auto-demo wandering trail.
`takeoverDuration`	`number`	`0.25`	Transition time (in seconds) when taking control over the auto-driver on interaction.
`autoResumeDelay`	`number`	`1000`	Delay time (in milliseconds) before the auto-demo resumes after user interaction stops.
`autoRampDuration`	`number`	`0.6`	Duration (in seconds) to fade in auto-demo movement once it resumes.