Subscribe Shine Button

1"use client";2
3import { useEffect, useRef } from "react";4
5export function SubscribeShineButton() {6  const gradientRef = useRef<HTMLSpanElement>(null);7  const spinAnimationRef = useRef<Animation | null>(null);8  const settleAnimationRef = useRef<Animation | null>(null);9
10  const startSpinning = () => {11    const gradient = gradientRef.current;12    if (!gradient || spinAnimationRef.current) return;13    settleAnimationRef.current?.cancel();14    settleAnimationRef.current = null;15    spinAnimationRef.current = gradient.animate([{ transform: "rotate(0deg)" }, { transform: "rotate(360deg)" }], { duration: 3000, easing: "linear", iterations: Infinity });16  };17
18  const settleAtStart = () => {19    const gradient = gradientRef.current;20    if (!gradient) return;21    const spin = spinAnimationRef.current;22    if (!spin) return;23    const currentTime = typeof spin.currentTime === "number" ? spin.currentTime : 0;24    const angle = ((currentTime % 3000) / 3000) * 360;25    spin.cancel();26    spinAnimationRef.current = null;27    settleAnimationRef.current?.cancel();28    const settle = gradient.animate([{ transform: `rotate(${angle}deg)` }, { transform: "rotate(0deg)" }], { duration: Math.max((angle / 360) * 3000, 16), easing: "linear", fill: "forwards" });29    settleAnimationRef.current = settle;30    void settle.finished.then(() => { if (settleAnimationRef.current === settle) { settle.cancel(); settleAnimationRef.current = null; } }, () => {});31  };32
33  useEffect(() => () => { spinAnimationRef.current?.cancel(); settleAnimationRef.current?.cancel(); }, []);34
35  return (36    <button type="button" className="subscribe-shine" onMouseEnter={startSpinning} onMouseLeave={settleAtStart} onFocus={startSpinning} onBlur={settleAtStart}>37      <span ref={gradientRef} className="subscribe-shine-gradient" aria-hidden="true" />38      <span className="subscribe-shine-inner">Subscribe</span>39    </button>40  );41}

1.subscribe-shine {2  position: relative;3  display: flex;4  align-items: center;5  justify-content: center;6  width: 200px;7  height: 60px;8  overflow: hidden;9  border: 0;10  border-radius: 999px;11  background: transparent;12  padding: 0;13  cursor: pointer;14}15.subscribe-shine-gradient {16  width: 230px;17  height: 250px;18  flex: none;19  background: linear-gradient(121deg, light-dark(#f4f6f9,#1b1b1b) 38%, light-dark(#14181e,#f0f0f0) 50%, light-dark(#f4f6f9,#1b1b1b) 61%);20}21.subscribe-shine-inner {22  position: absolute;23  inset: 1px;24  display: flex;25  align-items: center;26  justify-content: center;27  border-radius: 999px;28  background: light-dark(#ffffff,#0b0b11);29  color: light-dark(#14181e,#f0f0f0);30  font-size: 13px;31  font-weight: 700;32  line-height: 1;33  text-transform: uppercase;34}35.subscribe-shine:focus-visible {36  outline: 2px solid #f97316;37  outline-offset: 3px;38}