{
    "id": "bhaskar/eclipse-switch",
    "kind": "component",
    "title": "Eclipse Switch",
    "summary": "A deep indigo night pill with a crescent moon that turns into a glowing amber sun when switched on.",
    "author": "Admin",
    "stars": 0,
    "url": "https://ownlyplans.com/bhaskar/eclipse-switch/",
    "stack": [],
    "tools": [
        "claude-code",
        "cursor",
        "lovable"
    ],
    "difficulty": "beginner",
    "license": "mit",
    "version": "1.0",
    "overview": "The moon is a transparent circle with an inset shadow, which draws the crescent without an image. Switching on fills the knob and swaps the track colour. Size it by changing font-size on .eclipse.",
    "steps": [],
    "files": [],
    "install": "",
    "how_to_use": "Use the component code (html, css, js, or react) directly, or run the install command.",
    "component": {
        "category": "Toggles and inputs",
        "html": "<label class=\"eclipse\"><input type=\"checkbox\" role=\"switch\" aria-label=\"Day mode\"><span class=\"eclipse__track\"><span class=\"eclipse__knob\"></span></span></label>",
        "css": ".eclipse{position:relative;display:inline-block;width:3.5em;height:2em;font-size:17px}\n.eclipse input{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}\n.eclipse__track{position:absolute;inset:0;border-radius:2em;background:#2b1f6b;transition:background-color .4s ease}\n.eclipse__knob{position:absolute;top:.3em;left:.3em;width:1.4em;height:1.4em;border-radius:50%;background:transparent;box-shadow:inset .45em -.15em 0 0 #ffd75e;transition:transform .4s cubic-bezier(.3,1.3,.5,1),box-shadow .4s ease,background-color .4s ease}\n.eclipse input:checked+.eclipse__track{background:#8ec9ff}\n.eclipse input:checked+.eclipse__track .eclipse__knob{transform:translateX(1.5em);background:#ffb300;box-shadow:inset 0 0 0 0 #ffd75e,0 0 0 .22em rgba(255,179,0,.35)}\n.eclipse input:focus-visible+.eclipse__track{outline:2px solid #1659f5;outline-offset:3px}\n@media (prefers-reduced-motion:reduce){.eclipse__track,.eclipse__knob{transition:none}}",
        "js": "",
        "react": "",
        "dependencies": [],
        "install": "",
        "licence_notice": ""
    }
}