Ferrofluid Menu

"use client";

// A menu made of ferrofluid. Closed, it's one glossy black drop that swells
// toward the pointer and raises an even crown of spikes on that side as it
// comes near, the way the fluid stands up along a magnet's field lines.
// Pressed, droplets pull out of it one after another, stretching a neck of
// fluid behind them, then spread into the menu's items. Once settled, a small
// gap opens between each pair, bridged by a pinched neck and a scatter of
// glue strings, each pair strung differently; they spring in with a wobble. Closing pours them back in.
// Hovered items swell and lean toward the pointer, slanting and stretching
// the glue, which thins as it's pulled; a pressed one gives a little before
// the menu closes.
//
// The fluid is one signed distance field drawn in WebGL: the drop and every
// item are smoothly unioned, so anything close enough flows together. Shapes
// are moved by springs on the main thread; labels are real buttons that ride
// on their droplet. The loop sleeps once everything has settled and the
// pointer is away, and off screen. Reduced motion snaps the springs and drops
// the spikes. Without WebGL the items fall back to plain filled pills.

import { useCallback, useEffect, useId, useRef, useState } from "react";
import { cn } from "@/lib/utils";

export type FerrofluidMenuProps = {