Liquid Switch

[{"id":"0834bd70-caca-445d-9ad2-800ef5923aba","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"f25fe62e-4f8f-48c2-ada7-801de75a0314","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: #fff;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.demo-wrap {\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.liquid-3 {\\n --primary: #000;\\n --secondary: #fff;\\n --time: 1s;\\n\\n appearance: none;\\n -webkit-appearance: none;\\n\\n position: relative;\\n display: block;\\n cursor: pointer;\\n\\n width: 10em;\\n aspect-ratio: 2 / 1;\\n\\n background: var(--primary);\\n border-radius: 20em;\\n box-shadow: 0 0 0 1em var(--secondary);\\n\\n filter: blur(0.66em) contrast(20);\\n mix-blend-mode: darken;\\n overflow: hidden;\\n\\n transform: translateZ(0);\\n isolation: isolate;\\n}\\n\\n.liquid-3::before {\\n content: \\\"\\\";\\n position: absolute;\\n\\n left: 50%;\\n top: 50%;\\n\\n width: 200%;\\n height: 100%;\\n\\n background:\\n radial-gradient(\\n closest-side circle at 12.5% 50%,\\n var(--secondary) 50%,\\n transparent 0\\n ),\\n radial-gradient(\\n closest-side circle at 87.5% 50%,\\n var(--secondary) 50%,\\n transparent 0\\n );\\n\\n transform: translate3d(-25%, -50%, 0) scaleX(1);\\n will-change: transform;\\n}\\n\\n.liquid-3:checked::before {\\n animation: liquid-smooth-on var(--time) cubic-bezier(0.16, 1, 0.3, 1) both;\\n}\\n\\n.liquid-3:not(:checked)::before {\\n animation: liquid-smooth-off var(--time) cubic-bezier(0.16, 1, 0.3, 1) both;\\n}\\n\\n@keyframes liquid-smooth-on {\\n 0% {\\n transform: translate3d(-25%, -50%, 0) scaleX(1);\\n }\\n\\n 55% {\\n transform: translate3d(-79%, -50%, 0) scaleX(1.08);\\n }\\n\\n 72% {\\n transform: translate3d(-73%, -50%, 0) scaleX(0.96);\\n }\\n\\n 88% {\\n transform: translate3d(-76%, -50%, 0) scaleX(1.02);\\n }\\n\\n 100% {\\n transform: translate3d(-75%, -50%, 0) scaleX(1);\\n }\\n}\\n\\n@keyframes liquid-smooth-off {\\n 0% {\\n transform: translate3d(-75%, -50%, 0) scaleX(1);\\n }\\n\\n 55% {\\n transform: translate3d(-21%, -50%, 0) scaleX(1.08);\\n }\\n\\n 72% {\\n transform: translate3d(-27%, -50%, 0) scaleX(0.96);\\n }\\n\\n 88% {\\n transform: translate3d(-24%, -50%, 0) scaleX(1.02);\\n }\\n\\n 100% {\\n transform: translate3d(-25%, -50%, 0) scaleX(1);\\n }\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .liquid-3::before {\\n animation: none;\\n }\\n\\n .liquid-3:checked::before {\\n transform: translate3d(-75%, -50%, 0);\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Liquid Switch\\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":"/styles.css","viewMode":"both","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]"},"children":[]},{"id":"442b278e-baf5-4d75-8c89-818e03e438d7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"1aa67d7d-b257-43ae-81b9-a3480cdfc0d5","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"2a158804-dcc5-4070-b0b1-87b9dd875183","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f38d643e-8d09-4841-947b-72f70f215d26","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"cfa847ff-99b8-46ac-9ec2-8c0ae1242fd1","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: #fff;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.demo-wrap {\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.liquid-3 {\\n --primary: #000;\\n --secondary: #fff;\\n --time: 1s;\\n\\n appearance: none;\\n -webkit-appearance: none;\\n\\n position: relative;\\n display: block;\\n cursor: pointer;\\n\\n width: 10em;\\n aspect-ratio: 2 / 1;\\n\\n background: var(--primary);\\n border-radius: 20em;\\n box-shadow: 0 0 0 1em var(--secondary);\\n\\n filter: blur(0.66em) contrast(20);\\n mix-blend-mode: darken;\\n overflow: hidden;\\n\\n transform: translateZ(0);\\n isolation: isolate;\\n}\\n\\n.liquid-3::before {\\n content: \\\"\\\";\\n position: absolute;\\n\\n left: 50%;\\n top: 50%;\\n\\n width: 200%;\\n height: 100%;\\n\\n background:\\n radial-gradient(\\n closest-side circle at 12.5% 50%,\\n var(--secondary) 50%,\\n transparent 0\\n ),\\n radial-gradient(\\n closest-side circle at 87.5% 50%,\\n var(--secondary) 50%,\\n transparent 0\\n );\\n\\n transform: translate3d(-25%, -50%, 0) scaleX(1);\\n will-change: transform;\\n}\\n\\n.liquid-3:checked::before {\\n animation: liquid-smooth-on var(--time) cubic-bezier(0.16, 1, 0.3, 1) both;\\n}\\n\\n.liquid-3:not(:checked)::before {\\n animation: liquid-smooth-off var(--time) cubic-bezier(0.16, 1, 0.3, 1) both;\\n}\\n\\n@keyframes liquid-smooth-on {\\n 0% {\\n transform: translate3d(-25%, -50%, 0) scaleX(1);\\n }\\n\\n 55% {\\n transform: translate3d(-79%, -50%, 0) scaleX(1.08);\\n }\\n\\n 72% {\\n transform: translate3d(-73%, -50%, 0) scaleX(0.96);\\n }\\n\\n 88% {\\n transform: translate3d(-76%, -50%, 0) scaleX(1.02);\\n }\\n\\n 100% {\\n transform: translate3d(-75%, -50%, 0) scaleX(1);\\n }\\n}\\n\\n@keyframes liquid-smooth-off {\\n 0% {\\n transform: translate3d(-75%, -50%, 0) scaleX(1);\\n }\\n\\n 55% {\\n transform: translate3d(-21%, -50%, 0) scaleX(1.08);\\n }\\n\\n 72% {\\n transform: translate3d(-27%, -50%, 0) scaleX(0.96);\\n }\\n\\n 88% {\\n transform: translate3d(-24%, -50%, 0) scaleX(1.02);\\n }\\n\\n 100% {\\n transform: translate3d(-25%, -50%, 0) scaleX(1);\\n }\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .liquid-3::before {\\n animation: none;\\n }\\n\\n .liquid-3:checked::before {\\n transform: translate3d(-75%, -50%, 0);\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bfd2f55e-d911-4663-a949-17f8333cfa8c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"b58405bb-11b7-43b9-aeb1-ec13f82c6713","type":"divider","props":{},"children":[]},{"id":"d61b9402-ba44-4e2c-94c5-57edc13db945","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"cfa36457-5966-45ad-a5fa-d19144117fd9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The switch is created with a native checkbox.","styles":{}}],"children":[]},{"id":"a8c5ac60-6c7b-49c5-b3e7-94835d963aa3","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"r5ihy4waz\",\"name\":\"code\",\"code\":\"\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b38d2511-4387-412e-96ab-9931552f5d16","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The ","styles":{}},{"type":"text","text":"role=\"switch\"","styles":{"code":true}},{"type":"text","text":" makes the checkbox behave semantically like a toggle switch.","styles":{}}],"children":[]},{"id":"a0a40aa6-6f54-48e4-9f89-57f715882fe2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Layout / Center\n\nThe page uses flexbox to center the switch.","styles":{}}],"children":[]},{"id":"c0d0e2fa-fa52-42cd-b7f7-88d1ddfda7b5","type":"procode","props":{"code":"body {\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"929lrbs4l\",\"name\":\"code\",\"code\":\"body {\\n min-height: 100vh;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8f9ab17f-649e-4128-8e5f-abc3c1634f88","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Switch Reset\n\nThe default browser checkbox style is removed.","styles":{}}],"children":[]},{"id":"1ca00c7c-3021-4401-980d-7c1c77e10ffc","type":"procode","props":{"code":"appearance: none;\n-webkit-appearance: none;","language":"javascript","filename":"","files":"[{\"id\":\"logtjnb4j\",\"name\":\"code\",\"code\":\"appearance: none;\\n-webkit-appearance: none;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b39eacd9-6f27-4bfc-ae55-a72e5bdc9b18","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Switch Shape\n\nThe switch size is controlled by ","styles":{}},{"type":"text","text":"width","styles":{"code":true}},{"type":"text","text":" and ","styles":{}},{"type":"text","text":"aspect-ratio","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"b9c6885e-edcb-46bd-b8e7-e703c93d402b","type":"procode","props":{"code":"width: 10em;\naspect-ratio: 2 / 1;\nborder-radius: 20em;","language":"javascript","filename":"","files":"[{\"id\":\"hjyn2xkym\",\"name\":\"code\",\"code\":\"width: 10em;\\naspect-ratio: 2 / 1;\\nborder-radius: 20em;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"139950b5-e8ac-41ef-9619-5178bbe27c70","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This creates a wide pill shape.","styles":{}}],"children":[]},{"id":"594b5203-b241-4020-8fa8-459e490e9b92","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Liquid Effect\n\nThe main liquid look comes from blur and contrast.","styles":{}}],"children":[]},{"id":"2d09f9af-6a34-44ff-911c-f8fb89a69a68","type":"procode","props":{"code":"filter: blur(0.66em) contrast(20);\nmix-blend-mode: darken;","language":"javascript","filename":"","files":"[{\"id\":\"zybu6t7k4\",\"name\":\"code\",\"code\":\"filter: blur(0.66em) contrast(20);\\nmix-blend-mode: darken;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1b878d7c-022c-49f5-af2e-21600dc1a80c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The blur softens the circles.\n\nThe contrast makes the blurred circles merge like liquid.","styles":{}}],"children":[]},{"id":"aba5e3a2-d2ff-452c-b982-c213feacf028","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Liquid Layer\n\nThe ","styles":{}},{"type":"text","text":"::before","styles":{"code":true}},{"type":"text","text":" pseudo-element creates the moving liquid circles.","styles":{}}],"children":[]},{"id":"f09dcfcb-ea92-4dba-b010-e3020d209918","type":"procode","props":{"code":".liquid-3::before {\n width: 200%;\n height: 100%;\n background:\n radial-gradient(...),\n radial-gradient(...);\n}","language":"javascript","filename":"","files":"[{\"id\":\"oh8hybznv\",\"name\":\"code\",\"code\":\".liquid-3::before {\\n width: 200%;\\n height: 100%;\\n background:\\n radial-gradient(...),\\n radial-gradient(...);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9d491fa3-15cf-42b7-95e8-65dcd700d593","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"There are two radial gradients. One circle sits on the left, and one circle sits on the right.","styles":{}}],"children":[]},{"id":"8351f094-7521-4e4a-a705-d2eee86e42dd","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Default Position\n\nThe default liquid position is on the left.","styles":{}}],"children":[]},{"id":"f2545438-b83d-4be1-9f21-bd456ba1eadc","type":"procode","props":{"code":"transform: translate3d(-25%, -50%, 0) scaleX(1);","language":"javascript","filename":"","files":"[{\"id\":\"297egcfls\",\"name\":\"code\",\"code\":\"transform: translate3d(-25%, -50%, 0) scaleX(1);\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"276aa2be-d479-4079-af56-82478180170a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Checked Position\n\nWhen the checkbox is checked, the liquid moves to the right using animation.","styles":{}}],"children":[]},{"id":"de8a6967-0347-4efb-a3fd-deba132c64ee","type":"procode","props":{"code":".liquid-3:checked::before {\n animation: liquid-smooth-on var(--time) cubic-bezier(0.16, 1, 0.3, 1) both;\n}","language":"javascript","filename":"","files":"[{\"id\":\"4gszsn6mo\",\"name\":\"code\",\"code\":\".liquid-3:checked::before {\\n animation: liquid-smooth-on var(--time) cubic-bezier(0.16, 1, 0.3, 1) both;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d9209667-0803-4ca4-8623-149e01677ff7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Off Position\n\nWhen unchecked, the liquid moves back to the left.","styles":{}}],"children":[]},{"id":"ca8eaeb8-f9d9-4f11-84ed-6dec016d22e7","type":"procode","props":{"code":".liquid-3:not(:checked)::before {\n animation: liquid-smooth-off var(--time) cubic-bezier(0.16, 1, 0.3, 1) both;\n}","language":"javascript","filename":"","files":"[{\"id\":\"3cans2f3j\",\"name\":\"code\",\"code\":\".liquid-3:not(:checked)::before {\\n animation: liquid-smooth-off var(--time) cubic-bezier(0.16, 1, 0.3, 1) both;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0b82fcde-b975-4e6a-b66e-5b3854ab64ec","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Smooth Vibrate Motion\n\nThe liquid movement uses multiple keyframe steps. It overshoots, compresses, then settles.","styles":{}}],"children":[]},{"id":"379e4368-1bf0-4f4d-bb60-b19bc7f6c8d2","type":"procode","props":{"code":"55% {\n transform: translate3d(-79%, -50%, 0) scaleX(1.08);\n}\n\n72% {\n transform: translate3d(-73%, -50%, 0) scaleX(0.96);\n}\n\n88% {\n transform: translate3d(-76%, -50%, 0) scaleX(1.02);\n}","language":"javascript","filename":"","files":"[{\"id\":\"jiuemzx1h\",\"name\":\"code\",\"code\":\"55% {\\n transform: translate3d(-79%, -50%, 0) scaleX(1.08);\\n}\\n\\n72% {\\n transform: translate3d(-73%, -50%, 0) scaleX(0.96);\\n}\\n\\n88% {\\n transform: translate3d(-76%, -50%, 0) scaleX(1.02);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"04a9456a-945b-49ce-a5d3-d43c207cf9a1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This creates the slow, soft liquid vibration effect.","styles":{}}],"children":[]},{"id":"07fa3778-9729-4293-817e-7a1a6ddc70e0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Stable Placement\n\nThe main switch does not move during toggle.","styles":{}}],"children":[]},{"id":"f971ddf7-8536-4826-a8a6-7366f04f2ddc","type":"procode","props":{"code":"transform: translateZ(0);","language":"javascript","filename":"","files":"[{\"id\":\"ouev9evju\",\"name\":\"code\",\"code\":\"transform: translateZ(0);\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d7b1391c-11d3-4fed-ae36-3f66a4c4f0fd","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Only the ","styles":{}},{"type":"text","text":"::before","styles":{"code":true}},{"type":"text","text":" liquid layer moves, so the switch stays stable when clicked many times.","styles":{}}],"children":[]},{"id":"e0e84fab-64a2-458a-bc92-8ba3ca6dc0d1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]