50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T2e36,"use client"; /** * @author: @dorianbaffier * @description: Bell Button * @version: 1.0.0 * @date: 2026-10-14 * @license: MIT * @website: https://kokonutui.com * @github: https://github.com/kokonut-labs/kokonutui */ import { type PointerEvent, useCallback, useEffect, useRef, useState, } from "react"; import { cn } from "@/lib/utils"; // The bell and its clapper are two pendulums on the same pivot. Nothing // couples them but collisions: the swinging bell catches the clapper with // its lip, flings it across, and it strikes the other side. Angles in deg, // time in seconds. const STEP = 1 / 240; const BELL_STIFFNESS = 380; const BELL_DAMPING = 5; const CLAPPER_STIFFNESS = 150; const CLAPPER_DAMPING = 4; // How far the clapper can swing inside the bell before it hits the lip. const LIP = 13; const RESTITUTION = 0.45; // Share of a hit that goes into the bell, which is much heavier. const RECOIL = 0.18; // Impacts harder than this ring out (deg/s, relative). const STRIKE_SPEED = 260; const RING_KICK = 600; const NUDGE_KICK = 160; const MUTE_KICK = 300; const REST = 0.05; const PIVOT = { x: 12, y: 2.5 }; const EASE_OUT = "cubic-bezier(0.23, 1, 0.32, 1)"; function haptic(ms: number) { if (typeof navigator !== "undefined" && "vibrate" in navigator) { navigator.vibrate(ms); } } /** A number whose digits roll to their new value, like a counter. */ function RollingNumber({ value }: { value: number }) { const text = value.toLocaleString("en-US"); return ( {text.split("").map((char, i) => { // Keyed from the right, so the ones stay the ones when a digit is added. const key = text.length - i; if (char < "0" || char > "9") { return {char}; } const digit = Number(char); return ( {"0123456789".split("").map((d) => ( {d} ))} ); })} ); } export interface BellButtonProps { /** `default` shows the label and count, `compact` the label, `icon` the bell alone. */ variant?: "default" | "compact" | "icon"; /** Controlled state. */ subscribed?: boolean; defaultSubscribed?: boolean; onSubscribedChange?: (subscribed: boolean) => void; /** Subscribers, not counting this one. */ count?: number; label?: string; subscribedLabel?: string; className?: string; } export default function BellButton({ variant = "default", subscribed: subscribedProp, defaultSubscribed = false, onSubscribedChange, count = 1284, label = "Notify me", subscribedLabel = "Subscribed", className, }: BellButtonProps) { const [internal, setInternal] = useState(defaultSubscribed); const subscribed = subscribedProp ?? internal; const bellRef = useRef(null); const clapperRef = useRef(null); const leftWaveRef = useRef(null); const rightWaveRef = useRef(null); const sim = useRef({ bell: 0, bellSpeed: 0, clapper: 0, clapperSpeed: 0, // Muffled: the clapper is held against the bell and can't strike. muffled: false, raf: 0, last: 0, carry: 0, lastNudge: 0, reduceMotion: false, }); const draw = useCallback(() => { const s = sim.current; bellRef.current?.setAttribute( "transform", `rotate(${s.bell.toFixed(2)} ${PIVOT.x} ${PIVOT.y})` ); clapperRef.current?.setAttribute( "transform", `rotate(${s.clapper.toFixed(2)} ${PIVOT.x} ${PIVOT.y})` ); }, []); // Two short arcs flare out on the side that was struck. const flare = useCallback((side: 1 | -1, strength: number) => { const wave = side > 0 ? rightWaveRef.current : leftWaveRef.current; if (!wave?.animate) { return; } const peak = Math.min(1, 0.45 + strength * 0.55); wave.animate( [ { opacity: peak, transform: "translateX(0px)" }, { opacity: 0, transform: `translateX(${side * 3}px)` }, ], { duration: 420, easing: EASE_OUT } ); }, []); // Advances both pendulums one step and resolves a clapper hit. const step = useCallback(() => { const s = sim.current; s.bellSpeed += (-s.bell * BELL_STIFFNESS - s.bellSpeed * BELL_DAMPING) * STEP; s.bell += s.bellSpeed * STEP; if (s.muffled) { s.clapper = s.bell; s.clapperSpeed = s.bellSpeed; return; } s.clapperSpeed += (-s.clapper * CLAPPER_STIFFNESS - s.clapperSpeed * CLAPPER_DAMPING) * STEP; s.clapper += s.clapperSpeed * STEP; const relative = s.clapper - s.bell; if (Math.abs(relative) <= LIP) { return; } const side = relative > 0 ? 1 : -1; const impact = (s.clapperSpeed - s.bellSpeed) * side; s.clapper = s.bell + side * LIP; if (impact <= 0) { return; } s.clapperSpeed -= side * impact * (1 + RESTITUTION); s.bellSpeed += side * impact * RECOIL; if (impact > STRIKE_SPEED) { // The clapper hits the bell's right wall when it swings right. flare(side as 1 | -1, impact / 1600); haptic(6); } }, [flare]); const tick = useCallback( (now: number) => { const s = sim.current; s.raf = 0; const elapsed = s.last ? Math.min((now - s.last) / 1000, 0.05) : STEP; s.last = now; s.carry += elapsed; while (s.carry >= STEP) { step(); s.carry -= STEP; } draw(); const energy = Math.abs(s.bell) + Math.abs(s.bellSpeed) * 0.02 + Math.abs(s.clapper) + Math.abs(s.clapperSpeed) * 0.02; if (energy < REST) { s.bell = 0; s.bellSpeed = 0; s.clapper = 0; s.clapperSpeed = 0; s.last = 0; draw(); return; } s.raf = requestAnimationFrame(tick); }, [draw, step] ); const kick = useCallback( (speed: number) => { const s = sim.current; if (s.reduceMotion) { return; } s.bellSpeed += speed; if (!s.raf) { s.raf = requestAnimationFrame(tick); } }, [tick] ); useEffect(() => { const s = sim.current; const query = window.matchMedia("(prefers-reduced-motion: reduce)"); s.reduceMotion = query.matches; const onChange = () => { s.reduceMotion = query.matches; }; query.addEventListener("change", onChange); return () => { query.removeEventListener("change", onChange); cancelAnimationFrame(s.raf); s.raf = 0; }; }, []); const handleClick = () => { const next = !subscribed; if (subscribedProp === undefined) { setInternal(next); } onSubscribedChange?.(next); const s = sim.current; if (next) { s.muffled = false; // Swing the bell away from the clapper so the first hit rings. kick(s.bellSpeed >= 0 ? RING_KICK : -RING_KICK); if (s.reduceMotion) { flare(1, 0.6); flare(-1, 0.6); } haptic(10); } else { // Off: a dull shake, the clapper held still against the bell. s.muffled = true; kick(-MUTE_KICK); } }; const handlePointerEnter = (event: PointerEvent) => { // A brush past the bell sets it swaying a little. Mouse only: on touch, // enter fires right before the tap. const s = sim.current; if (event.pointerType !== "mouse" || s.muffled) { return; } if (event.timeStamp - s.lastNudge < 700) { return; } s.lastNudge = event.timeStamp; kick(s.bellSpeed >= 0 ? NUDGE_KICK : -NUDGE_KICK); }; // Starting unsubscribed means the bell is muted. useEffect(() => { sim.current.muffled = !subscribed; }, [subscribed]); return ( ); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L50",null,{"files":[{"path":"/components/kokonutui/bell-button.tsx","content":"$51","type":"registry:component","target":"components/kokonutui/bell-button.tsx"}],"className":"h-[70svh] min-h-80"}]]}]