Neumorphic Toggle Switch

[{"id":"91576c11-64d9-43c8-a821-6ddb8315650b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"9533b944-8882-4b23-a0a6-d1496c4b9200","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"* {\\n box-sizing: border-box;\\n}\\n\\nbody {\\n margin: 0;\\n min-height: 100vh;\\n background: #ecf0f3;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.toggle-page {\\n min-height: 100vh;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.neo-switch {\\n display: inline-flex;\\n align-items: center;\\n cursor: pointer;\\n}\\n\\n.neo-switch-input {\\n position: absolute;\\n opacity: 0;\\n pointer-events: none;\\n}\\n\\n.neo-switch-track {\\n isolation: isolate;\\n position: relative;\\n display: block;\\n width: 60px;\\n height: 30px;\\n overflow: hidden;\\n border-radius: 999px;\\n background: #ecf0f3;\\n box-shadow:\\n -8px -4px 8px 0px #ffffff,\\n 8px 4px 12px 0px #d1d9e6,\\n 4px 4px 4px 0px #d1d9e6 inset,\\n -4px -4px 4px 0px #ffffff inset;\\n}\\n\\n.neo-switch-indicator {\\n position: absolute;\\n top: 0;\\n left: 0;\\n display: block;\\n width: 200%;\\n height: 100%;\\n border-radius: 999px;\\n background: #ecf0f3;\\n transform: translate3d(-75%, 0, 0);\\n transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);\\n box-shadow:\\n -8px -4px 8px 0px #ffffff,\\n 8px 4px 12px 0px #d1d9e6;\\n}\\n\\n.neo-switch-input:checked + .neo-switch-track .neo-switch-indicator {\\n transform: translate3d(25%, 0, 0);\\n}\\n\\n.neo-switch:active .neo-switch-track {\\n transform: scale(0.96);\\n}\\n\\n.neo-switch-input:focus-visible + .neo-switch-track {\\n outline: 3px solid #8ba4ff;\\n outline-offset: 6px;\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .neo-switch-indicator,\\n .neo-switch-track {\\n transition: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Neumorphic Toggle Switch\\n \\n \\n \\n

\\n \\n \\n \\n \\n \\n \\n

\\n\\n \\n \\n\",\"language\":\"html\"},{\"id\":\"/package.json\",\"name\":\"package.json\",\"code\":\"{\\n \\\"dependencies\\\": {},\\n \\\"main\\\": \\\"/index.html\\\",\\n \\\"devDependencies\\\": {}\\n}\",\"language\":\"json\"}]","template":"vanilla-ts","activeFile":"/index.html","viewMode":"both","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]"},"children":[]},{"id":"ce7578ea-6e28-458b-8e7f-d4a28fb12125","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"cd492dff-b0ad-49ab-aab4-c2d4ef97a7fb","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"740375eb-f727-40b9-ba76-011659c32b7b","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n \\n \\n \\n \\n \\n

\\n\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"10b473c8-eb20-4bdb-80e6-8c1644b94cb6","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"c6e18a19-7f79-4eaf-8401-ffb37783ac5e","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"2my9dcnjf\",\"name\":\"styles.css\",\"code\":\"* {\\n box-sizing: border-box;\\n}\\n\\nbody {\\n margin: 0;\\n min-height: 100vh;\\n background: #ecf0f3;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.toggle-page {\\n min-height: 100vh;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.neo-switch {\\n display: inline-flex;\\n align-items: center;\\n cursor: pointer;\\n}\\n\\n.neo-switch-input {\\n position: absolute;\\n opacity: 0;\\n pointer-events: none;\\n}\\n\\n.neo-switch-track {\\n isolation: isolate;\\n position: relative;\\n display: block;\\n width: 60px;\\n height: 30px;\\n overflow: hidden;\\n border-radius: 999px;\\n background: #ecf0f3;\\n box-shadow:\\n -8px -4px 8px 0px #ffffff,\\n 8px 4px 12px 0px #d1d9e6,\\n 4px 4px 4px 0px #d1d9e6 inset,\\n -4px -4px 4px 0px #ffffff inset;\\n}\\n\\n.neo-switch-indicator {\\n position: absolute;\\n top: 0;\\n left: 0;\\n display: block;\\n width: 200%;\\n height: 100%;\\n border-radius: 999px;\\n background: #ecf0f3;\\n transform: translate3d(-75%, 0, 0);\\n transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);\\n box-shadow:\\n -8px -4px 8px 0px #ffffff,\\n 8px 4px 12px 0px #d1d9e6;\\n}\\n\\n.neo-switch-input:checked + .neo-switch-track .neo-switch-indicator {\\n transform: translate3d(25%, 0, 0);\\n}\\n\\n.neo-switch:active .neo-switch-track {\\n transform: scale(0.96);\\n}\\n\\n.neo-switch-input:focus-visible + .neo-switch-track {\\n outline: 3px solid #8ba4ff;\\n outline-offset: 6px;\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .neo-switch-indicator,\\n .neo-switch-track {\\n transition: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2f7360ea-3da9-4997-995b-be9306503be7","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[],"children":[]},{"id":"f050634c-3ab8-4570-8dff-9a28bbbb7f29","type":"divider","props":{},"children":[]},{"id":"3d4659e8-80a4-4564-91d2-d9b8273d0de8","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"57597472-2df6-4247-a953-0c14948f1379","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The switch uses soft neumorphic shadows on the outer track and the moving indicator. The base background is ","styles":{}},{"type":"text","text":"#ecf0f3","styles":{"code":true}},{"type":"text","text":", so the shadow effect blends cleanly.","styles":{}}],"children":[]},{"id":"65313251-be72-4783-9a62-a2aaf364ec60","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Layout / Center\n\nThe ","styles":{}},{"type":"text","text":".toggle-page","styles":{"code":true}},{"type":"text","text":" wrapper centers the toggle using flexbox and full viewport height.","styles":{}}],"children":[]},{"id":"23c6ea88-dee8-484f-acf7-41bd70457c92","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Toggle Structure\n\nThe checkbox is hidden with ","styles":{}},{"type":"text","text":"opacity: 0","styles":{"code":true}},{"type":"text","text":", while the visible UI is handled by ","styles":{}},{"type":"text","text":".neo-switch-track","styles":{"code":true}},{"type":"text","text":" and ","styles":{}},{"type":"text","text":".neo-switch-indicator","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"21ab07a1-6011-483b-85b7-90d323159479","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Animation\n\nWhen checked, the indicator moves from:","styles":{}}],"children":[]},{"id":"30501760-b67b-42a1-beea-de55ac01e027","type":"procode","props":{"code":"transform: translate3d(-75%, 0, 0);","language":"javascript","filename":"","files":"[{\"id\":\"jwge4bqe2\",\"name\":\"code\",\"code\":\"transform: translate3d(-75%, 0, 0);\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"66d5cdd5-2816-44a0-9fb2-8a34a13642e4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"to:","styles":{}}],"children":[]},{"id":"13fad71c-b31b-48b6-9c3f-0043a03f03dc","type":"procode","props":{"code":"transform: translate3d(25%, 0, 0);","language":"javascript","filename":"","files":"[{\"id\":\"u6f7o1wf3\",\"name\":\"code\",\"code\":\"transform: translate3d(25%, 0, 0);\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fed31c0d-42dd-4cba-85f4-dda55c4b34df","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The motion uses a spring-like cubic-bezier transition for the soft bounce effect.","styles":{}}],"children":[]},{"id":"5f5cab85-caef-462a-a3df-aaf0d8864653","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]