{
    "id": "bhaskar/bluetooth-buddy-widget",
    "kind": "component",
    "title": "Bluetooth Buddy Widget",
    "summary": "A black status tile with a teal ring, On label and a smiling teal blob bobbing at the bottom.",
    "author": "Admin",
    "stars": 0,
    "url": "https://ownlyplans.com/bhaskar/bluetooth-buddy-widget/",
    "stack": [],
    "tools": [
        "claude-code",
        "cursor",
        "lovable"
    ],
    "difficulty": "beginner",
    "license": "mit",
    "version": "1.0",
    "overview": "A connectivity widget with a pulsing outline ring, a status word and a friendly blob character that blinks. CSS only; change the colour variable per state.",
    "steps": [],
    "files": [],
    "install": "",
    "how_to_use": "Use the component code (html, css, js, or react) directly, or run the install command.",
    "component": {
        "category": "Other",
        "html": "<div class='fc' style='--c:#14b8a6'><span class='ic'>ᛒ</span><div class='rg'></div><b>On</b><div class='bl'><i class='e l'></i><i class='e r'></i><u></u></div></div>",
        "css": ".fc{position:relative;width:200px;height:200px;margin:auto;background:#000;border-radius:30px;overflow:hidden;font-family:Inter,Arial,sans-serif;color:#fff;box-shadow:0 12px 32px rgba(0,0,0,.3)}.fc .ic{position:absolute;right:16px;top:12px;font-size:14px;color:var(--c)}.fc .rg{position:absolute;left:50%;top:26px;width:112px;height:112px;margin-left:-56px;border:1px solid color-mix(in srgb,var(--c) 45%,transparent);border-radius:50%;animation:pu 3s ease-in-out infinite}.fc b{position:absolute;left:0;right:0;top:66px;text-align:center;font-size:17px;font-weight:600}.bl{position:absolute;left:50%;bottom:-62px;width:150px;height:150px;margin-left:-75px;border-radius:50%;background:var(--c);animation:fl 4s ease-in-out infinite}.e{position:absolute;top:34px;width:6px;height:6px;border-radius:50%;background:#fff;animation:bk 4s infinite}.e.l{left:56px}.e.r{right:56px}.bl u{position:absolute;left:50%;top:44px;width:20px;height:9px;margin-left:-10px;border-bottom:2.500px solid #fff;border-radius:0 0 20px 20px}@keyframes pu{50%{transform:scale(1.06);opacity:.6}}@keyframes fl{50%{transform:translateY(-6px)}}@keyframes bk{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}@media(prefers-reduced-motion:reduce){.fc *{animation:none!important}}",
        "js": "",
        "react": "",
        "dependencies": [],
        "install": "",
        "licence_notice": ""
    }
}