loop-heroreel

> ## Documentation Index > Fetch the complete documentation index at: https://hyperframes-feat-registry-loop-blocks.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # Loop Hero Reel > A row of thumbnails with the active one lifted and enlarged, stepping along the row. 8 image slots, 10s seamless loop, 1:1. export const InstallCommand = ({command, item}) => { const [copied, setCopied] = React.useState(false); const [tuned, setTuned] = React.useState(""); React.useEffect(() => { if (!item) return; const read = () => { try { const raw = new URLSearchParams(window.location.search).get(`vars-${item}`); if (!raw) return setTuned(""); const parsed = JSON.parse(raw); if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) return setTuned(""); if (Object.keys(parsed).length === 0) return setTuned(""); setTuned(` --vars '${JSON.stringify(parsed)}'`); } catch { setTuned(""); } }; read(); window.addEventListener("hf-vars-changed", read); window.addEventListener("popstate", read); return () => { window.removeEventListener("hf-vars-changed", read); window.removeEventListener("popstate", read); }; }, [item]); const fullCommand = `${command}${tuned}`; const copy = async () => { try { if (navigator.clipboard && window.isSecureContext) { await navigator.clipboard.writeText(fullCommand); } else { const previous = document.activeElement; const scratch = document.createElement("textarea"); scratch.value = fullCommand; scratch.setAttribute("readonly", ""); scratch.style.position = "fixed"; scratch.style.opacity = "0"; document.body.appendChild(scratch); scratch.select(); document.execCommand("copy"); document.body.removeChild(scratch); previous?.focus?.(); } setCopied(true); setTimeout(() => setCopied(false), 2000); } catch {} }; return


        {fullCommand}

{copied ? "Copied" : ""}

; };