Morph Cube Checkbox

[{"id":"2e02cf7c-ec1c-4d97-9dae-892e9d568940","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"c247c4f0-f2a8-4322-8e7a-dd1629c7fcc0","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"* {\\n box-sizing: border-box;\\n}\\n\\nbody {\\n min-height: 100vh;\\n margin: 0;\\n display: grid;\\n place-items: center;\\n background: #ffffff;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.morph-cube {\\n --cube-size: 2.5em;\\n --cube-color: #6366f1;\\n --cube-color-hover: #4f46e5;\\n --cube-shadow: rgba(99, 102, 241, 0.3);\\n --check-color: #ffffff;\\n --cube-ease: cubic-bezier(0.16, 1, 0.3, 1);\\n\\n position: relative;\\n display: inline-block;\\n cursor: pointer;\\n user-select: none;\\n}\\n\\n.morph-cube__input {\\n position: absolute;\\n opacity: 0;\\n width: 0;\\n height: 0;\\n}\\n\\n.morph-cube__body {\\n position: relative;\\n width: var(--cube-size);\\n height: var(--cube-size);\\n perspective: 25em;\\n}\\n\\n.morph-cube__box {\\n position: absolute;\\n width: 100%;\\n height: 100%;\\n transform-style: preserve-3d;\\n transition: transform 0.6s var(--cube-ease);\\n}\\n\\n.morph-cube__face {\\n position: absolute;\\n width: 100%;\\n height: 100%;\\n background-color: var(--cube-color);\\n backface-visibility: hidden;\\n border-radius: 0.3em;\\n box-shadow: 0 0.2em 0.6em var(--cube-shadow);\\n transform-style: preserve-3d;\\n}\\n\\n.morph-cube__face--front {\\n transform: translateZ(calc(var(--cube-size) / 2));\\n}\\n\\n.morph-cube__face--back {\\n transform: rotateY(180deg) translateZ(calc(var(--cube-size) / 2));\\n}\\n\\n.morph-cube__face--top {\\n transform: rotateX(90deg) translateZ(calc(var(--cube-size) / 2));\\n}\\n\\n.morph-cube__face--bottom {\\n transform: rotateX(-90deg) translateZ(calc(var(--cube-size) / 2));\\n}\\n\\n.morph-cube__face--left {\\n transform: rotateY(-90deg) translateZ(calc(var(--cube-size) / 2));\\n}\\n\\n.morph-cube__face--right {\\n transform: rotateY(90deg) translateZ(calc(var(--cube-size) / 2));\\n}\\n\\n.morph-cube:hover .morph-cube__face {\\n background-color: var(--cube-color-hover);\\n}\\n\\n.morph-cube__input:checked + .morph-cube__body .morph-cube__box {\\n transform: rotateY(180deg) rotateZ(180deg);\\n}\\n\\n.morph-cube__check {\\n position: absolute;\\n top: 50%;\\n left: 50%;\\n width: 60%;\\n height: 60%;\\n fill: none;\\n stroke: var(--check-color);\\n stroke-width: 3;\\n stroke-linecap: round;\\n stroke-linejoin: round;\\n stroke-dasharray: 24;\\n stroke-dashoffset: 24;\\n z-index: 2;\\n pointer-events: none;\\n transform: translate(-50%, -50%) scale(0);\\n}\\n\\n.morph-cube__input:checked + .morph-cube__body .morph-cube__check {\\n animation: morph-cube-check 0.5s var(--cube-ease) forwards 0.3s;\\n}\\n\\n.morph-cube__ripple {\\n position: absolute;\\n top: 50%;\\n left: 50%;\\n width: 0;\\n height: 0;\\n transform: translate(-50%, -50%);\\n border-radius: 50%;\\n background-color: rgba(255, 255, 255, 0.5);\\n opacity: 0;\\n z-index: 1;\\n pointer-events: none;\\n}\\n\\n.morph-cube__input:checked + .morph-cube__body .morph-cube__ripple {\\n animation: morph-cube-ripple 0.6s var(--cube-ease);\\n}\\n\\n.morph-cube__input:focus + .morph-cube__body::after {\\n content: \\\"\\\";\\n position: absolute;\\n top: -0.3em;\\n left: -0.3em;\\n right: -0.3em;\\n bottom: -0.3em;\\n border-radius: 0.6em;\\n border: 0.15em solid rgba(99, 102, 241, 0.4);\\n pointer-events: none;\\n opacity: 0;\\n animation: morph-cube-focus 0.3s var(--cube-ease) forwards;\\n}\\n\\n.morph-cube:active .morph-cube__box {\\n transform: scale(0.9);\\n}\\n\\n.morph-cube__input:checked:active + .morph-cube__body .morph-cube__box {\\n transform: scale(0.9) rotateY(180deg) rotateZ(180deg);\\n}\\n\\n@keyframes morph-cube-check {\\n 0% {\\n transform: translate(-50%, -50%) scale(0);\\n stroke-dashoffset: 24;\\n }\\n\\n 50% {\\n transform: translate(-50%, -50%) scale(1.2);\\n }\\n\\n 100% {\\n transform: translate(-50%, -50%) scale(1);\\n stroke-dashoffset: 0;\\n }\\n}\\n\\n@keyframes morph-cube-ripple {\\n 0% {\\n width: 0;\\n height: 0;\\n opacity: 0.5;\\n }\\n\\n 100% {\\n width: 200%;\\n height: 200%;\\n opacity: 0;\\n }\\n}\\n\\n@keyframes morph-cube-focus {\\n from {\\n opacity: 0;\\n }\\n\\n to {\\n opacity: 1;\\n }\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .morph-cube__box,\\n .morph-cube__face,\\n .morph-cube__check,\\n .morph-cube__ripple,\\n .morph-cube__body::after {\\n transition: none;\\n animation: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Morph Cube Checkbox\\n \\n \\n \\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\"},{\"id\":\"/index.js\",\"name\":\"index.js\",\"code\":\"console.log(\\\"Hello Vanilla!\\\");\",\"language\":\"javascript\"}]","template":"vanilla-ts","activeFile":"/index.html","viewMode":"both","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]"},"children":[]},{"id":"1758c37c-906d-4a29-a44e-dda079c485b3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"193cab3a-d45d-4995-8d81-c5935480c69f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"25256ab6-3908-4e84-91b7-9da835120cfa","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"5a6ccbe3-3b62-463c-bf29-c6163ed9dd3f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The original class names are changed to cleaner custom names.","styles":{}}],"children":[]},{"id":"afd49a15-4cfa-419f-bb56-5c1c2a538dda","type":"procode","props":{"code":"morphing-checkbox -> morph-cube\ncheckbox-body -> morph-cube__body\ncube -> morph-cube__box\nfront -> morph-cube__face--front\nback -> morph-cube__face--back\ntop -> morph-cube__face--top\nbottom -> morph-cube__face--bottom\nleft -> morph-cube__face--left\nright -> morph-cube__face--right\ncheckmark -> morph-cube__check\nripple -> morph-cube__ripple","language":"javascript","filename":"","files":"[{\"id\":\"5kiofgbh7\",\"name\":\"code\",\"code\":\"morphing-checkbox -> morph-cube\\ncheckbox-body -> morph-cube__body\\ncube -> morph-cube__box\\nfront -> morph-cube__face--front\\nback -> morph-cube__face--back\\ntop -> morph-cube__face--top\\nbottom -> morph-cube__face--bottom\\nleft -> morph-cube__face--left\\nright -> morph-cube__face--right\\ncheckmark -> morph-cube__check\\nripple -> morph-cube__ripple\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5494d7ce-ab65-4db4-b48a-c8bd3f729a91","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"HTML Flow\n\nThe component uses a label wrapper so clicking the cube toggles the checkbox.","styles":{}}],"children":[]},{"id":"7f14798c-9c4a-48d0-8d42-627de2b6ade9","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"s8gcqwc51\",\"name\":\"code\",\"code\":\"\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1cddb92a-5902-43ed-bed4-604f467086bd","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The real checkbox is hidden.","styles":{}}],"children":[]},{"id":"2404a763-08c7-4424-b743-6ca68f0dfacd","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"rv4c5emyc\",\"name\":\"code\",\"code\":\"\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"200b2a55-6a11-45bf-94b4-4b26587424e1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The visible part is inside the body.","styles":{}}],"children":[]},{"id":"0ed53ef7-45e6-4a6b-8c06-7f504a8db38f","type":"procode","props":{"code":"

","language":"javascript","filename":"","files":"[{\"id\":\"odys1e217\",\"name\":\"code\",\"code\":\"

\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3a84e074-cbef-4a24-a520-72f09d351cea","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Cube Flow\n\nThe cube is made from six div faces.","styles":{}}],"children":[]},{"id":"e57b88d4-e85c-4bc4-af0c-df808976019d","type":"procode","props":{"code":"

","language":"javascript","filename":"","files":"[{\"id\":\"sw7exs8sa\",\"name\":\"code\",\"code\":\"

\\n

\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"47d8d517-0c08-41fb-ba3c-f09dbdf9d54c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"3D Logic\n\nThe body creates the 3D depth.","styles":{}}],"children":[]},{"id":"c5d1a954-5e57-4776-9a80-f8481ae5774c","type":"procode","props":{"code":"perspective: 25em;","language":"javascript","filename":"","files":"[{\"id\":\"dhr3owc4u\",\"name\":\"code\",\"code\":\"perspective: 25em;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"138da540-e920-45d7-9313-0bffc4b9380f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The cube keeps the 3D faces active.","styles":{}}],"children":[]},{"id":"bf5eb259-33d7-4e3c-9e15-ba233e4ed7bd","type":"procode","props":{"code":"transform-style: preserve-3d;","language":"javascript","filename":"","files":"[{\"id\":\"cfbehlxuo\",\"name\":\"code\",\"code\":\"transform-style: preserve-3d;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2131ce15-3577-4248-ae73-f535f60771d4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Each face is moved or rotated into a cube position.","styles":{}}],"children":[]},{"id":"9ad4b08e-7acd-4df4-83cd-f2aac8eb93bf","type":"procode","props":{"code":".morph-cube__face--front {\n transform: translateZ(calc(var(--cube-size) / 2));\n}\n\n.morph-cube__face--back {\n transform: rotateY(180deg) translateZ(calc(var(--cube-size) / 2));\n}","language":"javascript","filename":"","files":"[{\"id\":\"wluq7f47c\",\"name\":\"code\",\"code\":\".morph-cube__face--front {\\n transform: translateZ(calc(var(--cube-size) / 2));\\n}\\n\\n.morph-cube__face--back {\\n transform: rotateY(180deg) translateZ(calc(var(--cube-size) / 2));\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b1aba04b-abb3-46f8-b3e4-f4d3742aabfe","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Checked Flow\n\nWhen the checkbox is checked, the cube flips.","styles":{}}],"children":[]},{"id":"f202606b-fb31-4ace-8423-9377b1a5d2bf","type":"procode","props":{"code":".morph-cube__input:checked + .morph-cube__body .morph-cube__box {\n transform: rotateY(180deg) rotateZ(180deg);\n}","language":"javascript","filename":"","files":"[{\"id\":\"aspr4rzkf\",\"name\":\"code\",\"code\":\".morph-cube__input:checked + .morph-cube__body .morph-cube__box {\\n transform: rotateY(180deg) rotateZ(180deg);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"25efcb25-20d2-46a6-b0ef-7d6684356686","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Checkmark Flow\n\nThe checkmark starts hidden and not drawn.","styles":{}}],"children":[]},{"id":"ed00f15f-c4d7-49f8-b3ba-3f06bfb7e07c","type":"procode","props":{"code":"stroke-dasharray: 24;\nstroke-dashoffset: 24;\ntransform: translate(-50%, -50%) scale(0);","language":"javascript","filename":"","files":"[{\"id\":\"pkt0hkvek\",\"name\":\"code\",\"code\":\"stroke-dasharray: 24;\\nstroke-dashoffset: 24;\\ntransform: translate(-50%, -50%) scale(0);\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"be225d49-ef68-419e-bfd8-9ea7254c5992","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"When checked, the checkmark animates in.","styles":{}}],"children":[]},{"id":"ed327993-011f-4808-9da1-8efc86c237db","type":"procode","props":{"code":".morph-cube__input:checked + .morph-cube__body .morph-cube__check {\n animation: morph-cube-check 0.5s var(--cube-ease) forwards 0.3s;\n}","language":"javascript","filename":"","files":"[{\"id\":\"mkxpmk8fc\",\"name\":\"code\",\"code\":\".morph-cube__input:checked + .morph-cube__body .morph-cube__check {\\n animation: morph-cube-check 0.5s var(--cube-ease) forwards 0.3s;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bffb886e-dc54-4dbf-a927-53ced2268c6b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Ripple Flow\n\nThe ripple starts from the center.","styles":{}}],"children":[]},{"id":"2c44fda8-a8d2-4308-98b7-6ca11d43ed5f","type":"procode","props":{"code":"width: 0;\nheight: 0;\nopacity: 0;","language":"javascript","filename":"","files":"[{\"id\":\"wppxwqace\",\"name\":\"code\",\"code\":\"width: 0;\\nheight: 0;\\nopacity: 0;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"41f02e83-03f5-4561-a51d-f009f9781d64","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"When checked, it expands outward.","styles":{}}],"children":[]},{"id":"80b288bf-943c-45a6-9b20-6c654059a899","type":"procode","props":{"code":".morph-cube__input:checked + .morph-cube__body .morph-cube__ripple {\n animation: morph-cube-ripple 0.6s var(--cube-ease);\n}","language":"javascript","filename":"","files":"[{\"id\":\"3uyleva5r\",\"name\":\"code\",\"code\":\".morph-cube__input:checked + .morph-cube__body .morph-cube__ripple {\\n animation: morph-cube-ripple 0.6s var(--cube-ease);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c432714e-c1e7-40d2-93dd-8a9ae96d2133","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Active Flow\n\nWhen clicked, the cube scales down.","styles":{}}],"children":[]},{"id":"69117bc6-fa77-4ae8-afde-7a7284e0cbc6","type":"procode","props":{"code":".morph-cube:active .morph-cube__box {\n transform: scale(0.9);\n}","language":"javascript","filename":"","files":"[{\"id\":\"qt73w9rwx\",\"name\":\"code\",\"code\":\".morph-cube:active .morph-cube__box {\\n transform: scale(0.9);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"55b21598-ead1-49c8-8cb9-d6b18155d283","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"If it is checked while active, it keeps the checked rotation and adds the pressed scale.","styles":{}}],"children":[]},{"id":"fe408edc-b987-4e90-b3b2-f21862d7dc98","type":"procode","props":{"code":".morph-cube__input:checked:active + .morph-cube__body .morph-cube__box {\n transform: scale(0.9) rotateY(180deg) rotateZ(180deg);\n}","language":"javascript","filename":"","files":"[{\"id\":\"l88jo7qim\",\"name\":\"code\",\"code\":\".morph-cube__input:checked:active + .morph-cube__body .morph-cube__box {\\n transform: scale(0.9) rotateY(180deg) rotateZ(180deg);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"499f827a-71b0-4572-81af-267e8a780931","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]