Stair Fill Button

[{"id":"469dcedb-5b9c-4fdd-b9b1-111429bed6b5","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:\\n ui-sans-serif,\\n system-ui,\\n -apple-system,\\n BlinkMacSystemFont,\\n \\\"Segoe UI\\\",\\n Arial,\\n sans-serif;\\n}\\n\\n.page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\\n\\n.btn-12,\\n.btn-12 * {\\n box-sizing: border-box;\\n}\\n\\n.btn-12 {\\n position: relative;\\n isolation: isolate;\\n overflow: hidden;\\n\\n padding: 0.8rem 3rem;\\n border: 2px solid #000;\\n border-radius: 99rem;\\n\\n background: #000;\\n color: #fff;\\n\\n cursor: pointer;\\n outline: none;\\n\\n font: inherit;\\n font-size: 15px;\\n font-weight: 900;\\n line-height: 1.5;\\n text-transform: uppercase;\\n\\n -webkit-tap-highlight-color: transparent;\\n -webkit-appearance: button;\\n}\\n\\n.label {\\n position: relative;\\n z-index: 3;\\n color: #fff;\\n mix-blend-mode: difference;\\n}\\n\\n.stair {\\n position: absolute;\\n bottom: 0;\\n z-index: 1;\\n\\n width: calc(25% + 3px);\\n height: 100%;\\n\\n background: #fff;\\n\\n transform: translateY(-100%);\\n\\n transition: transform 0.34s cubic-bezier(0.76, 0, 0.24, 1);\\n\\n backface-visibility: hidden;\\n will-change: transform;\\n}\\n\\n.stair-1 {\\n left: -1px;\\n transition-delay: 0s;\\n}\\n\\n.stair-2 {\\n left: calc(25% - 1px);\\n transition-delay: 0.05s;\\n}\\n\\n.stair-3 {\\n left: calc(50% - 1px);\\n transition-delay: 0.1s;\\n}\\n\\n.stair-4 {\\n left: calc(75% - 1px);\\n transition-delay: 0.15s;\\n}\\n\\n.btn-12:hover .stair {\\n transform: translateY(0);\\n}\\n\\n.btn-12:not(:hover) .stair-1 {\\n transition-delay: 0.15s;\\n}\\n\\n.btn-12:not(:hover) .stair-2 {\\n transition-delay: 0.1s;\\n}\\n\\n.btn-12:not(:hover) .stair-3 {\\n transition-delay: 0.05s;\\n}\\n\\n.btn-12:not(:hover) .stair-4 {\\n transition-delay: 0s;\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .stair {\\n transition: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Stair Fill Button\\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":"ec1ea4e6-a53c-4caf-8d58-21e82e028c85","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"27009477-c4d6-43e8-b327-c7c5238fd5c6","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"92656ade-67bf-4c14-8afd-0ba47307c416","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"38576080-a7fb-4e7b-b5f1-f6796afa7c7d","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"e35c5d60-6774-476a-841b-3a14c3df12d6","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:\\n ui-sans-serif,\\n system-ui,\\n -apple-system,\\n BlinkMacSystemFont,\\n \\\"Segoe UI\\\",\\n Arial,\\n sans-serif;\\n}\\n\\n.page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\\n\\n.btn-12,\\n.btn-12 * {\\n box-sizing: border-box;\\n}\\n\\n.btn-12 {\\n position: relative;\\n isolation: isolate;\\n overflow: hidden;\\n\\n padding: 0.8rem 3rem;\\n border: 2px solid #000;\\n border-radius: 99rem;\\n\\n background: #000;\\n color: #fff;\\n\\n cursor: pointer;\\n outline: none;\\n\\n font: inherit;\\n font-size: 15px;\\n font-weight: 900;\\n line-height: 1.5;\\n text-transform: uppercase;\\n\\n -webkit-tap-highlight-color: transparent;\\n -webkit-appearance: button;\\n}\\n\\n.label {\\n position: relative;\\n z-index: 3;\\n color: #fff;\\n mix-blend-mode: difference;\\n}\\n\\n.stair {\\n position: absolute;\\n bottom: 0;\\n z-index: 1;\\n\\n width: calc(25% + 3px);\\n height: 100%;\\n\\n background: #fff;\\n\\n transform: translateY(-100%);\\n\\n transition: transform 0.34s cubic-bezier(0.76, 0, 0.24, 1);\\n\\n backface-visibility: hidden;\\n will-change: transform;\\n}\\n\\n.stair-1 {\\n left: -1px;\\n transition-delay: 0s;\\n}\\n\\n.stair-2 {\\n left: calc(25% - 1px);\\n transition-delay: 0.05s;\\n}\\n\\n.stair-3 {\\n left: calc(50% - 1px);\\n transition-delay: 0.1s;\\n}\\n\\n.stair-4 {\\n left: calc(75% - 1px);\\n transition-delay: 0.15s;\\n}\\n\\n.btn-12:hover .stair {\\n transform: translateY(0);\\n}\\n\\n.btn-12:not(:hover) .stair-1 {\\n transition-delay: 0.15s;\\n}\\n\\n.btn-12:not(:hover) .stair-2 {\\n transition-delay: 0.1s;\\n}\\n\\n.btn-12:not(:hover) .stair-3 {\\n transition-delay: 0.05s;\\n}\\n\\n.btn-12:not(:hover) .stair-4 {\\n transition-delay: 0s;\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .stair {\\n transition: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d9baa3bc-11e7-4bbd-8785-2fd687e33649","type":"divider","props":{},"children":[]},{"id":"7d14aa4f-e5f0-4afb-a167-b5c33d3a08d8","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"a6b9993a-fa4f-4279-bc13-781b1c85cd70","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"HTML Structure","styles":{}}],"children":[]},{"id":"0f81f639-ed5f-4b00-9a26-ac61007408d5","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"ywh4j2xl9\",\"name\":\"code\",\"code\":\"\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"74129c53-f630-4689-9a94-9ca0f45bf389","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The button contains one text layer and four animation layers.","styles":{}}],"children":[]},{"id":"2c8f0118-d444-47ff-ae1a-c6ee773633a2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The ","styles":{}},{"type":"text","text":".label","styles":{"code":true}},{"type":"text","text":" is the visible button text.\n\nThe ","styles":{}},{"type":"text","text":".stair","styles":{"code":true}},{"type":"text","text":" elements are decorative white panels.\n\nThe ","styles":{}},{"type":"text","text":"aria-hidden=\"true\"","styles":{"code":true}},{"type":"text","text":" attribute prevents screen readers from reading the decorative spans.","styles":{}}],"children":[]},{"id":"1c565374-4c8d-41fd-bb7e-2fb6f49dc6e9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Page Layout","styles":{}}],"children":[]},{"id":"2e6026b7-074d-44fb-86a5-57f511a7fff4","type":"procode","props":{"code":".page {\n min-height: 100vh;\n display: grid;\n place-items: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"7j84g3ww1\",\"name\":\"code\",\"code\":\".page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"70e00c68-ddd9-4827-a3b7-f8da3979bc0c","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 in the viewport.\n\n","styles":{}},{"type":"text","text":"min-height: 100vh","styles":{"code":true}},{"type":"text","text":" makes the page full screen height.\n\n","styles":{}},{"type":"text","text":"place-items: center","styles":{"code":true}},{"type":"text","text":" centers the button horizontally and vertically.","styles":{}}],"children":[]},{"id":"220f2fd0-1a18-4299-91e6-d2bce0fbf866","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button Base","styles":{}}],"children":[]},{"id":"532eb564-02d1-4a54-8de9-757a996cd003","type":"procode","props":{"code":".btn-12 {\n position: relative;\n isolation: isolate;\n overflow: hidden;\n\n padding: 0.8rem 3rem;\n border: 2px solid #000;\n border-radius: 99rem;\n\n background: #000;\n color: #fff;\n}","language":"javascript","filename":"","files":"[{\"id\":\"klh6utrmk\",\"name\":\"code\",\"code\":\".btn-12 {\\n position: relative;\\n isolation: isolate;\\n overflow: hidden;\\n\\n padding: 0.8rem 3rem;\\n border: 2px solid #000;\\n border-radius: 99rem;\\n\\n background: #000;\\n color: #fff;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"db4317f2-6f83-498b-8216-39f544b5c848","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The ","styles":{}},{"type":"text","text":".btn-12","styles":{"code":true}},{"type":"text","text":" element is the main button container.","styles":{}}],"children":[]},{"id":"61b9e25f-aa01-4748-9695-d2d375d2517b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"position: relative","styles":{"code":true}},{"type":"text","text":" allows the stair panels to be positioned inside the button.\n\n","styles":{}},{"type":"text","text":"overflow: hidden","styles":{"code":true}},{"type":"text","text":" clips the white panels inside the pill shape.\n\n","styles":{}},{"type":"text","text":"border-radius: 99rem","styles":{"code":true}},{"type":"text","text":" creates the rounded pill button.\n\n","styles":{}},{"type":"text","text":"isolation: isolate","styles":{"code":true}},{"type":"text","text":" keeps the blend mode effect inside the button only.","styles":{}}],"children":[]},{"id":"b7d0b9fc-0716-4f50-a3e3-07903345fedd","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text Layer","styles":{}}],"children":[]},{"id":"a7c3014f-c47c-4d84-aa6d-7af7796d972f","type":"procode","props":{"code":".label {\n position: relative;\n z-index: 3;\n color: #fff;\n mix-blend-mode: difference;\n}","language":"javascript","filename":"","files":"[{\"id\":\"y1hh3t0nm\",\"name\":\"code\",\"code\":\".label {\\n position: relative;\\n z-index: 3;\\n color: #fff;\\n mix-blend-mode: difference;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f7e5806c-27c7-45dd-a4cc-7624d2e7a505","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The label is placed above the stair panels using ","styles":{}},{"type":"text","text":"z-index: 3","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"f22aae24-ce03-4006-9761-01129c728dbd","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"mix-blend-mode: difference","styles":{"code":true}},{"type":"text","text":" keeps the text readable when the white panels move behind it. On black, the text appears white. On white, the text appears black.","styles":{}}],"children":[]},{"id":"08b01946-ccea-40d3-a3fb-646fb479219f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Stair Panel Setup","styles":{}}],"children":[]},{"id":"8a5383a6-01b6-4a0f-bfda-a682f3b500e6","type":"procode","props":{"code":".stair {\n position: absolute;\n bottom: 0;\n z-index: 1;\n\n width: calc(25% + 3px);\n height: 100%;\n\n background: #fff;\n\n transform: translateY(-100%);\n\n transition: transform 0.34s cubic-bezier(0.76, 0, 0.24, 1);\n}","language":"javascript","filename":"","files":"[{\"id\":\"zuw17a3vk\",\"name\":\"code\",\"code\":\".stair {\\n position: absolute;\\n bottom: 0;\\n z-index: 1;\\n\\n width: calc(25% + 3px);\\n height: 100%;\\n\\n background: #fff;\\n\\n transform: translateY(-100%);\\n\\n transition: transform 0.34s cubic-bezier(0.76, 0, 0.24, 1);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"145db63f-94f1-4d1f-bc67-60637e07c73e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Each ","styles":{}},{"type":"text","text":".stair","styles":{"code":true}},{"type":"text","text":" is one white vertical panel.","styles":{}}],"children":[]},{"id":"a240b2c6-b09f-44b1-aea5-58f7f40b1a7e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The panel height is ","styles":{}},{"type":"text","text":"100%","styles":{"code":true}},{"type":"text","text":", so each panel can cover the full button height.\n\nThe width is ","styles":{}},{"type":"text","text":"calc(25% + 3px)","styles":{"code":true}},{"type":"text","text":", so the four panels cover the full button width.","styles":{}}],"children":[]},{"id":"5f79fbcd-1820-4fc4-a7bc-ed19c88b88c8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The extra ","styles":{}},{"type":"text","text":"3px","styles":{"code":true}},{"type":"text","text":" makes the panels slightly overlap. This helps prevent thin vertical seam lines between panels.","styles":{}}],"children":[]},{"id":"9d55777a-f2b2-446a-98d6-45d0468e4430","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Animation Start Position","styles":{}}],"children":[]},{"id":"8e0d501e-98a3-4799-8e22-d21b7c22439f","type":"procode","props":{"code":"transform: translateY(-100%);","language":"javascript","filename":"","files":"[{\"id\":\"a8h1cp0z6\",\"name\":\"code\",\"code\":\"transform: translateY(-100%);\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fd3d5d8c-3677-4edd-abd4-a69aa90b2d9f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This moves each white panel above the button before hover.","styles":{}}],"children":[]},{"id":"6d14ceb2-5315-4ccc-a4c6-04da528b2500","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"On hover, the transform becomes:","styles":{}}],"children":[]},{"id":"093ef02c-eaa4-4991-8cb2-c2d727d07db0","type":"procode","props":{"code":"transform: translateY(0);","language":"javascript","filename":"","files":"[{\"id\":\"yacw6xj63\",\"name\":\"code\",\"code\":\"transform: translateY(0);\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f27bed3b-520f-4a37-a79b-a898f07b0c78","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"So the panels move down into the button.","styles":{}}],"children":[]},{"id":"26c67546-e5b2-4007-a48d-628314f142cd","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Stair Positioning","styles":{}}],"children":[]},{"id":"55424f57-5478-45c1-9c90-02869599771d","type":"procode","props":{"code":".stair-1 {\n left: -1px;\n transition-delay: 0s;\n}\n\n.stair-2 {\n left: calc(25% - 1px);\n transition-delay: 0.05s;\n}\n\n.stair-3 {\n left: calc(50% - 1px);\n transition-delay: 0.1s;\n}\n\n.stair-4 {\n left: calc(75% - 1px);\n transition-delay: 0.15s;\n}","language":"javascript","filename":"","files":"[{\"id\":\"0o22zd0bc\",\"name\":\"code\",\"code\":\".stair-1 {\\n left: -1px;\\n transition-delay: 0s;\\n}\\n\\n.stair-2 {\\n left: calc(25% - 1px);\\n transition-delay: 0.05s;\\n}\\n\\n.stair-3 {\\n left: calc(50% - 1px);\\n transition-delay: 0.1s;\\n}\\n\\n.stair-4 {\\n left: calc(75% - 1px);\\n transition-delay: 0.15s;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c27e4cca-c008-4969-9aa9-066a6366360a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The four stair panels are placed side by side.","styles":{}}],"children":[]},{"id":"fbc1702a-78a1-4649-8db0-cd8ab8be0cd4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"stair-1","styles":{"code":true}},{"type":"text","text":" starts from the left.\n\n","styles":{}},{"type":"text","text":"stair-2","styles":{"code":true}},{"type":"text","text":" starts after 25%.\n\n","styles":{}},{"type":"text","text":"stair-3","styles":{"code":true}},{"type":"text","text":" starts after 50%.\n\n","styles":{}},{"type":"text","text":"stair-4","styles":{"code":true}},{"type":"text","text":" starts after 75%.","styles":{}}],"children":[]},{"id":"8ea3f36c-20b1-4817-a7c3-7acdd9eac8b7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The ","styles":{}},{"type":"text","text":"-1px","styles":{"code":true}},{"type":"text","text":" offset helps the panels overlap slightly, preventing visual gaps.","styles":{}}],"children":[]},{"id":"304eccf5-5b70-47de-b8d1-4a75ec4f2a8c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Animation Flow","styles":{}}],"children":[]},{"id":"d05cc202-5c7c-464d-8ce7-ba82b20236c4","type":"procode","props":{"code":".btn-12:hover .stair {\n transform: translateY(0);\n}","language":"javascript","filename":"","files":"[{\"id\":\"jv7yu1b5z\",\"name\":\"code\",\"code\":\".btn-12:hover .stair {\\n transform: translateY(0);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"439015aa-c93d-48b7-a79b-98e94ab0af9d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"When the button is hovered, all stair panels move into the button.","styles":{}}],"children":[]},{"id":"53413d8d-35c6-41f8-8a3a-b09197ae7c10","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The staggered delays create the stair effect:","styles":{}}],"children":[]},{"id":"436b4fdc-7398-4da8-ac7d-f37a470c2d54","type":"procode","props":{"code":".stair-1 {\n transition-delay: 0s;\n}\n\n.stair-2 {\n transition-delay: 0.05s;\n}\n\n.stair-3 {\n transition-delay: 0.1s;\n}\n\n.stair-4 {\n transition-delay: 0.15s;\n}","language":"javascript","filename":"","files":"[{\"id\":\"mwrfr1tpb\",\"name\":\"code\",\"code\":\".stair-1 {\\n transition-delay: 0s;\\n}\\n\\n.stair-2 {\\n transition-delay: 0.05s;\\n}\\n\\n.stair-3 {\\n transition-delay: 0.1s;\\n}\\n\\n.stair-4 {\\n transition-delay: 0.15s;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ec3afed8-4432-40d0-9b87-000a01ee82c9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Panel 1 enters first.\n\nPanel 2 follows.\n\nPanel 3 follows.\n\nPanel 4 enters last.","styles":{}}],"children":[]},{"id":"ea39f869-76c2-40ce-97ae-1136d64958db","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Leave Animation Flow","styles":{}}],"children":[]},{"id":"42f3c920-fdb6-4529-8ce5-07c95cb6dfe7","type":"procode","props":{"code":".btn-12:not(:hover) .stair-1 {\n transition-delay: 0.15s;\n}\n\n.btn-12:not(:hover) .stair-2 {\n transition-delay: 0.1s;\n}\n\n.btn-12:not(:hover) .stair-3 {\n transition-delay: 0.05s;\n}\n\n.btn-12:not(:hover) .stair-4 {\n transition-delay: 0s;\n}","language":"javascript","filename":"","files":"[{\"id\":\"ikah0aqao\",\"name\":\"code\",\"code\":\".btn-12:not(:hover) .stair-1 {\\n transition-delay: 0.15s;\\n}\\n\\n.btn-12:not(:hover) .stair-2 {\\n transition-delay: 0.1s;\\n}\\n\\n.btn-12:not(:hover) .stair-3 {\\n transition-delay: 0.05s;\\n}\\n\\n.btn-12:not(:hover) .stair-4 {\\n transition-delay: 0s;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"dba63f8a-8e21-4416-9faa-36cdd2338051","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"When the cursor leaves, the delay order is reversed.","styles":{}}],"children":[]},{"id":"3f832ff8-4dbe-4ea0-9710-26ee7e0ccad5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Panel 4 leaves first.\n\nPanel 3 follows.\n\nPanel 2 follows.\n\nPanel 1 leaves last.","styles":{}}],"children":[]},{"id":"822a3b1e-8d83-4e8a-9a6e-e5726360334c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This makes the animation feel more intentional instead of all panels leaving at the same time.","styles":{}}],"children":[]},{"id":"12bb30a8-9412-4d1b-a63d-4bb67b005819","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Motion Optimization","styles":{}}],"children":[]},{"id":"ca3615b2-c216-4152-9231-b2b7fd35c4f0","type":"procode","props":{"code":"backface-visibility: hidden;\nwill-change: transform;","language":"javascript","filename":"","files":"[{\"id\":\"1aev5rjbv\",\"name\":\"code\",\"code\":\"backface-visibility: hidden;\\nwill-change: transform;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"58a2bc4f-058f-466f-8df1-898243894519","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"These properties help the browser handle the transform animation more smoothly.","styles":{}}],"children":[]},{"id":"9e5b5585-1e35-4abd-a04e-adb325ccede1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Reduced Motion","styles":{}}],"children":[]},{"id":"077b24d7-3c09-4785-a267-ed0515bd9bbe","type":"procode","props":{"code":"@media (prefers-reduced-motion: reduce) {\n .stair {\n transition: none;\n }\n}","language":"javascript","filename":"","files":"[{\"id\":\"58sc7dx6a\",\"name\":\"code\",\"code\":\"@media (prefers-reduced-motion: reduce) {\\n .stair {\\n transition: none;\\n }\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0ef36905-a984-4543-8055-21c66bd8b1c3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This respects users who prefer reduced motion. The button still works, but the stair transition is removed.","styles":{}}],"children":[]},{"id":"5e14d176-3565-416b-98aa-12e15d7b56e3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]