Comet dial
A rotary dial with a comet trail: drag around the arc and the trail stretches with your speed, then flicks home with momentum.
Drag around the arc quickly and the comet stretches. Currently 62%.
Implementation
1"use client";2 3import {4 useCallback,5 useEffect,6 useRef,7 useState,8 type CSSProperties,9 type KeyboardEvent,10 type PointerEvent as ReactPointerEvent,11} from "react";12 13export interface CometDialChangeDetail {14 velocity: number;15 bounce: number;16}17 18export interface CometDialProps {19 value?: number;20 defaultValue?: number;21 min?: number;22 max?: number;23 step?: number;24 unit?: string;25 label?: string;26 accent?: string;27 ink?: string;28 size?: number;