{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "cursor-edge-glow-button", "title": "Cursor Edge Glow Button", "author": "henriquegpb ", "description": "A spring-tracked pill light with mirrored edge glows that crossfade as the pointer changes sides.", "files": [ { "path": "registry/microkit/cursor-edge-glow-button.tsx", "content": "\"use client\";\n\nimport { useEffect, useRef } from \"react\";\n\nconst FREQUENCY = 3.4;\nconst DAMPING = 0.78;\nconst GLOW_RISE = 0.5;\nconst EDGE_SATURATION = 0.55;\nconst EDGE_BRIGHTNESS = 0.12;\nconst HUE_SHIFT = -5;\n\nexport function CursorEdgeGlowButton() {\n const containerRef = useRef(null);\n const buttonRef = useRef(null);\n const lightTrackRef = useRef(null);\n const rightGlowRef = useRef(null);\n const leftGlowRef = useRef(null);\n const animationFrameRef = useRef(null);\n\n useEffect(() => {\n const container = containerRef.current;\n const button = buttonRef.current;\n const lightTrack = lightTrackRef.current;\n const rightGlow = rightGlowRef.current;\n const leftGlow = leftGlowRef.current;\n if (!container || !button || !lightTrack || !rightGlow || !leftGlow) return;\n\n let bound = container.getBoundingClientRect().width / 2 + 12;\n let x = bound;\n let velocity = 0;\n let target = bound;\n let inside = false;\n let last = 0;\n\n const measure = () => {\n bound = container.getBoundingClientRect().width / 2 + 12;\n };\n\n const paint = () => {\n lightTrack.style.setProperty(\"--light-x\", x.toFixed(2) + \"px\");\n const normalized = Math.max(-1, Math.min(1, x / bound));\n const magnitude = Math.abs(normalized);\n const intensity = Math.pow(magnitude, GLOW_RISE);\n const colorTuning =\n \"hue-rotate(\" + HUE_SHIFT + \"deg)\" +\n \" saturate(\" + (1 + EDGE_SATURATION * magnitude).toFixed(3) + \")\" +\n \" brightness(\" + (1 + EDGE_BRIGHTNESS * magnitude).toFixed(3) + \")\";\n\n rightGlow.style.opacity = (normalized > 0 ? intensity : 0).toFixed(3);\n leftGlow.style.opacity = (normalized < 0 ? intensity : 0).toFixed(3);\n rightGlow.style.filter = colorTuning;\n leftGlow.style.filter = colorTuning;\n };\n\n measure();\n paint();\n const resizeObserver = new ResizeObserver(measure);\n resizeObserver.observe(container);\n\n if (window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) {\n return () => resizeObserver.disconnect();\n }\n\n const frame = (now = performance.now()) => {\n const delta = Math.min((now - last) / 1000, 0.032);\n last = now;\n const angularFrequency = 2 * Math.PI * FREQUENCY;\n velocity +=\n (angularFrequency * angularFrequency * (target - x) -\n 2 * DAMPING * angularFrequency * velocity) *\n delta;\n x += velocity * delta;\n paint();\n\n if (inside || Math.abs(target - x) > 0.15 || Math.abs(velocity) > 0.6) {\n animationFrameRef.current = requestAnimationFrame(frame);\n } else {\n animationFrameRef.current = null;\n x = target;\n velocity = 0;\n paint();\n }\n };\n\n const kick = () => {\n if (animationFrameRef.current === null) {\n last = performance.now();\n animationFrameRef.current = requestAnimationFrame(frame);\n }\n };\n\n container.onpointermove = (event) => {\n const bounds = container.getBoundingClientRect();\n inside = true;\n target = Math.max(-bound, Math.min(bound, event.clientX - (bounds.left + bounds.width / 2)));\n kick();\n };\n\n container.onpointerleave = () => {\n inside = false;\n target = x;\n kick();\n };\n\n button.onfocus = () => {\n inside = false;\n target = 0;\n kick();\n };\n\n button.onblur = () => {\n inside = false;\n target = x;\n kick();\n };\n\n return () => {\n resizeObserver.disconnect();\n container.onpointermove = null;\n container.onpointerleave = null;\n button.onfocus = null;\n button.onblur = null;\n if (animationFrameRef.current !== null) cancelAnimationFrame(animationFrameRef.current);\n };\n }, []);\n\n return (\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n );\n}\n", "type": "registry:component", "target": "@components/microkit/cursor-edge-glow-button.tsx" } ], "docs": "Live preview and the CSS, JavaScript and Tailwind variants: https://microkit.co/components/cursor-edge-glow-button", "categories": [ "button", "hover" ], "type": "registry:component" }