KQ-1782 · PENDANT/DROP

Pendant Drop

A single drop of coloured liquid hangs from the top edge of its frame on surface tension over a shallow pool, drawn in one WebGL2 pass of signed distances joined by a smooth minimum whose reach is the viscosity and shaded as glass. Bring the pointer near and the drop leans and stretches toward it on a spring set by the viscosity, its neck thinning to a thread as the colour pools into the leading lobe; pull far enough and a droplet pinches off while the rest recoils home on the recoil spring's constants and refills from the film, and the droplet falls, is met by the pool and reabsorbed with a mound that rebounds on the same constants and ripples running out along the surface. The frame is a button: the arrow keys lean the drop and Down stretches it, Enter, Space or a click lets a drop fall, and Escape lets it hang straight.

KQ-1782 · PENDANT/DROP

Fernworks Inks

Iris No. 4

Bottled fountain ink, 50 ml. Dries in fourteen seconds.

$18.00

holding · bring the pointer close, or press Enter

Open it on the Canvas stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/pendant-drop

Props

viscosity: number; default 0.5; How thick the liquid is, 0 (runny: quick, wobbly) to 1 (thick: slow, composed, gooier joins).
reach: number; default 0.6; How far away the drop notices your hand, 0 (only right beside it) to 1 (across the frame).
palette: "iris" | "amber" | "lagoon" | "rose" | [string, string]; default "iris"; The liquid's colours, pale at the root to deep in the lobe: a preset, or two CSS colours of your own.
tension: number; default 0.5; How far the drop stretches before a droplet pinches off, 0 (lets go early) to 1 (holds on long).
size: number; default 34; The bulb's radius in px; it shrinks to fit a small frame.
anchor: number; default 0.5; Where along the top edge the drop hangs, 0 (left) to 1 (right).
gravity: number; default 1; How fast a droplet falls, 0.5 to 2.
gloss: number; default 0.6; The glassy highlights, rim light and caustic, 0 (matte) to 1.
pool: boolean; default true; Draw the pool along the bottom edge that droplets fall into. Off, they fall out of the frame.
interactive: boolean; default true; The pointer and touch pull the drop. Keys still lean it.
paused: boolean; default false; Hold the liquid still.
label: string; default "Pendant drop"; The frame's accessible name.
sound: boolean; default false; Play a plip as each droplet lands. Off unless asked for.
onDrip: (count: number) => void; default —; Fires as each droplet lets go, with how many have fallen.
disabled: boolean; default false; Nothing reaches the drop and the frame's button is disabled.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
className: string; default "h-96 w-full"; Sizes the frame.

Prop	Type	Default	Description
viscosity	number	0.5	How thick the liquid is, 0 (runny: quick, wobbly) to 1 (thick: slow, composed, gooier joins).
reach	number	0.6	How far away the drop notices your hand, 0 (only right beside it) to 1 (across the frame).
palette	"iris" \| "amber" \| "lagoon" \| "rose" \| [string, string]	"iris"	The liquid's colours, pale at the root to deep in the lobe: a preset, or two CSS colours of your own.
tension	number	0.5	How far the drop stretches before a droplet pinches off, 0 (lets go early) to 1 (holds on long).
size	number	34	The bulb's radius in px; it shrinks to fit a small frame.
anchor	number	0.5	Where along the top edge the drop hangs, 0 (left) to 1 (right).
gravity	number	1	How fast a droplet falls, 0.5 to 2.
gloss	number	0.6	The glassy highlights, rim light and caustic, 0 (matte) to 1.
pool	boolean	true	Draw the pool along the bottom edge that droplets fall into. Off, they fall out of the frame.
interactive	boolean	true	The pointer and touch pull the drop. Keys still lean it.
paused	boolean	false	Hold the liquid still.
label	string	"Pendant drop"	The frame's accessible name.
sound	boolean	false	Play a plip as each droplet lands. Off unless asked for.
onDrip	(count: number) => void	—	Fires as each droplet lets go, with how many have fallen.
disabled	boolean	false	Nothing reaches the drop and the frame's button is disabled.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
className	string	"h-96 w-full"	Sizes the frame.