Arrow Wipe Button

[{"id":"790200b1-0a39-439b-a840-ab055eb8a9e4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"5748134c-2fc8-4606-bb1f-8ada6e72cabe","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.arrow-wipe-button {\\n width: 50px;\\n height: 50px;\\n padding: 0;\\n background-color: #000000;\\n border: 1px solid #000000;\\n display: flex;\\n overflow: hidden;\\n align-items: center;\\n justify-content: center;\\n position: relative;\\n cursor: pointer;\\n isolation: isolate;\\n}\\n\\n.arrow-wipe-button::after {\\n content: \\\"\\\";\\n position: absolute;\\n inset: 0;\\n background: #ffffff;\\n z-index: 0;\\n clip-path: polygon(0 0, 100% 0, 0 0, 0 100%);\\n transition: clip-path 0.4s cubic-bezier(0.25, 1, 0.5, 1);\\n}\\n\\n.arrow-wipe-button:hover::after {\\n clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);\\n}\\n\\n.arrow-wipe-icon {\\n position: absolute;\\n z-index: 1;\\n width: 24px;\\n height: 24px;\\n fill: none;\\n stroke-width: 2;\\n stroke-linecap: round;\\n stroke-linejoin: round;\\n}\\n\\n.arrow-wipe-icon-base {\\n stroke: #ffffff;\\n}\\n\\n.arrow-wipe-icon-hover {\\n stroke: #000000;\\n clip-path: polygon(0 0, 100% 0, 0 0, 0 100%);\\n transition: clip-path 0.4s cubic-bezier(0.25, 1, 0.5, 1);\\n}\\n\\n.arrow-wipe-button:hover .arrow-wipe-icon-hover {\\n clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);\\n}\\n\\n.arrow-wipe-button:active {\\n transform: scale(0.95);\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .arrow-wipe-button::after,\\n .arrow-wipe-icon-hover {\\n transition: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Arrow 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":"/styles.css","viewMode":"both","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]"},"children":[]},{"id":"c9c5df7a-4551-44b3-823c-d64224b70fd4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"fb506a2a-bacc-48e5-9840-7f33bf2525e0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"c6ae32ee-541d-49ce-ba47-4f91eba8ba56","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"a71cf63a-ed42-4d1a-9a8a-11ff224960e1","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"993597ab-4d64-4ba0-b1d6-b572df95d2da","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"ad0206c6-530d-45c7-a8f6-70e99216934e","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.arrow-wipe-button {\\n width: 50px;\\n height: 50px;\\n padding: 0;\\n background-color: #000000;\\n border: 1px solid #000000;\\n display: flex;\\n overflow: hidden;\\n align-items: center;\\n justify-content: center;\\n position: relative;\\n cursor: pointer;\\n isolation: isolate;\\n}\\n\\n.arrow-wipe-button::after {\\n content: \\\"\\\";\\n position: absolute;\\n inset: 0;\\n background: #ffffff;\\n z-index: 0;\\n clip-path: polygon(0 0, 100% 0, 0 0, 0 100%);\\n transition: clip-path 0.4s cubic-bezier(0.25, 1, 0.5, 1);\\n}\\n\\n.arrow-wipe-button:hover::after {\\n clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);\\n}\\n\\n.arrow-wipe-icon {\\n position: absolute;\\n z-index: 1;\\n width: 24px;\\n height: 24px;\\n fill: none;\\n stroke-width: 2;\\n stroke-linecap: round;\\n stroke-linejoin: round;\\n}\\n\\n.arrow-wipe-icon-base {\\n stroke: #ffffff;\\n}\\n\\n.arrow-wipe-icon-hover {\\n stroke: #000000;\\n clip-path: polygon(0 0, 100% 0, 0 0, 0 100%);\\n transition: clip-path 0.4s cubic-bezier(0.25, 1, 0.5, 1);\\n}\\n\\n.arrow-wipe-button:hover .arrow-wipe-icon-hover {\\n clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);\\n}\\n\\n.arrow-wipe-button:active {\\n transform: scale(0.95);\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .arrow-wipe-button::after,\\n .arrow-wipe-icon-hover {\\n transition: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d447e13f-07f3-4245-a6ba-df2729b136cb","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[],"children":[]},{"id":"eae0ec97-f05a-4bb0-91fa-717efdd3ed9f","type":"divider","props":{},"children":[]},{"id":"610f47a6-0aa3-4441-88ff-c0e2260ed616","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"8d916b34-7c76-495a-a739-72116ae72c55","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Purpose\n\nThis component creates a square black arrow button. On hover, a white wipe layer expands diagonally across the button, and a second black arrow is revealed above it.","styles":{}}],"children":[]},{"id":"17a13e9d-174c-44b1-a367-b8784e6679e2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Structure Flow","styles":{}}],"children":[]},{"id":"9ebac724-f7e1-40ad-9465-e9ced28f67f6","type":"procode","props":{"code":"Page\n└── arrow-wipe-button\n ├── ::after white wipe layer\n ├── base SVG arrow\n └── hover SVG arrow","language":"javascript","filename":"","files":"[{\"id\":\"9s9544es8\",\"name\":\"code\",\"code\":\"Page\\n└── arrow-wipe-button\\n ├── ::after white wipe layer\\n ├── base SVG arrow\\n └── hover SVG arrow\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2f3656bd-8573-4400-98ea-cd5b9a77da94","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"HTML Flow","styles":{}}],"children":[]},{"id":"6799e228-ff39-47d4-8e5a-94389583175b","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"o270c4y3a\",\"name\":\"code\",\"code\":\"\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"87437243-1457-44bf-95e3-b031f10c68fb","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The button uses two identical SVG arrows.","styles":{}}],"children":[]},{"id":"0d7348c0-45a6-4413-91d0-89ae84377b20","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The first SVG is the default white arrow.","styles":{}}],"children":[]},{"id":"feb43ffd-99b9-4d32-aca2-e0a31eb6e6c9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The second SVG is the hover black arrow.","styles":{}}],"children":[]},{"id":"3730f489-855e-4424-9c97-ea65bd6f1a82","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Layout Flow","styles":{}}],"children":[]},{"id":"171dee0d-430b-441b-b390-0a22d01931a7","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\":\"ravg5tiai\",\"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":"e37fe0a7-1f6f-494e-9b8d-5aa394af6ccc","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":" class centers the button in the viewport.","styles":{}}],"children":[]},{"id":"91f88f95-1ee8-4f88-b15a-77f5ab7cd021","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button Base Flow","styles":{}}],"children":[]},{"id":"d8008530-7905-4136-bbcd-8d789efeab1f","type":"procode","props":{"code":".arrow-wipe-button {\n width: 50px;\n height: 50px;\n background-color: #000000;\n border: 1px solid #000000;\n display: flex;\n overflow: hidden;\n align-items: center;\n justify-content: center;\n position: relative;\n isolation: isolate;\n}","language":"javascript","filename":"","files":"[{\"id\":\"ah0la5o15\",\"name\":\"code\",\"code\":\".arrow-wipe-button {\\n width: 50px;\\n height: 50px;\\n background-color: #000000;\\n border: 1px solid #000000;\\n display: flex;\\n overflow: hidden;\\n align-items: center;\\n justify-content: center;\\n position: relative;\\n isolation: isolate;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0fa7318a-b2c9-4180-bd7f-337da432e28c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The button is a ","styles":{}},{"type":"text","text":"50px","styles":{"code":true}},{"type":"text","text":" square.","styles":{}}],"children":[]},{"id":"045d60e8-6794-48db-acce-9269710ed1db","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"position: relative","styles":{"code":true}},{"type":"text","text":" allows the wipe layer and arrows to sit inside the button.","styles":{}}],"children":[]},{"id":"9dac90c5-5e4d-4f2b-84d3-7d6252b722ef","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"overflow: hidden","styles":{"code":true}},{"type":"text","text":" clips the white wipe inside the button box.","styles":{}}],"children":[]},{"id":"edea8ecc-3b8f-48f2-a94a-487ebdebb168","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"isolation: isolate","styles":{"code":true}},{"type":"text","text":" keeps the internal layers clean.","styles":{}}],"children":[]},{"id":"146d8e32-05a7-4dc2-a78c-f6e472597f61","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"White Wipe Layer Flow","styles":{}}],"children":[]},{"id":"23f699ef-45c6-4f10-b262-99a2a5874984","type":"procode","props":{"code":".arrow-wipe-button::after {\n content: \"\";\n position: absolute;\n inset: 0;\n background: #ffffff;\n z-index: 0;\n clip-path: polygon(0 0, 100% 0, 0 0, 0 100%);\n transition: clip-path 0.4s cubic-bezier(0.25, 1, 0.5, 1);\n}","language":"javascript","filename":"","files":"[{\"id\":\"oyavbqyj6\",\"name\":\"code\",\"code\":\".arrow-wipe-button::after {\\n content: \\\"\\\";\\n position: absolute;\\n inset: 0;\\n background: #ffffff;\\n z-index: 0;\\n clip-path: polygon(0 0, 100% 0, 0 0, 0 100%);\\n transition: clip-path 0.4s cubic-bezier(0.25, 1, 0.5, 1);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8686d7a1-8ec1-4c5c-8683-ddad877aaa15","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The ","styles":{}},{"type":"text","text":"::after","styles":{"code":true}},{"type":"text","text":" pseudo-element is the white background layer.","styles":{}}],"children":[]},{"id":"b86ab2e5-315d-438c-806a-f912335e0524","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"At default state, the ","styles":{}},{"type":"text","text":"clip-path","styles":{"code":true}},{"type":"text","text":" makes it almost hidden.","styles":{}}],"children":[]},{"id":"7a1382b7-0d79-4982-b0e5-4960b17adba3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Wipe Flow","styles":{}}],"children":[]},{"id":"b2a8af5e-5590-45e5-a8a5-915afff2993a","type":"procode","props":{"code":".arrow-wipe-button:hover::after {\n clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);\n}","language":"javascript","filename":"","files":"[{\"id\":\"w3ntqk8rv\",\"name\":\"code\",\"code\":\".arrow-wipe-button:hover::after {\\n clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5e07209c-572c-4d8a-be3c-bedc6c831d8e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"On hover, the ","styles":{}},{"type":"text","text":"clip-path","styles":{"code":true}},{"type":"text","text":" expands into a full rectangle.","styles":{}}],"children":[]},{"id":"82da1f60-447f-49f2-b6d4-277398019b39","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Flow:","styles":{}}],"children":[]},{"id":"3a7a43af-2d44-4820-b576-f7854423ba47","type":"procode","props":{"code":"default clip-path\n↓\nsmall diagonal white shape\n↓\nhover\n↓\nfull white layer","language":"javascript","filename":"","files":"[{\"id\":\"tel5svrbc\",\"name\":\"code\",\"code\":\"default clip-path\\n↓\\nsmall diagonal white shape\\n↓\\nhover\\n↓\\nfull white layer\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"63ba7c75-96df-4e44-a7a4-e01c93956f78","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Icon Layer Flow","styles":{}}],"children":[]},{"id":"42264c3e-e1fc-4948-9bf0-11f46c16877d","type":"procode","props":{"code":".arrow-wipe-icon {\n position: absolute;\n z-index: 1;\n width: 24px;\n height: 24px;\n fill: none;\n stroke-width: 2;\n stroke-linecap: round;\n stroke-linejoin: round;\n}","language":"javascript","filename":"","files":"[{\"id\":\"a5cyqjqel\",\"name\":\"code\",\"code\":\".arrow-wipe-icon {\\n position: absolute;\\n z-index: 1;\\n width: 24px;\\n height: 24px;\\n fill: none;\\n stroke-width: 2;\\n stroke-linecap: round;\\n stroke-linejoin: round;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d544f51b-1841-47d5-b898-c786809c4d28","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Both arrows are stacked in the same center position.","styles":{}}],"children":[]},{"id":"53e94757-98a5-4236-a752-7794487b079f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Base Icon Flow","styles":{}}],"children":[]},{"id":"e2f9445f-b234-4d52-84b1-7c301d5afcd6","type":"procode","props":{"code":".arrow-wipe-icon-base {\n stroke: #ffffff;\n}","language":"javascript","filename":"","files":"[{\"id\":\"xdkjvzife\",\"name\":\"code\",\"code\":\".arrow-wipe-icon-base {\\n stroke: #ffffff;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"41ecb43c-caca-4b58-9779-e6d0a9b9617b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The base icon is white, so it is visible on the black button.","styles":{}}],"children":[]},{"id":"ba12b0a3-d177-45a2-ae4c-225409a0bcbf","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Icon Flow","styles":{}}],"children":[]},{"id":"8342ea4a-3f77-4a87-8de5-a452746d882d","type":"procode","props":{"code":".arrow-wipe-icon-hover {\n stroke: #000000;\n clip-path: polygon(0 0, 100% 0, 0 0, 0 100%);\n transition: clip-path 0.4s cubic-bezier(0.25, 1, 0.5, 1);\n}","language":"javascript","filename":"","files":"[{\"id\":\"3yykp67h7\",\"name\":\"code\",\"code\":\".arrow-wipe-icon-hover {\\n stroke: #000000;\\n clip-path: polygon(0 0, 100% 0, 0 0, 0 100%);\\n transition: clip-path 0.4s cubic-bezier(0.25, 1, 0.5, 1);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"26ef7d23-b38d-4962-a9bd-0a9da327bd1b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The hover icon is black, but it starts clipped like the white wipe layer.","styles":{}}],"children":[]},{"id":"a7e78037-a778-4569-8b4d-9185f2c21199","type":"procode","props":{"code":".arrow-wipe-button:hover .arrow-wipe-icon-hover {\n clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);\n}","language":"javascript","filename":"","files":"[{\"id\":\"mmkurjtk3\",\"name\":\"code\",\"code\":\".arrow-wipe-button:hover .arrow-wipe-icon-hover {\\n clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"62887708-49e1-42de-bd3d-f6997e354606","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"On hover, the black arrow reveals at the same time as the white background.","styles":{}}],"children":[]},{"id":"a0c28aca-41f4-447d-83a0-6bf30b9f1397","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Layer Flow","styles":{}}],"children":[]},{"id":"52cb401f-72f8-48a2-b61f-35f7aa556615","type":"procode","props":{"code":"z-index: 1 → base white arrow\nz-index: 1 → hover black arrow\nz-index: 0 → white wipe layer\nbutton bg → black background","language":"javascript","filename":"","files":"[{\"id\":\"jkcsf1uji\",\"name\":\"code\",\"code\":\"z-index: 1 → base white arrow\\nz-index: 1 → hover black arrow\\nz-index: 0 → white wipe layer\\nbutton bg → black background\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d7c4778c-0c15-4e78-a88d-0117d7317bd2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Animation Flow","styles":{}}],"children":[]},{"id":"c8c107f3-84b1-47c1-83a5-437dec17b105","type":"procode","props":{"code":"Mouse enters button\n↓\nWhite ::after layer expands using clip-path\n↓\nBlack hover arrow reveals using the same clip-path\n↓\nButton changes from black with white arrow\n↓\nInto white with black arrow","language":"javascript","filename":"","files":"[{\"id\":\"b0a4wd9xw\",\"name\":\"code\",\"code\":\"Mouse enters button\\n↓\\nWhite ::after layer expands using clip-path\\n↓\\nBlack hover arrow reveals using the same clip-path\\n↓\\nButton changes from black with white arrow\\n↓\\nInto white with black arrow\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"878a2c67-0f0c-47a7-8b7c-f11d79d30e20","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Active Flow","styles":{}}],"children":[]},{"id":"e6992943-679f-4018-b911-9189480a115b","type":"procode","props":{"code":".arrow-wipe-button:active {\n transform: scale(0.95);\n}","language":"javascript","filename":"","files":"[{\"id\":\"sm4x1x2kn\",\"name\":\"code\",\"code\":\".arrow-wipe-button:active {\\n transform: scale(0.95);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e4451f55-d03d-4b59-b1f0-a52da34c371c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"When clicked, the button scales down slightly.","styles":{}}],"children":[]},{"id":"d258ba4c-d4f4-4126-8dfe-63347a422dd5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Reduced Motion Flow","styles":{}}],"children":[]},{"id":"dfeb766a-a821-4c2e-bb46-7316076bdfe0","type":"procode","props":{"code":"@media (prefers-reduced-motion: reduce) {\n .arrow-wipe-button::after,\n .arrow-wipe-icon-hover {\n transition: none;\n }\n}","language":"javascript","filename":"","files":"[{\"id\":\"zs9nwu2yv\",\"name\":\"code\",\"code\":\"@media (prefers-reduced-motion: reduce) {\\n .arrow-wipe-button::after,\\n .arrow-wipe-icon-hover {\\n transition: none;\\n }\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8e8f9d0d-ca8d-4495-8178-6d0553a12903","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"For reduced motion users, the clip-path animation becomes instant.","styles":{}}],"children":[]},{"id":"ff63eae1-03a6-4caf-a209-44b83a117bfc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]