{ "name": "arrow-fill-button", "type": "registry:component", "title": "Arrow Fill Button", "description": "Button with expanding circle fill and animated arrow icon on hover", "dependencies": [ "lucide-react" ], "registryDependencies": [], "exportName": "ArrowFillButton", "exportKind": "default", "tier": "free", "version": "1.1.0", "changelog": [ { "version": "1.1.0", "date": "2026-07-21", "summary": "Added prefers-reduced-motion support: fill/clip-path/arrow hover transitions are disabled or shown in their end state instead of animating", "breaking": false }, { "version": "1.0.0", "date": "2026-06-04", "summary": "Initial release", "breaking": false } ], "files": [ { "path": "index.jsx", "type": "registry:component", "target": "src/components/effects/arrow-fill-button/index.jsx", "content": "// Built using Hyperiux Vault: https://vault.hyperiux.com\n\n\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\nimport { ArrowRight } from \"lucide-react\";\n\nconst DEFAULT_HREF = \"#\";\nconst COMPACT_LAYOUT_BREAKPOINT = 1280;\nconst ANIMATION_DURATION_MS = 450;\n\nfunction ArrowFillButton({\n btnText=\"Hover Me\",\n href = DEFAULT_HREF,\n className = \"\",\n\n bgColor = \"#ff5f00\",\n textColor = \"#ffffff\",\n\n fillBgColor = \"#ffffff\",\n fillTextColor = \"#ff5f00\",\n\n hoverFillBgColor = \"#ffffff\",\n hoverFillTextColor = \"#ff5f00\",\n\n arrowColor,\n hoverArrowColor,\n\n ...props\n}) {\n const [isReady, setIsReady] = useState(false);\n const [isCompactLayout, setIsCompactLayout] = useState(false);\n const [isPressed, setIsPressed] = useState(false);\n const releaseTimeoutRef = useRef(null);\n\n const usesUtilityBackground =\n className.includes(\"bg-\") ||\n className.includes(\"from-\") ||\n className.includes(\"via-\") ||\n className.includes(\"to-\");\n\n useEffect(() => {\n const frame = window.requestAnimationFrame(() => {\n setIsReady(true);\n });\n\n return () => window.cancelAnimationFrame(frame);\n }, []);\n\n useEffect(() => {\n const mediaQuery = window.matchMedia(\n `(max-width: ${COMPACT_LAYOUT_BREAKPOINT - 1}px)`\n );\n\n const syncCompactLayout = (event) => {\n const matches = \"matches\" in event ? event.matches : event.currentTarget.matches;\n setIsCompactLayout(matches);\n\n if (!matches) {\n setIsPressed(false);\n }\n };\n\n syncCompactLayout(mediaQuery);\n mediaQuery.addEventListener(\"change\", syncCompactLayout);\n\n return () => {\n mediaQuery.removeEventListener(\"change\", syncCompactLayout);\n };\n }, []);\n\n useEffect(() => {\n return () => {\n if (releaseTimeoutRef.current) {\n window.clearTimeout(releaseTimeoutRef.current);\n }\n };\n }, []);\n\n const clearPressedState = () => {\n if (releaseTimeoutRef.current) {\n window.clearTimeout(releaseTimeoutRef.current);\n }\n\n releaseTimeoutRef.current = window.setTimeout(() => {\n setIsPressed(false);\n releaseTimeoutRef.current = null;\n }, ANIMATION_DURATION_MS);\n };\n\n const handlePointerDown = (event) => {\n props.onPointerDown?.(event);\n\n if (!isCompactLayout || event.pointerType === \"mouse\") {\n return;\n }\n\n if (releaseTimeoutRef.current) {\n window.clearTimeout(releaseTimeoutRef.current);\n releaseTimeoutRef.current = null;\n }\n\n setIsPressed(true);\n };\n\n const handlePointerUp = (event) => {\n props.onPointerUp?.(event);\n\n if (!isCompactLayout || event.pointerType === \"mouse\") {\n return;\n }\n\n clearPressedState();\n };\n\n const handlePointerCancel = (event) => {\n props.onPointerCancel?.(event);\n\n if (!isCompactLayout || event.pointerType === \"mouse\") {\n return;\n }\n\n clearPressedState();\n };\n\n return (\n \n {btnText}\n\n \n\n \n {btnText}\n \n\n \n \n\n \n \n \n );\n}\n\nexport default ArrowFillButton;\n" } ] }