{
    "id": "bhaskar/bounce-nav-indicator",
    "kind": "component",
    "title": "Bounce Nav Indicator",
    "summary": "Simple sidebar navigation where a small diamond indicator bounces to the hovered or selected item with a spring.",
    "author": "Admin",
    "stars": 0,
    "url": "https://ownlyplans.com/bhaskar/bounce-nav-indicator/",
    "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": "Navigation",
        "html": "<div class=\"bn\"><nav class=\"nv\"><i class=\"dm\"></i></nav></div>",
        "css": ".bn{width:100%;height:100%;min-height:380px;display:grid;place-items:center;font-family:system-ui,-apple-system,sans-serif;color:#eee;}.nv{position:relative;padding-left:24px}.nv a{display:block;height:34px;line-height:34px;font-size:14px;color:#888;cursor:pointer;transition:color .2s}.nv a.on{color:#fff;font-weight:600}.nv a:hover{color:#ddd}.dm{position:absolute;left:6px;top:0;width:7px;height:7px;background:#0a84ff;transform:translateY(13px) rotate(45deg);transition:transform .55s cubic-bezier(.3,1.9,.5,1)}",
        "js": "(function(){var nv=document.querySelector(\".nv\"),dm=nv.querySelector(\".dm\"),I=[\"Overview\",\"Components\",\"Motion\",\"Templates\",\"Changelog\"],a=1,els=I.map(function(t,i){var e=document.createElement(\"a\");e.textContent=t;e.onclick=function(){a=i;mv(i);mark()};e.onmouseenter=function(){mv(i)};nv.appendChild(e);return e});function mv(i){dm.style.transform=\"translateY(\"+(i*34+13)+\"px) rotate(45deg)\"}function mark(){els.forEach(function(e,i){e.classList.toggle(\"on\",i===a)})}nv.onmouseleave=function(){mv(a)};mark();mv(a)})();",
        "react": "",
        "dependencies": [],
        "install": "",
        "licence_notice": ""
    }
}