Cursor Edge Glow Button

1"use client";2
3import { useEffect, useRef } from "react";4
5const FREQUENCY = 3.4;6const DAMPING = 0.78;7const GLOW_RISE = 0.5;8const EDGE_SATURATION = 0.55;9const EDGE_BRIGHTNESS = 0.12;10const HUE_SHIFT = -5;11
12export function CursorEdgeGlowButton() {13  const containerRef = useRef<HTMLDivElement>(null);14  const buttonRef = useRef<HTMLButtonElement>(null);15  const lightTrackRef = useRef<HTMLSpanElement>(null);16  const rightGlowRef = useRef<HTMLSpanElement>(null);17  const leftGlowRef = useRef<HTMLSpanElement>(null);18  const animationFrameRef = useRef<number | null>(null);19
20  useEffect(() => {21    const container = containerRef.current;22    const button = buttonRef.current;23    const lightTrack = lightTrackRef.current;24    const rightGlow = rightGlowRef.current;25    const leftGlow = leftGlowRef.current;26    if (!container || !button || !lightTrack || !rightGlow || !leftGlow) return;27
28    let bound = container.getBoundingClientRect().width / 2 + 12;29    let x = bound;30    let velocity = 0;31    let target = bound;32    let inside = false;33    let last = 0;34
35    const measure = () => {36      bound = container.getBoundingClientRect().width / 2 + 12;37    };38
39    const paint = () => {40      lightTrack.style.setProperty("--light-x", x.toFixed(2) + "px");41      const normalized = Math.max(-1, Math.min(1, x / bound));42      const magnitude = Math.abs(normalized);43      const intensity = Math.pow(magnitude, GLOW_RISE);44      const colorTuning =45        "hue-rotate(" + HUE_SHIFT + "deg)" +46        " saturate(" + (1 + EDGE_SATURATION * magnitude).toFixed(3) + ")" +47        " brightness(" + (1 + EDGE_BRIGHTNESS * magnitude).toFixed(3) + ")";48
49      rightGlow.style.opacity = (normalized > 0 ? intensity : 0).toFixed(3);50      leftGlow.style.opacity = (normalized < 0 ? intensity : 0).toFixed(3);51      rightGlow.style.filter = colorTuning;52      leftGlow.style.filter = colorTuning;53    };54
55    measure();56    paint();57    const resizeObserver = new ResizeObserver(measure);58    resizeObserver.observe(container);59
60    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {61      return () => resizeObserver.disconnect();62    }63
64    const frame = (now = performance.now()) => {65      const delta = Math.min((now - last) / 1000, 0.032);66      last = now;67      const angularFrequency = 2 * Math.PI * FREQUENCY;68      velocity +=69        (angularFrequency * angularFrequency * (target - x) -70          2 * DAMPING * angularFrequency * velocity) *71        delta;72      x += velocity * delta;73      paint();74
75      if (inside || Math.abs(target - x) > 0.15 || Math.abs(velocity) > 0.6) {76        animationFrameRef.current = requestAnimationFrame(frame);77      } else {78        animationFrameRef.current = null;79        x = target;80        velocity = 0;81        paint();82      }83    };84
85    const kick = () => {86      if (animationFrameRef.current === null) {87        last = performance.now();88        animationFrameRef.current = requestAnimationFrame(frame);89      }90    };91
92    container.onpointermove = (event) => {93      const bounds = container.getBoundingClientRect();94      inside = true;95      target = Math.max(-bound, Math.min(bound, event.clientX - (bounds.left + bounds.width / 2)));96      kick();97    };98
99    container.onpointerleave = () => {100      inside = false;101      target = x;102      kick();103    };104
105    button.onfocus = () => {106      inside = false;107      target = 0;108      kick();109    };110
111    button.onblur = () => {112      inside = false;113      target = x;114      kick();115    };116
117    return () => {118      resizeObserver.disconnect();119      container.onpointermove = null;120      container.onpointerleave = null;121      button.onfocus = null;122      button.onblur = null;123      if (animationFrameRef.current !== null) cancelAnimationFrame(animationFrameRef.current);124    };125  }, []);126
127  return (128    <div ref={containerRef} className="relative z-10 inline-flex items-center">129      <span ref={rightGlowRef} aria-hidden="true" className="pointer-events-none absolute left-1/2 top-1/2 h-[calc(100%+9px)] w-[calc(100%+9px)] rounded-full border-[3px] border-transparent opacity-100 will-change-transform [transform:translate(-50%,-50%)]">130        <span className="absolute left-[-3px] top-[-3px] z-20 box-content h-full w-full rounded-full border-[3px] border-transparent blur-[15px] [background:linear-gradient(transparent,transparent)_padding-box,linear-gradient(91.88deg,rgba(255,137,100,.2)_46.45%,#cd3100_98.59%)_border-box]" />131        <span className="absolute left-[-2px] top-[-2px] z-10 box-content h-full w-full rounded-full border-2 border-transparent blur-[2px] [background:linear-gradient(transparent,transparent)_padding-box,linear-gradient(97.68deg,rgba(255,177,153,0)_38.1%,rgba(255,177,153,.2)_82.47%,#ff7950_93.3%)_border-box]" />132        <span className="relative block h-full w-full rounded-full border border-transparent [background:linear-gradient(transparent,transparent)_padding-box,linear-gradient(103.7deg,rgba(188,155,143,.1)_38.66%,rgba(233,132,99,.1)_68.55%,#e98463_85.01%,#fff_92.12%)_border-box]">133          <span className="absolute left-[-2px] top-[-2px] z-30 box-content h-full w-full rounded-full border-2 border-transparent blur-[7px] [background:linear-gradient(transparent,transparent)_padding-box,linear-gradient(91.96deg,rgba(255,177,153,0)_6.11%,rgba(255,177,153,.2)_53.57%,#ff7950_93.6%)_border-box]" />134        </span>135      </span>136      <span ref={leftGlowRef} aria-hidden="true" className="pointer-events-none absolute left-1/2 top-1/2 h-[calc(100%+9px)] w-[calc(100%+9px)] rounded-full border-[3px] border-transparent opacity-0 will-change-transform [transform:translate(-50%,-50%)_scaleX(-1)]">137        <span className="absolute left-[-3px] top-[-3px] z-20 box-content h-full w-full rounded-full border-[3px] border-transparent blur-[15px] [background:linear-gradient(transparent,transparent)_padding-box,linear-gradient(91.88deg,rgba(255,137,100,.2)_46.45%,#cd3100_98.59%)_border-box]" />138        <span className="absolute left-[-2px] top-[-2px] z-10 box-content h-full w-full rounded-full border-2 border-transparent blur-[2px] [background:linear-gradient(transparent,transparent)_padding-box,linear-gradient(97.68deg,rgba(255,177,153,0)_38.1%,rgba(255,177,153,.2)_82.47%,#ff7950_93.3%)_border-box]" />139        <span className="relative block h-full w-full rounded-full border border-transparent [background:linear-gradient(transparent,transparent)_padding-box,linear-gradient(103.7deg,rgba(188,155,143,.1)_38.66%,rgba(233,132,99,.1)_68.55%,#e98463_85.01%,#fff_92.12%)_border-box]">140          <span className="absolute left-[-2px] top-[-2px] z-30 box-content h-full w-full rounded-full border-2 border-transparent blur-[7px] [background:linear-gradient(transparent,transparent)_padding-box,linear-gradient(91.96deg,rgba(255,177,153,0)_6.11%,rgba(255,177,153,.2)_53.57%,#ff7950_93.6%)_border-box]" />141        </span>142      </span>143      <button ref={buttonRef} type="button" className="relative z-10 flex h-10 cursor-pointer items-center justify-center gap-1 overflow-hidden rounded-full border border-white/60 bg-[#d1d1d1] px-[3.25rem] text-xs font-bold uppercase leading-none tracking-[-.015em] text-[#5a250a] transition-colors duration-200 ease-[cubic-bezier(.4,0,.2,1)] [font-family:Inter,-apple-system,'Segoe_UI',sans-serif] focus-visible:outline-2 focus-visible:outline-offset-8 focus-visible:outline-[#ff8964]">144        <span ref={lightTrackRef} aria-hidden="true" className="absolute left-1/2 top-0 z-[-10] ml-[-102px] flex h-full w-[204px] items-center justify-center [--light-x:120px] [transform:translateX(var(--light-x))_translateZ(0)]">145          <span className="absolute top-1/2 h-[121px] w-[121px] -translate-y-1/2 [background:radial-gradient(50%_50%_at_50%_50%,#fffff5_3.5%,#ffaa81_26.5%,#ffda9f_37.5%,rgba(255,170,129,.5)_49%,rgba(210,106,58,0)_92.5%)]" />146          <span className="absolute top-1/2 h-[103px] w-[204px] -translate-y-1/2 blur-[5px] [background:radial-gradient(43.3%_44.23%_at_50%_49.51%,#fffff7_29%,#fffacd_48.5%,#f4d2bf_60.71%,rgba(214,211,210,0)_100%)]" />147        </span>148        <span>See in Action</span>149        <svg className="h-[9px] w-[17px] flex-none text-[#5a250a]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 9" aria-hidden="true">150          <path fill="currentColor" fillRule="evenodd" d="m12.495 0 4.495 4.495-4.495 4.495-.99-.99 2.805-2.805H0v-1.4h14.31L11.505.99z" clipRule="evenodd" />151        </svg>152      </button>153    </div>154  );155}