Layer Wipe Button

[{"id":"b9d13d3b-22b0-4e8d-b7d9-92bd2ed9e6fc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"1b171ecf-0aa1-4588-beaa-990951ce44b7","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: #ffffff;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.page {\\n min-height: 100vh;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.layer-wipe-button {\\n position: relative;\\n width: 8rem;\\n height: 3rem;\\n padding: 0.5rem;\\n overflow: hidden;\\n border: none;\\n border-radius: 0.375rem;\\n background: #000000;\\n color: #ffffff;\\n font-size: 1.25rem;\\n font-weight: 700;\\n cursor: pointer;\\n}\\n\\n.layer-wipe-base-text {\\n position: relative;\\n z-index: 1;\\n display: block;\\n color: #ffffff;\\n}\\n\\n.layer-wipe-button:hover .layer-wipe-base-text {\\n visibility: hidden;\\n}\\n\\n.layer-wipe {\\n position: absolute;\\n z-index: 2;\\n width: 9rem;\\n height: 8rem;\\n top: -2rem;\\n left: -0.5rem;\\n transform: rotate(12deg) scaleX(0);\\n transform-origin: left;\\n transition-property: transform;\\n}\\n\\n.layer-wipe-white {\\n background: #ffffff;\\n transition-duration: 1000ms;\\n}\\n\\n.layer-wipe-purple-light {\\n background: #c084fc;\\n transition-duration: 700ms;\\n}\\n\\n.layer-wipe-purple-dark {\\n background: #9333ea;\\n transition-duration: 500ms;\\n}\\n\\n.layer-wipe-button:hover .layer-wipe-white {\\n transform: rotate(12deg) scaleX(1);\\n transition-duration: 500ms;\\n}\\n\\n.layer-wipe-button:hover .layer-wipe-purple-light {\\n transform: rotate(12deg) scaleX(1);\\n transition-duration: 700ms;\\n}\\n\\n.layer-wipe-button:hover .layer-wipe-purple-dark {\\n transform: rotate(12deg) scaleX(1);\\n transition-duration: 1000ms;\\n}\\n\\n.layer-wipe-hover-text {\\n position: absolute;\\n inset: 0;\\n z-index: 3;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n color: #ffffff;\\n opacity: 0;\\n pointer-events: none;\\n transition: opacity 200ms ease;\\n}\\n\\n.layer-wipe-button:hover .layer-wipe-hover-text {\\n opacity: 1;\\n transition-delay: 250ms;\\n}\\n\\n.layer-wipe-button:active {\\n transform: scale(0.96);\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .layer-wipe,\\n .layer-wipe-hover-text {\\n transition: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Layer Wipe Button\\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":"aff89c7b-77d9-4a07-a84d-ee473160466f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"b6fb082d-ed87-4987-a011-34602a3e5a6a","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"41bad186-4461-4d72-8f67-b21059a63721","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"870e1d93-985d-43bd-9b3e-ca49fe524d04","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"1fa8dc40-cb19-4b27-9a82-2c714a3e2a93","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: #ffffff;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.page {\\n min-height: 100vh;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.layer-wipe-button {\\n position: relative;\\n width: 8rem;\\n height: 3rem;\\n padding: 0.5rem;\\n overflow: hidden;\\n border: none;\\n border-radius: 0.375rem;\\n background: #000000;\\n color: #ffffff;\\n font-size: 1.25rem;\\n font-weight: 700;\\n cursor: pointer;\\n}\\n\\n.layer-wipe-base-text {\\n position: relative;\\n z-index: 1;\\n display: block;\\n color: #ffffff;\\n}\\n\\n.layer-wipe-button:hover .layer-wipe-base-text {\\n visibility: hidden;\\n}\\n\\n.layer-wipe {\\n position: absolute;\\n z-index: 2;\\n width: 9rem;\\n height: 8rem;\\n top: -2rem;\\n left: -0.5rem;\\n transform: rotate(12deg) scaleX(0);\\n transform-origin: left;\\n transition-property: transform;\\n}\\n\\n.layer-wipe-white {\\n background: #ffffff;\\n transition-duration: 1000ms;\\n}\\n\\n.layer-wipe-purple-light {\\n background: #c084fc;\\n transition-duration: 700ms;\\n}\\n\\n.layer-wipe-purple-dark {\\n background: #9333ea;\\n transition-duration: 500ms;\\n}\\n\\n.layer-wipe-button:hover .layer-wipe-white {\\n transform: rotate(12deg) scaleX(1);\\n transition-duration: 500ms;\\n}\\n\\n.layer-wipe-button:hover .layer-wipe-purple-light {\\n transform: rotate(12deg) scaleX(1);\\n transition-duration: 700ms;\\n}\\n\\n.layer-wipe-button:hover .layer-wipe-purple-dark {\\n transform: rotate(12deg) scaleX(1);\\n transition-duration: 1000ms;\\n}\\n\\n.layer-wipe-hover-text {\\n position: absolute;\\n inset: 0;\\n z-index: 3;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n color: #ffffff;\\n opacity: 0;\\n pointer-events: none;\\n transition: opacity 200ms ease;\\n}\\n\\n.layer-wipe-button:hover .layer-wipe-hover-text {\\n opacity: 1;\\n transition-delay: 250ms;\\n}\\n\\n.layer-wipe-button:active {\\n transform: scale(0.96);\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .layer-wipe,\\n .layer-wipe-hover-text {\\n transition: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b4853b5a-60aa-47c3-b35e-560d6f83b6ce","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"86b2ceea-a989-4736-83bc-48509c554221","type":"divider","props":{},"children":[]},{"id":"ff153564-51a7-4bba-9e7e-0d41b412b2db","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"5a5ca49e-064d-450c-a4f9-043daaf3d359","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The button has five internal layers.","styles":{}}],"children":[]},{"id":"07e5b767-b08e-4d92-a1c1-c7f56cb18747","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"i0g5ak2kh\",\"name\":\"code\",\"code\":\"\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[{"id":"183b5165-0bd8-430e-9995-442f6bc87a59","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button","styles":{}}],"children":[]}]},{"id":"ec787e6a-c1e1-4839-998b-b57b36ccf059","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The first span is the default text.\n\nThe next three spans are the animated wipe layers.\n\nThe last span is the hover text.","styles":{}}],"children":[]},{"id":"91ed7d02-c23c-4a4a-8e87-2a5ab2e2a001","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Layout / Center","styles":{}}],"children":[]},{"id":"e899a47e-bfec-4322-a071-958396308889","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The ","styles":{}},{"type":"text","text":".page","styles":{"code":true}},{"type":"text","text":" wrapper centers the button.","styles":{}}],"children":[]},{"id":"2d79dab8-9865-44ce-a405-8a8c228c1d07","type":"procode","props":{"code":".page {\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"7i45235zg\",\"name\":\"code\",\"code\":\".page {\\n min-height: 100vh;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c199ffa3-f574-4806-9e17-490e39885dca","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button Base","styles":{}}],"children":[]},{"id":"f79985ad-e03b-451c-9c52-df5639cea398","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The button starts as a black rounded rectangle.","styles":{}}],"children":[]},{"id":"8747e630-91c2-4e3a-a3dd-a76ae85b615a","type":"procode","props":{"code":".layer-wipe-button {\n width: 8rem;\n height: 3rem;\n background: #000000;\n border-radius: 0.375rem;\n overflow: hidden;\n}","language":"javascript","filename":"","files":"[{\"id\":\"nva5vtzu1\",\"name\":\"code\",\"code\":\".layer-wipe-button {\\n width: 8rem;\\n height: 3rem;\\n background: #000000;\\n border-radius: 0.375rem;\\n overflow: hidden;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"97fd4525-704e-4e76-8d7a-83e38e33f8c8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"overflow: hidden","styles":{"code":true}},{"type":"text","text":" keeps the rotated wipe layers inside the button.","styles":{}}],"children":[]},{"id":"5260766f-6843-42b0-a363-b67d12004866","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Layer Order","styles":{}}],"children":[]},{"id":"20cc63a6-bf1e-4fb7-8a36-3de9b51863c5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The default text is placed at the bottom layer.","styles":{}}],"children":[]},{"id":"1d986af2-0e60-4cdd-a480-9579def00ac7","type":"procode","props":{"code":".layer-wipe-base-text {\n z-index: 1;\n}","language":"javascript","filename":"","files":"[{\"id\":\"ezh5begyw\",\"name\":\"code\",\"code\":\".layer-wipe-base-text {\\n z-index: 1;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9705b704-27b6-480a-9225-2a1d76e3ff0c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The wipe layers sit above the default text.","styles":{}}],"children":[]},{"id":"9c0a8d1f-3697-47e1-8176-ba067c5fe8fb","type":"procode","props":{"code":".layer-wipe {\n z-index: 2;\n}","language":"javascript","filename":"","files":"[{\"id\":\"1mqo2q09f\",\"name\":\"code\",\"code\":\".layer-wipe {\\n z-index: 2;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"971cd894-d0b5-49e4-aeea-5237f212e29d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The hover text sits on the highest layer.","styles":{}}],"children":[]},{"id":"c6e1b394-2e03-46fd-98b3-165719491dec","type":"procode","props":{"code":".layer-wipe-hover-text {\n z-index: 3;\n}","language":"javascript","filename":"","files":"[{\"id\":\"gr7qblvdq\",\"name\":\"code\",\"code\":\".layer-wipe-hover-text {\\n z-index: 3;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bbda48fb-ae49-4eac-bf40-b1e1303b7cf2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This fixes the bug where ","styles":{}},{"type":"text","text":"Hover me!","styles":{"code":true}},{"type":"text","text":" still appears on top of the purple background.","styles":{}}],"children":[]},{"id":"c08b8ac0-fb5b-4a6a-b656-8a24f5b95c70","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Default Text Fix","styles":{}}],"children":[]},{"id":"43d61e68-71d6-49ec-b136-b7e5531ce188","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"On hover, the default text is hidden.","styles":{}}],"children":[]},{"id":"90b86287-f675-4da6-abc8-96705caa398d","type":"procode","props":{"code":".layer-wipe-button:hover .layer-wipe-base-text {\n visibility: hidden;\n}","language":"javascript","filename":"","files":"[{\"id\":\"7h2dmxog5\",\"name\":\"code\",\"code\":\".layer-wipe-button:hover .layer-wipe-base-text {\\n visibility: hidden;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6e0139cf-41d6-42a5-8cab-1bdd7b774ab5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This prevents ","styles":{}},{"type":"text","text":"Hover me!","styles":{"code":true}},{"type":"text","text":" from overlapping with ","styles":{}},{"type":"text","text":"Explore!","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"b99a9a4f-5c01-46f3-ad70-75e8c2bd45b1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Wipe Layer Position","styles":{}}],"children":[]},{"id":"017c50f4-2fc7-4e6f-a3ad-e9707722ff16","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Each wipe layer is bigger than the button and rotated.","styles":{}}],"children":[]},{"id":"2addc588-ee58-4f6a-9f72-df6740ea7670","type":"procode","props":{"code":".layer-wipe {\n width: 9rem;\n height: 8rem;\n top: -2rem;\n left: -0.5rem;\n transform: rotate(12deg) scaleX(0);\n transform-origin: left;\n}","language":"javascript","filename":"","files":"[{\"id\":\"ey5q9to9x\",\"name\":\"code\",\"code\":\".layer-wipe {\\n width: 9rem;\\n height: 8rem;\\n top: -2rem;\\n left: -0.5rem;\\n transform: rotate(12deg) scaleX(0);\\n transform-origin: left;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fd7060d7-f2e8-4da4-b413-f19ededaaa0b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The ","styles":{}},{"type":"text","text":"scaleX(0)","styles":{"code":true}},{"type":"text","text":" makes the layers hidden at first.","styles":{}}],"children":[]},{"id":"0c73ef1a-3675-43e2-af01-effeefe8177c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Wipe Flow","styles":{}}],"children":[]},{"id":"09dd8ffb-d167-4589-b2f4-d762f6a9ea4c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"On hover, each layer expands from left to right.","styles":{}}],"children":[]},{"id":"7c4c5e04-d2d7-452b-9a47-e89d3df34eef","type":"procode","props":{"code":".layer-wipe-button:hover .layer-wipe-purple-dark {\n transform: rotate(12deg) scaleX(1);\n}","language":"javascript","filename":"","files":"[{\"id\":\"x4b3ay0qe\",\"name\":\"code\",\"code\":\".layer-wipe-button:hover .layer-wipe-purple-dark {\\n transform: rotate(12deg) scaleX(1);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"08e8d4cb-36a8-4dab-b318-5bd7814fe384","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The three layers use different durations, so the wipe feels layered:","styles":{}}],"children":[]},{"id":"82c7ba15-d889-4312-b873-f66066b240b7","type":"procode","props":{"code":".layer-wipe-white {\n transition-duration: 1000ms;\n}\n\n.layer-wipe-purple-light {\n transition-duration: 700ms;\n}\n\n.layer-wipe-purple-dark {\n transition-duration: 500ms;\n}","language":"javascript","filename":"","files":"[{\"id\":\"7ynwfbmmd\",\"name\":\"code\",\"code\":\".layer-wipe-white {\\n transition-duration: 1000ms;\\n}\\n\\n.layer-wipe-purple-light {\\n transition-duration: 700ms;\\n}\\n\\n.layer-wipe-purple-dark {\\n transition-duration: 500ms;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"77216113-79d1-47f2-b6b0-809d1bdaafad","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Text Flow","styles":{}}],"children":[]},{"id":"7889f383-b061-4b60-a07e-b7eac4e00a1f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The hover text is centered and hidden by default.","styles":{}}],"children":[]},{"id":"ee5fbb0b-8ef0-4cfc-84d3-627ee0187cb8","type":"procode","props":{"code":".layer-wipe-hover-text {\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0;\n}","language":"javascript","filename":"","files":"[{\"id\":\"99rvg04ru\",\"name\":\"code\",\"code\":\".layer-wipe-hover-text {\\n inset: 0;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n opacity: 0;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c6391909-85cc-49b3-8f1d-f1fbb5f6b47f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"On hover, it fades in after the wipe starts.","styles":{}}],"children":[]},{"id":"03ea0d3f-097f-42aa-b9c6-435fb4f090c1","type":"procode","props":{"code":".layer-wipe-button:hover .layer-wipe-hover-text {\n opacity: 1;\n transition-delay: 250ms;\n}","language":"javascript","filename":"","files":"[{\"id\":\"xfghy5z8p\",\"name\":\"code\",\"code\":\".layer-wipe-button:hover .layer-wipe-hover-text {\\n opacity: 1;\\n transition-delay: 250ms;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1876ab7a-0409-4444-ba98-8858d1642a2c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Active State","styles":{}}],"children":[]},{"id":"aabc992c-5947-4a95-9835-53ca3c64c1a6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"When clicked, the button scales down slightly.","styles":{}}],"children":[]},{"id":"71adba86-472f-4902-b9ce-6e67424b3ac8","type":"procode","props":{"code":".la","language":"javascript","filename":"","files":"[{\"id\":\"8b92em1wd\",\"name\":\"code\",\"code\":\".la\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"160c5db2-4ef6-4372-9460-f47eee73f3f2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]