Radio Glider Selector

[{"id":"d8d41a2e-9699-417d-9ea3-74981bf1b12c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"268cef75-8549-439a-8ab0-86b44b92cdb5","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"* {\\n box-sizing: border-box;\\n}\\n\\nhtml,\\nbody {\\n min-height: 100%;\\n}\\n\\nbody {\\n margin: 0;\\n background: #0f0f0f;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\\n\\n.radio-container {\\n --main-color: #a855f7;\\n --main-color-opacity: #a855f71c;\\n --total-radio: 3;\\n\\n display: flex;\\n flex-direction: column;\\n position: relative;\\n padding-left: 0.5rem;\\n}\\n\\n.radio-container input {\\n position: absolute;\\n opacity: 0;\\n pointer-events: none;\\n appearance: none;\\n}\\n\\n.radio-container label {\\n cursor: pointer;\\n padding: 1rem;\\n position: relative;\\n color: grey;\\n font-size: 16px;\\n transition:\\n color 0.3s ease-in-out,\\n transform 0.3s ease-in-out;\\n}\\n\\n.radio-container label:hover {\\n color: #d8d8d8;\\n}\\n\\n.radio-container input:checked + label {\\n color: var(--main-color);\\n}\\n\\n.radio-container .glider-container {\\n position: absolute;\\n left: 0;\\n top: 0;\\n bottom: 0;\\n width: 1px;\\n background: linear-gradient(\\n 0deg,\\n rgba(0, 0, 0, 0) 0%,\\n rgba(27, 27, 27, 1) 50%,\\n rgba(0, 0, 0, 0) 100%\\n );\\n}\\n\\n.radio-container .glider-container .glider {\\n position: relative;\\n width: 100%;\\n height: calc(100% / var(--total-radio));\\n background: linear-gradient(\\n 0deg,\\n rgba(0, 0, 0, 0) 0%,\\n var(--main-color) 50%,\\n rgba(0, 0, 0, 0) 100%\\n );\\n transition: transform 0.5s cubic-bezier(0.37, 1.95, 0.66, 0.56);\\n}\\n\\n.radio-container .glider-container .glider::before {\\n content: \\\"\\\";\\n position: absolute;\\n height: 60%;\\n width: 300%;\\n top: 50%;\\n transform: translateY(-50%);\\n background: var(--main-color);\\n filter: blur(10px);\\n}\\n\\n.radio-container .glider-container .glider::after {\\n content: \\\"\\\";\\n position: absolute;\\n left: 0;\\n height: 100%;\\n width: 150px;\\n background: linear-gradient(\\n 90deg,\\n var(--main-color-opacity) 0%,\\n rgba(0, 0, 0, 0) 100%\\n );\\n}\\n\\n.radio-container input:nth-of-type(1):checked ~ .glider-container .glider {\\n transform: translateY(0);\\n}\\n\\n.radio-container input:nth-of-type(2):checked ~ .glider-container .glider {\\n transform: translateY(100%);\\n}\\n\\n.radio-container input:nth-of-type(3):checked ~ .glider-container .glider {\\n transform: translateY(200%);\\n}\\n\\n.radio-container input:nth-of-type(4):checked ~ .glider-container .glider {\\n transform: translateY(300%);\\n}\\n\\n.radio-container input:nth-of-type(5):checked ~ .glider-container .glider {\\n transform: translateY(400%);\\n}\\n\\n.radio-container input:nth-of-type(6):checked ~ .glider-container .glider {\\n transform: translateY(500%);\\n}\\n\\n.radio-container input:nth-of-type(7):checked ~ .glider-container .glider {\\n transform: translateY(600%);\\n}\\n\\n.radio-container input:nth-of-type(8):checked ~ .glider-container .glider {\\n transform: translateY(700%);\\n}\\n\\n.radio-container input:nth-of-type(9):checked ~ .glider-container .glider {\\n transform: translateY(800%);\\n}\\n\\n.radio-container input:nth-of-type(10):checked ~ .glider-container .glider {\\n transform: translateY(900%);\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .radio-container label,\\n .radio-container .glider-container .glider {\\n transition: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Radio Glider Selector\\n \\n \\n \\n

\\n

\\n \\n Free\\n\\n \\n Basic\\n\\n \\n Premium\\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":"/styles.css","viewMode":"both","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]"},"children":[]},{"id":"ce662cc8-b79c-41c3-ac58-62138a7e77d0","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"8ff97646-586f-4be1-8f68-6488e9c19566","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n

\\n \\n Free\\n\\n \\n Basic\\n\\n \\n Premium\\n\\n

\\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5ebfa8fc-7013-40f3-8715-91558dd0d012","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"e095e1b9-119c-4585-9e05-d3adf371000d","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"2my9dcnjf\",\"name\":\"styles.css\",\"code\":\"* {\\n box-sizing: border-box;\\n}\\n\\nhtml,\\nbody {\\n min-height: 100%;\\n}\\n\\nbody {\\n margin: 0;\\n background: #0f0f0f;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\\n\\n.radio-container {\\n --main-color: #a855f7;\\n --main-color-opacity: #a855f71c;\\n --total-radio: 3;\\n\\n display: flex;\\n flex-direction: column;\\n position: relative;\\n padding-left: 0.5rem;\\n}\\n\\n.radio-container input {\\n position: absolute;\\n opacity: 0;\\n pointer-events: none;\\n appearance: none;\\n}\\n\\n.radio-container label {\\n cursor: pointer;\\n padding: 1rem;\\n position: relative;\\n color: grey;\\n font-size: 16px;\\n transition:\\n color 0.3s ease-in-out,\\n transform 0.3s ease-in-out;\\n}\\n\\n.radio-container label:hover {\\n color: #d8d8d8;\\n}\\n\\n.radio-container input:checked + label {\\n color: var(--main-color);\\n}\\n\\n.radio-container .glider-container {\\n position: absolute;\\n left: 0;\\n top: 0;\\n bottom: 0;\\n width: 1px;\\n background: linear-gradient(\\n 0deg,\\n rgba(0, 0, 0, 0) 0%,\\n rgba(27, 27, 27, 1) 50%,\\n rgba(0, 0, 0, 0) 100%\\n );\\n}\\n\\n.radio-container .glider-container .glider {\\n position: relative;\\n width: 100%;\\n height: calc(100% / var(--total-radio));\\n background: linear-gradient(\\n 0deg,\\n rgba(0, 0, 0, 0) 0%,\\n var(--main-color) 50%,\\n rgba(0, 0, 0, 0) 100%\\n );\\n transition: transform 0.5s cubic-bezier(0.37, 1.95, 0.66, 0.56);\\n}\\n\\n.radio-container .glider-container .glider::before {\\n content: \\\"\\\";\\n position: absolute;\\n height: 60%;\\n width: 300%;\\n top: 50%;\\n transform: translateY(-50%);\\n background: var(--main-color);\\n filter: blur(10px);\\n}\\n\\n.radio-container .glider-container .glider::after {\\n content: \\\"\\\";\\n position: absolute;\\n left: 0;\\n height: 100%;\\n width: 150px;\\n background: linear-gradient(\\n 90deg,\\n var(--main-color-opacity) 0%,\\n rgba(0, 0, 0, 0) 100%\\n );\\n}\\n\\n.radio-container input:nth-of-type(1):checked ~ .glider-container .glider {\\n transform: translateY(0);\\n}\\n\\n.radio-container input:nth-of-type(2):checked ~ .glider-container .glider {\\n transform: translateY(100%);\\n}\\n\\n.radio-container input:nth-of-type(3):checked ~ .glider-container .glider {\\n transform: translateY(200%);\\n}\\n\\n.radio-container input:nth-of-type(4):checked ~ .glider-container .glider {\\n transform: translateY(300%);\\n}\\n\\n.radio-container input:nth-of-type(5):checked ~ .glider-container .glider {\\n transform: translateY(400%);\\n}\\n\\n.radio-container input:nth-of-type(6):checked ~ .glider-container .glider {\\n transform: translateY(500%);\\n}\\n\\n.radio-container input:nth-of-type(7):checked ~ .glider-container .glider {\\n transform: translateY(600%);\\n}\\n\\n.radio-container input:nth-of-type(8):checked ~ .glider-container .glider {\\n transform: translateY(700%);\\n}\\n\\n.radio-container input:nth-of-type(9):checked ~ .glider-container .glider {\\n transform: translateY(800%);\\n}\\n\\n.radio-container input:nth-of-type(10):checked ~ .glider-container .glider {\\n transform: translateY(900%);\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .radio-container label,\\n .radio-container .glider-container .glider {\\n transition: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b5ed30bc-bcad-4cf9-b00a-a403e87ea59e","type":"divider","props":{},"children":[]},{"id":"4bba5f64-2310-49ac-a81a-62eea3876ffc","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"84288e90-d9db-4715-9407-2b2f39c55dd0","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Style\n","styles":{"bold":true}},{"type":"text","text":"The component is a vertical radio selector with a purple glider indicator. It uses a dark page background, gray inactive labels, purple active text, and a glowing vertical line that moves based on the selected radio.","styles":{}}],"children":[]},{"id":"dbc52ae8-470d-46a4-aa16-4ee53a42ad0f","type":"procode","props":{"code":".radio-container {\n --main-color: #a855f7;\n --main-color-opacity: #a855f71c;\n --total-radio: 3;\n}","language":"javascript","filename":"","files":"[{\"id\":\"4owth4b9g\",\"name\":\"code\",\"code\":\".radio-container {\\n --main-color: #a855f7;\\n --main-color-opacity: #a855f71c;\\n --total-radio: 3;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8922eb49-0291-4389-938e-92c1ba8f3244","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Layout\n","styles":{"bold":true}},{"type":"text","text":"The selector is centered using CSS Grid. The ","styles":{}},{"type":"text","text":".page","styles":{"code":true}},{"type":"text","text":" wrapper fills the full viewport height and places the radio group in the middle.","styles":{}}],"children":[]},{"id":"02a90dc7-a821-45ac-b271-6b806062c790","type":"procode","props":{"code":".page {\n min-height: 100vh;\n display: grid;\n place-items: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"yb2bl8ej4\",\"name\":\"code\",\"code\":\".page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c951c39e-f22d-44b7-8c3c-d2870cb59aa1","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Radio Container\n","styles":{"bold":true}},{"type":"text","text":"The ","styles":{}},{"type":"text","text":".radio-container","styles":{"code":true}},{"type":"text","text":" stacks the labels vertically. It uses ","styles":{}},{"type":"text","text":"position: relative","styles":{"code":true}},{"type":"text","text":" because the glider line is positioned absolutely inside it.","styles":{}}],"children":[]},{"id":"4ab60f7b-f64b-4c48-a49d-a42f81e18fc0","type":"procode","props":{"code":".radio-container {\n display: flex;\n flex-direction: column;\n position: relative;\n padding-left: 0.5rem;\n}","language":"javascript","filename":"","files":"[{\"id\":\"9oxomxn1j\",\"name\":\"code\",\"code\":\".radio-container {\\n display: flex;\\n flex-direction: column;\\n position: relative;\\n padding-left: 0.5rem;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"162e1584-e9e9-4255-be77-94da42b7cf1d","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hidden Radio Inputs\n","styles":{"bold":true}},{"type":"text","text":"The real radio inputs are hidden visually, but they still control which option is selected.","styles":{}}],"children":[]},{"id":"1787e83f-986a-4dbb-8e46-850ea044b0c7","type":"procode","props":{"code":".radio-container input {\n position: absolute;\n opacity: 0;\n pointer-events: none;\n appearance: none;\n}","language":"javascript","filename":"","files":"[{\"id\":\"jwm62hu5e\",\"name\":\"code\",\"code\":\".radio-container input {\\n position: absolute;\\n opacity: 0;\\n pointer-events: none;\\n appearance: none;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a4a876ea-f550-448b-973a-5561b3fcfa3d","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Label Base State\n","styles":{"bold":true}},{"type":"text","text":"Each label is clickable and starts with gray text. The label color and transform are prepared for smooth transition.","styles":{}}],"children":[]},{"id":"66cfdae6-db62-4509-8a3c-8db1596cbee9","type":"procode","props":{"code":".radio-container label {\n cursor: pointer;\n padding: 1rem;\n position: relative;\n color: grey;\n font-size: 16px;\n transition:\n color 0.3s ease-in-out,\n transform 0.3s ease-in-out;\n}","language":"javascript","filename":"","files":"[{\"id\":\"csok1e4x4\",\"name\":\"code\",\"code\":\".radio-container label {\\n cursor: pointer;\\n padding: 1rem;\\n position: relative;\\n color: grey;\\n font-size: 16px;\\n transition:\\n color 0.3s ease-in-out,\\n transform 0.3s ease-in-out;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"671b3090-f18d-4c6a-957c-7492594dc642","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Label Hover State\n","styles":{"bold":true}},{"type":"text","text":"On hover, the label becomes lighter gray.","styles":{}}],"children":[]},{"id":"421534a5-2dfd-4d61-9bcf-2a34022adabd","type":"procode","props":{"code":".radio-container label:hover {\n color: #d8d8d8;\n}","language":"javascript","filename":"","files":"[{\"id\":\"ldjbmai53\",\"name\":\"code\",\"code\":\".radio-container label:hover {\\n color: #d8d8d8;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bc15f50b-28a9-4dc2-836f-15b370eec6ca","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Checked Label State\n","styles":{"bold":true}},{"type":"text","text":"When a radio input is checked, the label directly after it becomes purple.","styles":{}}],"children":[]},{"id":"d0216560-e71f-4787-a8d9-b6106c09d456","type":"procode","props":{"code":".radio-container input:checked + label {\n color: var(--main-color);\n}","language":"javascript","filename":"","files":"[{\"id\":\"ujm8zrgfk\",\"name\":\"code\",\"code\":\".radio-container input:checked + label {\\n color: var(--main-color);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bdf1f347-fb5c-44bd-a2fe-c2ba3a96d8a7","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Glider Container\n","styles":{"bold":true}},{"type":"text","text":"The ","styles":{}},{"type":"text","text":".glider-container","styles":{"code":true}},{"type":"text","text":" is the thin vertical line on the left side. It uses a vertical gradient so the line fades at the top and bottom.","styles":{}}],"children":[]},{"id":"3c9ebb92-789e-488f-bca7-71b12b67aadf","type":"procode","props":{"code":".radio-container .glider-container {\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 1px;\n background: linear-gradient(\n 0deg,\n rgba(0, 0, 0, 0) 0%,\n rgba(27, 27, 27, 1) 50%,\n rgba(0, 0, 0, 0) 100%\n );\n}","language":"javascript","filename":"","files":"[{\"id\":\"notvpcqy9\",\"name\":\"code\",\"code\":\".radio-container .glider-container {\\n position: absolute;\\n left: 0;\\n top: 0;\\n bottom: 0;\\n width: 1px;\\n background: linear-gradient(\\n 0deg,\\n rgba(0, 0, 0, 0) 0%,\\n rgba(27, 27, 27, 1) 50%,\\n rgba(0, 0, 0, 0) 100%\\n );\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7eaa0ded-58a0-4c83-876a-48dc6db06a97","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Glider Indicator\n","styles":{"bold":true}},{"type":"text","text":"The ","styles":{}},{"type":"text","text":".glider","styles":{"code":true}},{"type":"text","text":" is the active purple section of the line. Its height is calculated from the total number of radio options.","styles":{}}],"children":[]},{"id":"31694b1d-ac70-4e44-98a9-a7c57d64de42","type":"procode","props":{"code":".radio-container .glider-container .glider {\n position: relative;\n width: 100%;\n height: calc(100% / var(--total-radio));\n background: linear-gradient(\n 0deg,\n rgba(0, 0, 0, 0) 0%,\n var(--main-color) 50%,\n rgba(0, 0, 0, 0) 100%\n );\n transition: transform 0.5s cubic-bezier(0.37, 1.95, 0.66, 0.56);\n}","language":"javascript","filename":"","files":"[{\"id\":\"fi0cy4jsm\",\"name\":\"code\",\"code\":\".radio-container .glider-container .glider {\\n position: relative;\\n width: 100%;\\n height: calc(100% / var(--total-radio));\\n background: linear-gradient(\\n 0deg,\\n rgba(0, 0, 0, 0) 0%,\\n var(--main-color) 50%,\\n rgba(0, 0, 0, 0) 100%\\n );\\n transition: transform 0.5s cubic-bezier(0.37, 1.95, 0.66, 0.56);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1eafbc01-7ffe-4773-91af-654662bb3728","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Glider Glow\n","styles":{"bold":true}},{"type":"text","text":"The ","styles":{}},{"type":"text","text":"::before","styles":{"code":true}},{"type":"text","text":" pseudo-element creates a blurred purple glow around the active line.","styles":{}}],"children":[]},{"id":"ab3c12ec-fbc4-4361-89fb-cc36b4c67b01","type":"procode","props":{"code":".radio-container .glider-container .glider::before {\n content: \"\";\n position: absolute;\n height: 60%;\n width: 300%;\n top: 50%;\n transform: translateY(-50%);\n background: var(--main-color);\n filter: blur(10px);\n}","language":"javascript","filename":"","files":"[{\"id\":\"m9zkbrg35\",\"name\":\"code\",\"code\":\".radio-container .glider-container .glider::before {\\n content: \\\"\\\";\\n position: absolute;\\n height: 60%;\\n width: 300%;\\n top: 50%;\\n transform: translateY(-50%);\\n background: var(--main-color);\\n filter: blur(10px);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ee248f8e-2163-4fbd-9ded-2b1bf8b55193","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Glider Background Fade\n","styles":{"bold":true}},{"type":"text","text":"The ","styles":{}},{"type":"text","text":"::after","styles":{"code":true}},{"type":"text","text":" pseudo-element creates a soft purple horizontal fade behind the selected label area.","styles":{}}],"children":[]},{"id":"1f8a189d-57eb-4468-a53a-a56c210f0cfd","type":"procode","props":{"code":".radio-container .glider-container .glider::after {\n content: \"\";\n position: absolute;\n left: 0;\n height: 100%;\n width: 150px;\n background: linear-gradient(\n 90deg,\n var(--main-color-opacity) 0%,\n rgba(0, 0, 0, 0) 100%\n );\n}","language":"javascript","filename":"","files":"[{\"id\":\"2wjy24zau\",\"name\":\"code\",\"code\":\".radio-container .glider-container .glider::after {\\n content: \\\"\\\";\\n position: absolute;\\n left: 0;\\n height: 100%;\\n width: 150px;\\n background: linear-gradient(\\n 90deg,\\n var(--main-color-opacity) 0%,\\n rgba(0, 0, 0, 0) 100%\\n );\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"eebdb418-5af8-4e01-9d7d-1d5442799afd","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"First Option Position\n","styles":{"bold":true}},{"type":"text","text":"When the first radio is checked, the glider stays at the top.","styles":{}}],"children":[]},{"id":"403daf3d-5573-4bd1-8d59-cd3e9e93d99a","type":"procode","props":{"code":".radio-container input:nth-of-type(1):checked ~ .glider-container .glider {\n transform: translateY(0);\n}","language":"javascript","filename":"","files":"[{\"id\":\"u9q0w2hwv\",\"name\":\"code\",\"code\":\".radio-container input:nth-of-type(1):checked ~ .glider-container .glider {\\n transform: translateY(0);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"666878ca-fb92-4fa8-a3d4-fd4b52fe9c82","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Second Option Position\n","styles":{"bold":true}},{"type":"text","text":"When the second radio is checked, the glider moves down by ","styles":{}},{"type":"text","text":"100%","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"fc710783-ef2f-45a5-a29c-4b022e9c3107","type":"procode","props":{"code":".radio-container input:nth-of-type(2):checked ~ .glider-container .glider {\n transform: translateY(100%);\n}","language":"javascript","filename":"","files":"[{\"id\":\"flsvrd2nl\",\"name\":\"code\",\"code\":\".radio-container input:nth-of-type(2):checked ~ .glider-container .glider {\\n transform: translateY(100%);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"05a95a89-726f-4f45-9ecc-84f664e1d0d1","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Third Option Position\n","styles":{"bold":true}},{"type":"text","text":"When the third radio is checked, the glider moves down by ","styles":{}},{"type":"text","text":"200%","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"d6473054-5b72-44cf-8094-8713bd8b95e4","type":"procode","props":{"code":".radio-container input:nth-of-type(3):checked ~ .glider-container .glider {\n transform: translateY(200%);\n}","language":"javascript","filename":"","files":"[{\"id\":\"4iiszgkd5\",\"name\":\"code\",\"code\":\".radio-container input:nth-of-type(3):checked ~ .glider-container .glider {\\n transform: translateY(200%);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1d7e9733-d6c3-4026-97d1-835a2799b838","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Extra Radio Support\n","styles":{"bold":true}},{"type":"text","text":"The CSS already includes rules up to ten radio inputs, even though this exact HTML only uses three options.","styles":{}}],"children":[]},{"id":"c2ddaf2b-c6d4-4302-bf9b-633d19950e90","type":"procode","props":{"code":".radio-container input:nth-of-type(10):checked ~ .glider-container .glider {\n transform: translateY(900%);\n}","language":"javascript","filename":"","files":"[{\"id\":\"vsljgr8z6\",\"name\":\"code\",\"code\":\".radio-container input:nth-of-type(10):checked ~ .glider-container .glider {\\n transform: translateY(900%);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4aa6c313-bd9d-4847-ad13-faab96fb76d5","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Important Code\n","styles":{"bold":true}},{"type":"text","text":"This is the main interaction flow. The checked radio changes the label color and moves the glider to the matching vertical position.","styles":{}}],"children":[]},{"id":"957a6e32-4be2-4c9d-a036-c12ac0d9bb40","type":"procode","props":{"code":".radio-container input:checked + label {\n color: var(--main-color);\n}\n\n.radio-container input:nth-of-type(1):checked ~ .glider-container .glider {\n transform: translateY(0);\n}\n\n.radio-container input:nth-of-type(2):checked ~ .glider-container .glider {\n transform: translateY(100%);\n}\n\n.radio-container input:nth-of-type(3):checked ~ .glider-container .glider {\n transform: translateY(200%);\n}","language":"javascript","filename":"","files":"[{\"id\":\"y0qq1dc4e\",\"name\":\"code\",\"code\":\".radio-container input:checked + label {\\n color: var(--main-color);\\n}\\n\\n.radio-container input:nth-of-type(1):checked ~ .glider-container .glider {\\n transform: translateY(0);\\n}\\n\\n.radio-container input:nth-of-type(2):checked ~ .glider-container .glider {\\n transform: translateY(100%);\\n}\\n\\n.radio-container input:nth-of-type(3):checked ~ .glider-container .glider {\\n transform: translateY(200%);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"247d69b5-c23f-4358-9cc4-f384bb37cc71","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why ","styles":{"bold":true}},{"type":"text","text":"+ label","styles":{"code":true}},{"type":"text","text":" Works\n","styles":{"bold":true}},{"type":"text","text":"Each label comes directly after its matching radio input. Because of that, CSS can use ","styles":{}},{"type":"text","text":"input:checked + label","styles":{"code":true}},{"type":"text","text":" to style the active label.","styles":{}}],"children":[]},{"id":"53e1efe5-4778-426a-bed1-fc147d6b1362","type":"procode","props":{"code":"\nFree","language":"javascript","filename":"","files":"[{\"id\":\"th8t5dyzq\",\"name\":\"code\",\"code\":\"\\nFree\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d1a1df8a-733d-409e-a8ff-6b358e2c9a19","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why ","styles":{"bold":true}},{"type":"text","text":"~ .glider-container","styles":{"code":true}},{"type":"text","text":" Works\n","styles":{"bold":true}},{"type":"text","text":"The ","styles":{}},{"type":"text","text":".glider-container","styles":{"code":true}},{"type":"text","text":" comes after all radio inputs in the HTML. The general sibling selector ","styles":{}},{"type":"text","text":"~","styles":{"code":true}},{"type":"text","text":" lets each checked radio move the same glider.","styles":{}}],"children":[]},{"id":"04dcf22c-4c90-4cc0-8d63-9fe55bb3b480","type":"procode","props":{"code":"\nPremium\n\n

","language":"javascript","filename":"","files":"[{\"id\":\"k0ig4mgap\",\"name\":\"code\",\"code\":\"\\nPremium\\n\\n

\\n

\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"cc4ff725-5c83-4a8a-8013-16f19209041a","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Default Checked State\n","styles":{"bold":true}},{"type":"text","text":"The first option starts selected because the first radio input has the ","styles":{}},{"type":"text","text":"checked","styles":{"code":true}},{"type":"text","text":" attribute.","styles":{}}],"children":[]},{"id":"5ebf6f65-99d7-4387-98de-fde184b11b93","type":"procode","props":{"code":"\nFree","language":"javascript","filename":"","files":"[{\"id\":\"hufqnmiyc\",\"name\":\"code\",\"code\":\"\\nFree\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"61ca2604-a5bf-4227-b589-2b62386f7e49","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Animation\n","styles":{"bold":true}},{"type":"text","text":"The labels use a simple ","styles":{}},{"type":"text","text":"0.3s","styles":{"code":true}},{"type":"text","text":" transition. The glider uses a custom cubic-bezier curve, giving it a slightly elastic movement.","styles":{}}],"children":[]},{"id":"becf6085-29ed-4606-9416-8b474ee1e776","type":"procode","props":{"code":".radio-container label {\n transition:\n color 0.3s ease-in-out,\n transform 0.3s ease-in-out;\n}\n\n.radio-container .glider-container .glider {\n transition: transform 0.5s cubic-bezier(0.37, 1.95, 0.66, 0.56);\n}","language":"javascript","filename":"","files":"[{\"id\":\"zn7or2ths\",\"name\":\"code\",\"code\":\".radio-container label {\\n transition:\\n color 0.3s ease-in-out,\\n transform 0.3s ease-in-out;\\n}\\n\\n.radio-container .glider-container .glider {\\n transition: transform 0.5s cubic-bezier(0.37, 1.95, 0.66, 0.56);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e47f64ff-0f17-4c76-a63e-81cf487eb32c","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Reduced Motion\n","styles":{"bold":true}},{"type":"text","text":"If the user prefers reduced motion, label and glider transitions are disabled.","styles":{}}],"children":[]},{"id":"97592797-6ec5-4ff1-8788-eaf090b77aaf","type":"procode","props":{"code":"@media (prefers-reduced-motion: reduce) {\n .radio-container label,\n .radio-container .glider-container .glider {\n transition: none;\n }\n}","language":"javascript","filename":"","files":"[{\"id\":\"r7w2ljw9k\",\"name\":\"code\",\"code\":\"@media (prefers-reduced-motion: reduce) {\\n .radio-container label,\\n .radio-container .glider-container .glider {\\n transition: none;\\n }\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f796246b-0b42-4bd3-b4e3-e19ab474e952","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Duration\n","styles":{"bold":true}},{"type":"text","text":"Change the label transition speed here:","styles":{}}],"children":[]},{"id":"fbe70dfb-c1d5-4c6b-906a-24502528c91b","type":"procode","props":{"code":".radio-container label {\n transition:\n color 0.3s ease-in-out,\n transform 0.3s ease-in-out;\n}","language":"javascript","filename":"","files":"[{\"id\":\"ci1domia2\",\"name\":\"code\",\"code\":\".radio-container label {\\n transition:\\n color 0.3s ease-in-out,\\n transform 0.3s ease-in-out;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"36c84e13-d04f-4d2c-8af8-23b5532d8bf2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the glider movement speed here:","styles":{}}],"children":[]},{"id":"469f185d-ff7c-4e4c-be14-be70343c1b08","type":"procode","props":{"code":".radio-container .glider-container .glider {\n transition: transform 0.5s cubic-bezier(0.37, 1.95, 0.66, 0.56);\n}","language":"javascript","filename":"","files":"[{\"id\":\"fmtn63xj7\",\"name\":\"code\",\"code\":\".radio-container .glider-container .glider {\\n transition: transform 0.5s cubic-bezier(0.37, 1.95, 0.66, 0.56);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3283c46b-043e-4042-a177-60aeb958a5ed","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Color\n","styles":{"bold":true}},{"type":"text","text":"Change the active purple color here:","styles":{}}],"children":[]},{"id":"ee69af1c-3922-4334-ae66-2be3d47843f8","type":"procode","props":{"code":".radio-container {\n --main-color: #a855f7;\n}","language":"javascript","filename":"","files":"[{\"id\":\"4o2gocvdf\",\"name\":\"code\",\"code\":\".radio-container {\\n --main-color: #a855f7;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9d44d1c8-58b0-42b2-93f1-98fb0b94e4ea","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the soft purple background fade here:","styles":{}}],"children":[]},{"id":"aa038f5c-edf3-4f96-b8b0-981a78241939","type":"procode","props":{"code":".radio-container {\n --main-color-opacity: #a855f71c;\n}","language":"javascript","filename":"","files":"[{\"id\":\"dse0u2sw3\",\"name\":\"code\",\"code\":\".radio-container {\\n --main-color-opacity: #a855f71c;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fff8f44b-f2a3-46ba-9938-12560ad057ae","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the page background here:","styles":{}}],"children":[]},{"id":"627aaa7c-0961-4d76-bf90-22a930f7688d","type":"procode","props":{"code":"body {\n background: #0f0f0f;\n}","language":"javascript","filename":"","files":"[{\"id\":\"500u0gsj5\",\"name\":\"code\",\"code\":\"body {\\n background: #0f0f0f;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7174cc6e-d4f2-45bf-9aa9-4847a2a8f931","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Size / Shape\n","styles":{"bold":true}},{"type":"text","text":"Change the label spacing here:","styles":{}}],"children":[]},{"id":"1c2e0ec6-fb33-4755-a2e4-a59f2957bb9d","type":"procode","props":{"code":".radio-container label {\n padding: 1rem;\n}","language":"javascript","filename":"","files":"[{\"id\":\"onnqb0gcf\",\"name\":\"code\",\"code\":\".radio-container label {\\n padding: 1rem;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"68285ab6-ee8d-4426-b0b5-4c5659231137","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the label text size here:","styles":{}}],"children":[]},{"id":"6f2756d3-9b89-4a02-a175-6001913f4481","type":"procode","props":{"code":".radio-container label {\n font-size: 16px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"lj9f8fbkc\",\"name\":\"code\",\"code\":\".radio-container label {\\n font-size: 16px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"998bc246-7855-421a-9f2c-e9e90fdcc627","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the glider line width here:","styles":{}}],"children":[]},{"id":"6b1ff5ae-4d62-4d00-8f18-5ae1d51cf6e0","type":"procode","props":{"code":".radio-container .glider-container {\n width: 1px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"jahco99q8\",\"name\":\"code\",\"code\":\".radio-container .glider-container {\\n width: 1px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"33e802a5-d5da-4e80-967b-68bdb09c5396","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the glow width here:","styles":{}}],"children":[]},{"id":"85a22f24-e7ed-442c-bed8-0302bbbed703","type":"procode","props":{"code":".radio-container .glider-container .glider::after {\n width: 150px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"1oby3kces\",\"name\":\"code\",\"code\":\".radio-container .glider-container .glider::after {\\n width: 150px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5f77e994-e152-4395-9524-4a095820ff50","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Option Count\n","styles":{"bold":true}},{"type":"text","text":"If more options are added, update ","styles":{}},{"type":"text","text":"--total-radio","styles":{"code":true}},{"type":"text","text":" to match the number of radio items.","styles":{}}],"children":[]},{"id":"a4046189-3df1-400b-b2de-acb67f6f63db","type":"procode","props":{"code":".radio-container {\n --total-radio: 3;\n}","language":"javascript","filename":"","files":"[{\"id\":\"pz3cgpb3z\",\"name\":\"code\",\"code\":\".radio-container {\\n --total-radio: 3;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"aa512ab9-dafa-4ac8-a068-4e5f84628372","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text / Content\n","styles":{"bold":true}},{"type":"text","text":"Change the option labels inside ","styles":{}},{"type":"text","text":"/index.html","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"1acda812-0146-4947-8ef3-a3f48dd19eef","type":"procode","props":{"code":"Free\nBasic\nPremium","language":"javascript","filename":"","files":"[{\"id\":\"8xfe68qo4\",\"name\":\"code\",\"code\":\"Free\\nBasic\\nPremium\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b0d1d374-e94c-40d6-96bf-3a3dea5c8712","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]