{
    "id": "bhaskar/infinite-tag-marquee",
    "kind": "component",
    "title": "Infinite Tag Marquee",
    "summary": "A seamless looping row of rounded tags that scrolls forever with faded edges and pauses when you hover over it.",
    "author": "Admin",
    "stars": 0,
    "url": "https://ownlyplans.com/bhaskar/infinite-tag-marquee/",
    "stack": [],
    "tools": [
        "claude-code"
    ],
    "difficulty": "beginner",
    "license": "cc-by-4.0",
    "version": "1.0",
    "overview": "",
    "steps": [],
    "files": [],
    "install": "",
    "how_to_use": "Use the component code (html, css, js, or react) directly, or run the install command.",
    "component": {
        "category": "Motion and entrances",
        "html": "<div class=\"mq\"><div class=\"trk\"><span>Analytics</span><span>Payments</span><span>Design</span><span>Source</span><span>Docs</span><span>Video</span><span>Search</span><span>Deploy</span></div></div>",
        "css": ".mq{width:420px;overflow:hidden;font-family:system-ui,-apple-system,sans-serif;-webkit-mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}.trk{display:flex;gap:12px;width:max-content;animation:mq 22s linear infinite}.mq:hover .trk{animation-play-state:paused}.trk span{padding:12px 18px;border-radius:12px;border:1px solid #2a2a2a;background:#1a1a1a;color:#e5e5e5;font:600 13px/1 inherit;white-space:nowrap}@keyframes mq{to{transform:translateX(-50%)}}",
        "js": "(function(){var t=document.querySelector('.trk');t.innerHTML+=t.innerHTML})();",
        "react": "",
        "dependencies": [],
        "install": "",
        "licence_notice": ""
    }
}