Bounce Checkbox

1"use client";2
3import { useEffect, useLayoutEffect, useRef, useState } from "react";4import type { CSSProperties, PointerEvent, ReactNode } from "react";5import { animate, useMotionValue, useMotionValueEvent, useReducedMotion } from "motion/react";6
7export type StrikeSide = "left" | "center" | "right" | "none";8
9export type BounceCheckboxProps = {10  label?: ReactNode;11  checked?: boolean;12  defaultChecked?: boolean;13  onChange?: (checked: boolean) => void;14  disabled?: boolean;15  color?: string;16  fillColor?: string;17  checkColor?: string;18  boxSize?: number;19  boxRadius?: number;20  fontSize?: number;21  bounce?: number;22  strikeLag?: number;23  doneOpacity?: number;24  strike?: StrikeSide;25  ariaLabel?: string;26  className?: string;27};28
29const VISUAL_DURATION = 0.2;30const RULE_END = 0.84;31const SWELL = 0.35;32const TICK_PATH = "M5 14L8.5 17.5L19 6.5";33const ORIGIN: Record<StrikeSide, string> = {34  left: "left center",35  center: "center",36  right: "right center",37  none: "left center",38};39
40const clamp01 = (value: number) => Math.min(1, Math.max(0, value));41const zetaOf = (bounce: number) =>42  bounce <= 0 ? 1 : -Math.log(bounce) / Math.sqrt(Math.PI ** 2 + Math.log(bounce) ** 2);43
44const readings = (t: number, doneOpacity: number, strikeLag: number) => {45  const held = clamp01(t);46  return {47    fill: `scale(${Math.max(t, 0)})`,48    box: `scale(${1 + SWELL * Math.max(0, t - 1)})`,49    tick: 1 - held,50    word: 1 - (1 - doneOpacity) * held,51    rule: `scaleX(${clamp01((held - strikeLag) / (RULE_END - strikeLag))})`,52  };53};54
55export function BounceCheckbox({56  label = "Write the changelog",57  checked,58  defaultChecked = false,59  onChange,60  disabled = false,61  color = "light-dark(#14181e, #f2f4f6)",62  fillColor = "light-dark(#14181e, #f2f4f6)",63  checkColor = "light-dark(#ffffff, #0b0b0f)",64  boxSize = 28,65  boxRadius = 9,66  fontSize = 18,67  bounce = 0.2,68  strikeLag = 0.12,69  doneOpacity = 0.42,70  strike = "left",71  ariaLabel,72  className = "",73}: BounceCheckboxProps) {74  const controlled = checked !== undefined;75  const [inner, setInner] = useState(defaultChecked);76  const on = controlled ? checked : inner;77  const reduce = useReducedMotion();78
79  const t = useMotionValue(on ? 1 : 0);80  const viaPointer = useRef(false);81  const instant = useRef(false);82  const rowRef = useRef<HTMLButtonElement>(null);83  const boxRef = useRef<HTMLSpanElement>(null);84  const fillRef = useRef<HTMLSpanElement>(null);85  const tickRef = useRef<SVGPathElement>(null);86  const wordRef = useRef<HTMLSpanElement>(null);87  const ruleRef = useRef<HTMLSpanElement>(null);88  const cfg = useRef({ doneOpacity, strikeLag });89
90  useLayoutEffect(() => {91    cfg.current = { doneOpacity, strikeLag };92  });93
94  const write = (value: number) => {95    const r = readings(value, cfg.current.doneOpacity, cfg.current.strikeLag);96    if (fillRef.current) fillRef.current.style.transform = r.fill;97    if (boxRef.current) boxRef.current.style.transform = r.box;98    if (tickRef.current) tickRef.current.style.strokeDashoffset = String(r.tick);99    if (wordRef.current) wordRef.current.style.opacity = String(r.word);100    if (ruleRef.current) ruleRef.current.style.transform = r.rule;101  };102  useMotionValueEvent(t, "change", write);103  useLayoutEffect(() => {104    write(t.get());105  });106
107  useEffect(() => {108    const target = on ? 1 : 0;109    if (reduce || instant.current) {110      instant.current = false;111      t.jump(target);112      return undefined;113    }114    if (t.get() === target && t.getVelocity() === 0) return undefined;115    const controls = animate(t, target, {116      type: "spring",117      visualDuration: VISUAL_DURATION,118      bounce: 1 - zetaOf(bounce),119    });120    return () => controls.stop();121  }, [on, reduce, bounce, t]);122
123  const handlePointerDown = (event: PointerEvent<HTMLButtonElement>) => {124    if (event.button !== 0 || disabled) return;125    viaPointer.current = true;126    if (!reduce && rowRef.current) rowRef.current.dataset.pressed = "";127  };128  const handlePointerUp = () => {129    if (rowRef.current) delete rowRef.current.dataset.pressed;130  };131  const handlePointerCancel = () => {132    viaPointer.current = false;133    handlePointerUp();134  };135  const toggle = () => {136    if (disabled) return;137    instant.current = !viaPointer.current;138    viaPointer.current = false;139    const next = !on;140    if (!controlled) setInner(next);141    onChange?.(next);142  };143
144  const initial = readings(on ? 1 : 0, doneOpacity, strikeLag);145  const ring = boxSize >= 24 ? 2 : 1.5;146  const gap = Math.min(16, Math.max(8, Math.round(boxSize * 0.43)));147  const ruleHeight = Math.max(1.5, Math.round(fontSize / 6) / 2);148
149  const cssVars = {150    "--bc-ink": color,151    "--bc-fill": fillColor,152    "--bc-check": checkColor,153    "--bc-box": `${boxSize}px`,154    "--bc-radius": `${boxRadius}px`,155    "--bc-font": `${fontSize}px`,156    "--bc-ring": `${ring}px`,157    "--bc-gap": `${gap}px`,158    "--bc-row": `${Math.max(44, boxSize + 16)}px`,159    "--bc-rule": `${ruleHeight}px`,160    "--bc-origin": ORIGIN[strike] || ORIGIN.left,161  } as CSSProperties;162
163  return (164    <button165      ref={rowRef}166      type="button"167      role="checkbox"168      aria-checked={on}169      aria-label={ariaLabel}170      disabled={disabled}171      className={`group relative inline-flex min-h-[var(--bc-row)] cursor-pointer touch-manipulation select-none items-center gap-[var(--bc-gap)] border-0 bg-transparent p-0 text-left text-[length:var(--bc-font)] font-medium leading-[1.2] tracking-[-.01em] outline-none [color:var(--bc-ink)] [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] disabled:cursor-not-allowed disabled:opacity-50${className ? ` ${className}` : ""}`}172      style={cssVars}173      onPointerDown={handlePointerDown}174      onPointerUp={handlePointerUp}175      onPointerCancel={handlePointerCancel}176      onPointerLeave={handlePointerCancel}177      onClick={toggle}178    >179      <span className="h-[var(--bc-box)] w-[var(--bc-box)] flex-none rounded-[var(--bc-radius)] [transition:transform_160ms_cubic-bezier(.23,1,.32,1)] group-data-[pressed]:[transform:scale(.95)] group-focus-visible:outline-offset-[3px] group-focus-visible:[outline:2px_solid_color-mix(in_srgb,var(--bc-ink)_45%,transparent)] motion-reduce:transition-none">180        <span ref={boxRef} className="relative grid h-full w-full origin-center place-items-center overflow-hidden rounded-[inherit]" style={{ transform: initial.box }}>181          <span182            className="absolute inset-0 rounded-[inherit] opacity-[.28] [box-shadow:inset_0_0_0_var(--bc-ring)_var(--bc-ink)] [transition:opacity_120ms_ease] [@media(hover:hover)_and_(pointer:fine)]:group-enabled:group-hover:opacity-50"183            aria-hidden="true"184          />185          <span ref={fillRef} className="absolute inset-0 origin-center rounded-[inherit] [background:var(--bc-fill)]" style={{ transform: initial.fill }} />186          <svg187            className="relative h-[68%] w-[68%] overflow-visible fill-none [stroke:var(--bc-check)] [stroke-width:2.6] [stroke-linecap:round] [stroke-linejoin:round]"188            viewBox="0 0 24 24"189            aria-hidden="true"190          >191            <path ref={tickRef} d={TICK_PATH} pathLength={1} strokeDasharray={1} style={{ strokeDashoffset: initial.tick }} />192          </svg>193        </span>194      </span>195      <span className="relative inline-block">196        <span ref={wordRef} className="inline-block" style={{ opacity: initial.word }}>197          {label}198        </span>199        {strike !== "none" ? (200          <span201            ref={ruleRef}202            className="pointer-events-none absolute inset-x-0 top-[46%] h-[var(--bc-rule)] rounded-[2px] bg-current [transform-origin:var(--bc-origin)]"203            aria-hidden="true"204            style={{ transform: initial.rule }}205          />206        ) : null}207      </span>208    </button>209  );210}211
212export function BounceCheckboxList() {213  return (214    <div className="flex flex-col items-start gap-1">215      <BounceCheckbox label="Write the changelog" />216      <BounceCheckbox label="Publish the release" />217    </div>218  );219}