Slosh gauge
A level gauge with a liquid surface that leans with its own velocity and sloshes when the level changes.
Drag the tube or use the arrow keys. Last set to 62%.
Implementation
1"use client";2 3import {4 useCallback,5 useEffect,6 useRef,7 useState,8 type KeyboardEvent,9 type PointerEvent as ReactPointerEvent,10} from "react";11 12export interface SloshGaugeProps {13 value?: number;14 defaultValue?: number;15 onChange?: (value: number) => void;16 interactive?: boolean;17 showValue?: boolean;18 disabled?: boolean;19 liquidColor?: string;20 glassColor?: string;21 width?: number;22 height?: number;23 radius?: number;24 ticks?: number;25 viscosity?: number;26 tilt?: number;27 splash?: number;28 unit?: string;