Tilt Hover Button

[{"id":"15d3d7b1-0465-4570-bf64-16d42e3dcbfe","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"9930b5aa-6e6e-4f61-85ce-a26520dfa5fd","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: #111111;\\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.tilt-button-container {\\n width: 135px;\\n height: 47px;\\n perspective: 800px;\\n transition: transform 0.3s ease-in-out;\\n}\\n\\n.tilt-button-container:active {\\n transform: scale(0.95);\\n}\\n\\n.tilt-button {\\n position: relative;\\n width: 135px;\\n height: 47px;\\n padding: 0;\\n border: 3px solid #8b5cf6;\\n border-radius: 12px;\\n background: transparent;\\n cursor: pointer;\\n transform-style: preserve-3d;\\n transition:\\n transform 0.2s ease,\\n box-shadow 0.2s ease;\\n}\\n\\n.tilt-button::before {\\n content: \\\"\\\";\\n position: absolute;\\n inset: 0;\\n background-color: #a855f7;\\n border-radius: 8px;\\n transition: background-color 0.3s ease-in-out;\\n z-index: -1;\\n}\\n\\n.tilt-button-text {\\n position: absolute;\\n left: 50%;\\n top: 50%;\\n width: 135px;\\n height: 47px;\\n color: #ffffff;\\n font-size: 17px;\\n font-weight: 900;\\n line-height: 47px;\\n transform: translate(-50%, -50%);\\n transition:\\n top 0.3s ease-in-out,\\n transform 0.3s ease-in-out,\\n font-size 0.3s ease-in-out,\\n color 0.3s ease-in-out,\\n text-shadow 0.3s ease-in-out;\\n}\\n\\n.tilt-button-container.is-hovered .tilt-button::before {\\n background-color: transparent;\\n}\\n\\n.tilt-button-container.is-hovered .tilt-button-text {\\n top: -150%;\\n transform: translate(-50%, 0);\\n font-size: 34px;\\n color: #a855f7;\\n}\\n\\n.tilt-button-container.is-shaking .tilt-button-text {\\n animation: textShake 0.5s ease-in-out;\\n}\\n\\n@keyframes textShake {\\n 0% {\\n left: 45%;\\n }\\n\\n 25% {\\n left: 54%;\\n }\\n\\n 50% {\\n left: 48%;\\n }\\n\\n 75% {\\n left: 52%;\\n }\\n\\n 100% {\\n left: 50%;\\n }\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .tilt-button-container,\\n .tilt-button,\\n .tilt-button::before,\\n .tilt-button-text {\\n transition: none;\\n animation: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Tilt Hover Button\\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\":\"const container = document.querySelector(\\\".tilt-button-container\\\");\\nconst button = document.querySelector(\\\".tilt-button\\\");\\nconst buttonText = document.querySelector(\\\".tilt-button-text\\\");\\n\\nconst maxTilt = 15;\\n\\nfunction moveButton(event) {\\n const rect = container.getBoundingClientRect();\\n\\n const mouseX = event.clientX - rect.left;\\n const mouseY = event.clientY - rect.top;\\n\\n const xPercent = mouseX / rect.width - 0.5;\\n const yPercent = mouseY / rect.height - 0.5;\\n\\n const rotateY = xPercent * maxTilt * 2;\\n const rotateX = yPercent * maxTilt * -2;\\n\\n const shadowX = xPercent * 4;\\n const shadowY = yPercent * 4;\\n\\n button.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;\\n button.style.boxShadow = `${shadowX}px ${shadowY}px #18181888`;\\n buttonText.style.textShadow = `${shadowX}px ${shadowY}px #18181888`;\\n}\\n\\nfunction enterButton() {\\n container.classList.add(\\\"is-hovered\\\");\\n buttonText.textContent = \\\"Click\\\";\\n\\n container.classList.remove(\\\"is-shaking\\\");\\n void container.offsetWidth;\\n container.classList.add(\\\"is-shaking\\\");\\n}\\n\\nfunction leaveButton() {\\n container.classList.remove(\\\"is-hovered\\\", \\\"is-shaking\\\");\\n buttonText.textContent = \\\"Hover\\\";\\n\\n button.style.transform = \\\"rotateX(0deg) rotateY(0deg)\\\";\\n button.style.boxShadow = \\\"none\\\";\\n buttonText.style.textShadow = \\\"none\\\";\\n}\\n\\ncontainer.addEventListener(\\\"mouseenter\\\", enterButton);\\ncontainer.addEventListener(\\\"mousemove\\\", moveButton);\\ncontainer.addEventListener(\\\"mouseleave\\\", leaveButton);\",\"language\":\"javascript\"}]","template":"vanilla-ts","activeFile":"/index.html","viewMode":"both","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]"},"children":[]},{"id":"1e771257-6206-4d95-9ad8-6ee17866fcc1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"6d0044a8-2f4c-492a-a405-39336d595cf0","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML","styles":{}}],"children":[]},{"id":"14d5c181-2a85-4f00-8f25-6091ab658b29","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n

\\n \\n

\\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1e421c55-a1fb-4688-9753-e496811ccc13","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"1430bdb5-ea2b-4a05-9c1a-ead8ffbed57d","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: #111111;\\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.tilt-button-container {\\n width: 135px;\\n height: 47px;\\n perspective: 800px;\\n transition: transform 0.3s ease-in-out;\\n}\\n\\n.tilt-button-container:active {\\n transform: scale(0.95);\\n}\\n\\n.tilt-button {\\n position: relative;\\n width: 135px;\\n height: 47px;\\n padding: 0;\\n border: 3px solid #8b5cf6;\\n border-radius: 12px;\\n background: transparent;\\n cursor: pointer;\\n transform-style: preserve-3d;\\n transition:\\n transform 0.2s ease,\\n box-shadow 0.2s ease;\\n}\\n\\n.tilt-button::before {\\n content: \\\"\\\";\\n position: absolute;\\n inset: 0;\\n background-color: #a855f7;\\n border-radius: 8px;\\n transition: background-color 0.3s ease-in-out;\\n z-index: -1;\\n}\\n\\n.tilt-button-text {\\n position: absolute;\\n left: 50%;\\n top: 50%;\\n width: 135px;\\n height: 47px;\\n color: #ffffff;\\n font-size: 17px;\\n font-weight: 900;\\n line-height: 47px;\\n transform: translate(-50%, -50%);\\n transition:\\n top 0.3s ease-in-out,\\n transform 0.3s ease-in-out,\\n font-size 0.3s ease-in-out,\\n color 0.3s ease-in-out,\\n text-shadow 0.3s ease-in-out;\\n}\\n\\n.tilt-button-container.is-hovered .tilt-button::before {\\n background-color: transparent;\\n}\\n\\n.tilt-button-container.is-hovered .tilt-button-text {\\n top: -150%;\\n transform: translate(-50%, 0);\\n font-size: 34px;\\n color: #a855f7;\\n}\\n\\n.tilt-button-container.is-shaking .tilt-button-text {\\n animation: textShake 0.5s ease-in-out;\\n}\\n\\n@keyframes textShake {\\n 0% {\\n left: 45%;\\n }\\n\\n 25% {\\n left: 54%;\\n }\\n\\n 50% {\\n left: 48%;\\n }\\n\\n 75% {\\n left: 52%;\\n }\\n\\n 100% {\\n left: 50%;\\n }\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .tilt-button-container,\\n .tilt-button,\\n .tilt-button::before,\\n .tilt-button-text {\\n transition: none;\\n animation: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bd9dcbe3-87af-424f-a166-2703f0104ef8","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 3: Add JS","styles":{}}],"children":[]},{"id":"a149f33e-7b9d-40a9-8d40-a0b22605aa75","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.js\",\"code\":\"const container = document.querySelector(\\\".tilt-button-container\\\");\\nconst button = document.querySelector(\\\".tilt-button\\\");\\nconst buttonText = document.querySelector(\\\".tilt-button-text\\\");\\n\\nconst maxTilt = 15;\\n\\nfunction moveButton(event) {\\n const rect = container.getBoundingClientRect();\\n\\n const mouseX = event.clientX - rect.left;\\n const mouseY = event.clientY - rect.top;\\n\\n const xPercent = mouseX / rect.width - 0.5;\\n const yPercent = mouseY / rect.height - 0.5;\\n\\n const rotateY = xPercent * maxTilt * 2;\\n const rotateX = yPercent * maxTilt * -2;\\n\\n const shadowX = xPercent * 4;\\n const shadowY = yPercent * 4;\\n\\n button.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;\\n button.style.boxShadow = `${shadowX}px ${shadowY}px #18181888`;\\n buttonText.style.textShadow = `${shadowX}px ${shadowY}px #18181888`;\\n}\\n\\nfunction enterButton() {\\n container.classList.add(\\\"is-hovered\\\");\\n buttonText.textContent = \\\"Click\\\";\\n\\n container.classList.remove(\\\"is-shaking\\\");\\n void container.offsetWidth;\\n container.classList.add(\\\"is-shaking\\\");\\n}\\n\\nfunction leaveButton() {\\n container.classList.remove(\\\"is-hovered\\\", \\\"is-shaking\\\");\\n buttonText.textContent = \\\"Hover\\\";\\n\\n button.style.transform = \\\"rotateX(0deg) rotateY(0deg)\\\";\\n button.style.boxShadow = \\\"none\\\";\\n buttonText.style.textShadow = \\\"none\\\";\\n}\\n\\ncontainer.addEventListener(\\\"mouseenter\\\", enterButton);\\ncontainer.addEventListener(\\\"mousemove\\\", moveButton);\\ncontainer.addEventListener(\\\"mouseleave\\\", leaveButton);\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0fb5a908-0906-4eec-ad6f-ea368233ba1c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"b91fcbe1-6e56-402e-b9fc-0f3237b44cea","type":"divider","props":{},"children":[]},{"id":"c90cb309-bfbb-4b2f-bc9f-84e36e881aaf","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"07ec6686-eebc-4c25-bd37-f6baa70fa020","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The component uses one container, one button, and one text span.","styles":{}}],"children":[]},{"id":"a854fa1c-40cc-4518-a6a8-44939765355f","type":"procode","props":{"code":"

\n \n

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

\\n \\n

\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3af8806a-d3a5-4d5d-a6b8-3b1d24a9ec5a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The container is used for mouse tracking.\n\nThe button is used for the 3D tilt.\n\nThe span is used so the text can move and shake separately.","styles":{}}],"children":[]},{"id":"3b866173-39e4-46ca-b1dd-4552f2d63882","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Layout / Center\n\nThe ","styles":{}},{"type":"text","text":".page","styles":{"code":true}},{"type":"text","text":" wrapper centers the button on the screen.","styles":{}}],"children":[]},{"id":"5c527f4d-2077-4f3a-8978-8281acf33e4a","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\":\"fgpiwscfq\",\"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":"579700c7-6532-4d9d-b4bf-dc4ac1941c82","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button Container\n\nThe ","styles":{}},{"type":"text","text":".tilt-button-container","styles":{"code":true}},{"type":"text","text":" keeps the original button size.","styles":{}}],"children":[]},{"id":"42c4e43d-9e62-41fd-9e94-d9fed8d0e305","type":"procode","props":{"code":".tilt-button-container {\n width: 135px;\n height: 47px;\n perspective: 800px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"mpvldexpd\",\"name\":\"code\",\"code\":\".tilt-button-container {\\n width: 135px;\\n height: 47px;\\n perspective: 800px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8600c2f8-c926-4772-b395-83db2219bc4c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The ","styles":{}},{"type":"text","text":"perspective: 800px","styles":{"code":true}},{"type":"text","text":" makes the rotate effect feel like 3D.","styles":{}}],"children":[]},{"id":"5fadba18-90b0-43b0-a369-8ce96ff8b8e6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button Base\n\nThe button has fixed width, fixed height, purple border, and rounded corners.","styles":{}}],"children":[]},{"id":"22d5fef1-9c38-45fe-83ca-3224e91230ef","type":"procode","props":{"code":".tilt-button {\n width: 135px;\n height: 47px;\n border: 3px solid #8b5cf6;\n border-radius: 12px;\n background: transparent;\n}","language":"javascript","filename":"","files":"[{\"id\":\"2rr56jysy\",\"name\":\"code\",\"code\":\".tilt-button {\\n width: 135px;\\n height: 47px;\\n border: 3px solid #8b5cf6;\\n border-radius: 12px;\\n background: transparent;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e4cdc92e-dd94-4ec0-a6c8-616a777239ae","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Purple Fill Layer\n\nThe purple fill is created with ","styles":{}},{"type":"text","text":"::before","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"4eedc6c1-09b3-421f-a732-8af393054e62","type":"procode","props":{"code":".tilt-button::before {\n content: \"\";\n position: absolute;\n inset: 0;\n background-color: #a855f7;\n border-radius: 8px;\n z-index: -1;\n}","language":"javascript","filename":"","files":"[{\"id\":\"xtubh36b4\",\"name\":\"code\",\"code\":\".tilt-button::before {\\n content: \\\"\\\";\\n position: absolute;\\n inset: 0;\\n background-color: #a855f7;\\n border-radius: 8px;\\n z-index: -1;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"75e136e7-9d6b-4331-90f3-e8d94c6dfdfe","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This keeps the fill behind the text but still inside the button.","styles":{}}],"children":[]},{"id":"ee03d244-150b-44e4-9c06-3a781cf7db32","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text Layer\n\nThe text is positioned in the center of the button.","styles":{}}],"children":[]},{"id":"f6663637-c08a-4d3a-b956-0b541ae0f4ff","type":"procode","props":{"code":".tilt-button-text {\n position: absolute;\n left: 50%;\n top: 50%;\n width: 135px;\n height: 47px;\n color: #ffffff;\n font-size: 17px;\n font-weight: 900;\n line-height: 47px;\n transform: translate(-50%, -50%);\n}","language":"javascript","filename":"","files":"[{\"id\":\"qvmdq1386\",\"name\":\"code\",\"code\":\".tilt-button-text {\\n position: absolute;\\n left: 50%;\\n top: 50%;\\n width: 135px;\\n height: 47px;\\n color: #ffffff;\\n font-size: 17px;\\n font-weight: 900;\\n line-height: 47px;\\n transform: translate(-50%, -50%);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"83d9aad9-57f7-4e96-a87b-74b38ed690ee","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Default State\n\nAt default, the button shows purple fill with white ","styles":{}},{"type":"text","text":"Hover","styles":{"code":true}},{"type":"text","text":" text.","styles":{}}],"children":[]},{"id":"2989c192-672f-4c28-b63d-f2e06a26bfea","type":"procode","props":{"code":"Hover","language":"javascript","filename":"","files":"[{\"id\":\"bcl5c0wix\",\"name\":\"code\",\"code\":\"Hover\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"33beb867-0cdf-42b1-b842-0f0d0a954ecc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover State Class\n\nWhen the mouse enters, JavaScript adds ","styles":{}},{"type":"text","text":".is-hovered","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"5324916a-7547-41cd-84a3-d1e7dc0faf36","type":"procode","props":{"code":"function enterButton() {\n container.classList.add(\"is-hovered\");\n buttonText.textContent = \"Click\";\n}","language":"javascript","filename":"","files":"[{\"id\":\"r8lpj53tb\",\"name\":\"code\",\"code\":\"function enterButton() {\\n container.classList.add(\\\"is-hovered\\\");\\n buttonText.textContent = \\\"Click\\\";\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4f84c889-ae07-4787-bbf2-6fe07bc4586e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This changes the text from ","styles":{}},{"type":"text","text":"Hover","styles":{"code":true}},{"type":"text","text":" to ","styles":{}},{"type":"text","text":"Click","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"99f00db7-2cfa-40f3-9c78-0917697d670a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Fill Hide\n\nWhen ","styles":{}},{"type":"text","text":".is-hovered","styles":{"code":true}},{"type":"text","text":" is active, the purple fill becomes transparent.","styles":{}}],"children":[]},{"id":"0bad1544-5d0b-47b2-8138-94ff1a84e4cf","type":"procode","props":{"code":".tilt-button-container.is-hovered .tilt-button::before {\n background-color: transparent;\n}","language":"javascript","filename":"","files":"[{\"id\":\"xboups4oc\",\"name\":\"code\",\"code\":\".tilt-button-container.is-hovered .tilt-button::before {\\n background-color: transparent;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"70ae1e7c-4f96-4ab9-ba28-ea2bcb93e94f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Text Move\n\nThe ","styles":{}},{"type":"text","text":"Click","styles":{"code":true}},{"type":"text","text":" text moves above the button and becomes bigger.","styles":{}}],"children":[]},{"id":"4aad5192-a1fe-409a-85a6-909a1e51b73d","type":"procode","props":{"code":".tilt-button-container.is-hovered .tilt-button-text {\n top: -150%;\n transform: translate(-50%, 0);\n font-size: 34px;\n color: #a855f7;\n}","language":"javascript","filename":"","files":"[{\"id\":\"xbg2nvqao\",\"name\":\"code\",\"code\":\".tilt-button-container.is-hovered .tilt-button-text {\\n top: -150%;\\n transform: translate(-50%, 0);\\n font-size: 34px;\\n color: #a855f7;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"56ba5984-85eb-4165-813a-fc205461d7c3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Mouse Position Logic\n\nJavaScript reads the mouse position inside the container.","styles":{}}],"children":[]},{"id":"899aaaba-295d-478e-b80b-6e329339f5ac","type":"procode","props":{"code":"const rect = container.getBoundingClientRect();\n\nconst mouseX = event.clientX - rect.left;\nconst mouseY = event.clientY - rect.top;","language":"javascript","filename":"","files":"[{\"id\":\"4xhh0pq0e\",\"name\":\"code\",\"code\":\"const rect = container.getBoundingClientRect();\\n\\nconst mouseX = event.clientX - rect.left;\\nconst mouseY = event.clientY - rect.top;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"84482ef2-ac88-44ec-82c1-532eafdb1387","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This gives the cursor position relative to the button.","styles":{}}],"children":[]},{"id":"fc6131ab-bee4-4957-bd5d-509d32cde4ad","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Mouse Percent Logic\n\nThe mouse position is converted into center-based values.","styles":{}}],"children":[]},{"id":"1a808114-59eb-4553-acb7-8272b10ac967","type":"procode","props":{"code":"const xPercent = mouseX / rect.width - 0.5;\nconst yPercent = mouseY / rect.height - 0.5;","language":"javascript","filename":"","files":"[{\"id\":\"xuri6qd3h\",\"name\":\"code\",\"code\":\"const xPercent = mouseX / rect.width - 0.5;\\nconst yPercent = mouseY / rect.height - 0.5;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"85fd6d4d-7237-44ff-b5f4-d8f4be9d35c6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Result example:","styles":{}}],"children":[]},{"id":"8aa8ecd9-5b65-46c2-ae90-05825c794f1d","type":"procode","props":{"code":"Left side = negative X\nCenter = 0\nRight side = positive X\n\nTop side = negative Y\nCenter = 0\nBottom side = positive Y","language":"javascript","filename":"","files":"[{\"id\":\"y7osks02i\",\"name\":\"code\",\"code\":\"Left side = negative X\\nCenter = 0\\nRight side = positive X\\n\\nTop side = negative Y\\nCenter = 0\\nBottom side = positive Y\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5b4491b5-0887-4d7a-8350-75b6312a0d77","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Tilt Rotation Logic\n\nThe button rotates based on cursor position.","styles":{}}],"children":[]},{"id":"45fd1fbb-5b57-473f-963c-bba37f85c3e5","type":"procode","props":{"code":"const rotateY = xPercent * maxTilt * 2;\nconst rotateX = yPercent * maxTilt * -2;\n\nbutton.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;","language":"javascript","filename":"","files":"[{\"id\":\"j679kv59p\",\"name\":\"code\",\"code\":\"const rotateY = xPercent * maxTilt * 2;\\nconst rotateX = yPercent * maxTilt * -2;\\n\\nbutton.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"41551f3a-7ee5-48b4-8be8-5be7c7ae5b48","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The ","styles":{}},{"type":"text","text":"maxTilt","styles":{"code":true}},{"type":"text","text":" value controls how strong the tilt feels.","styles":{}}],"children":[]},{"id":"af6db596-3652-4b34-9c39-595c1b8de26d","type":"procode","props":{"code":"const maxTilt = 15;","language":"javascript","filename":"","files":"[{\"id\":\"n9p1q4rxd\",\"name\":\"code\",\"code\":\"const maxTilt = 15;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7be6082e-aab2-421c-a86f-68ea7cc142fa","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Shadow Logic\n\nThe shadow follows the cursor direction.","styles":{}}],"children":[]},{"id":"4aedf52f-a5ba-45a7-88e8-1002b21bce11","type":"procode","props":{"code":"const shadowX = xPercent * 4;\nconst shadowY = yPercent * 4;\n\nbutton.style.boxShadow = `${shadowX}px ${shadowY}px #18181888`;\nbuttonText.style.textShadow = `${shadowX}px ${shadowY}px #18181888`;","language":"javascript","filename":"","files":"[{\"id\":\"zpq5q5zuo\",\"name\":\"code\",\"code\":\"const shadowX = xPercent * 4;\\nconst shadowY = yPercent * 4;\\n\\nbutton.style.boxShadow = `${shadowX}px ${shadowY}px #18181888`;\\nbuttonText.style.textShadow = `${shadowX}px ${shadowY}px #18181888`;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"be54254f-19eb-47bc-a45b-27c31e43af9a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"When the cursor moves left, the shadow moves left.\n\nWhen the cursor moves right, the shadow moves right.","styles":{}}],"children":[]},{"id":"9947eb87-a670-4476-855c-acc5598844af","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Shake Trigger\n\nWhen the mouse enters, JavaScript restarts the text shake animation.","styles":{}}],"children":[]},{"id":"2394dde4-6ace-46d4-afac-f0d17be04e73","type":"procode","props":{"code":"container.classList.remove(\"is-shaking\");\nvoid container.offsetWidth;\ncontainer.classList.add(\"is-shaking\");","language":"javascript","filename":"","files":"[{\"id\":\"42n7u7fxu\",\"name\":\"code\",\"code\":\"container.classList.remove(\\\"is-shaking\\\");\\nvoid container.offsetWidth;\\ncontainer.classList.add(\\\"is-shaking\\\");\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bf6138df-5e2f-45c0-b125-a9dd55b8d28c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The ","styles":{}},{"type":"text","text":"void container.offsetWidth","styles":{"code":true}},{"type":"text","text":" line forces the browser to restart the animation.","styles":{}}],"children":[]},{"id":"bc1e5964-369b-44e3-8c98-cb41334aa521","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Shake Animation\n\nThe text moves left and right using ","styles":{}},{"type":"text","text":"left","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"dbee7bfd-f232-42cb-b926-8f9472086d5c","type":"procode","props":{"code":"@keyframes textShake {\n 0% {\n left: 45%;\n }\n\n 25% {\n left: 54%;\n }\n\n 50% {\n left: 48%;\n }\n\n 75% {\n left: 52%;\n }\n\n 100% {\n left: 50%;\n }\n}","language":"javascript","filename":"","files":"[{\"id\":\"f0d4hu2vt\",\"name\":\"code\",\"code\":\"@keyframes textShake {\\n 0% {\\n left: 45%;\\n }\\n\\n 25% {\\n left: 54%;\\n }\\n\\n 50% {\\n left: 48%;\\n }\\n\\n 75% {\\n left: 52%;\\n }\\n\\n 100% {\\n left: 50%;\\n }\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9482bc4c-bc8b-415d-8515-51a295b3aedb","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The animation is applied when ","styles":{}},{"type":"text","text":".is-shaking","styles":{"code":true}},{"type":"text","text":" exists.","styles":{}}],"children":[]},{"id":"25dabe34-55d5-44ee-8fe9-640326bdeb6e","type":"procode","props":{"code":".tilt-button-container.is-shaking .tilt-button-text {\n animation: textShake 0.5s ease-in-out;\n}","language":"javascript","filename":"","files":"[{\"id\":\"4xtadmrjx\",\"name\":\"code\",\"code\":\".tilt-button-container.is-shaking .tilt-button-text {\\n animation: textShake 0.5s ease-in-out;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c51dc7bc-0715-4691-8cc4-ff1be8b67b6c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Leave Reset\n\nWhen the mouse leaves, JavaScript resets everything.","styles":{}}],"children":[]},{"id":"2943e3d1-b79e-452c-a8bf-a0aa56bffa50","type":"procode","props":{"code":"function leaveButton() {\n container.classList.remove(\"is-hovered\", \"is-shaking\");\n buttonText.textContent = \"Hover\";\n\n button.style.transform = \"rotateX(0deg) rotateY(0deg)\";\n button.style.boxShadow = \"none\";\n buttonText.style.textShadow = \"none\";\n}","language":"javascript","filename":"","files":"[{\"id\":\"ys8xjp5lv\",\"name\":\"code\",\"code\":\"function leaveButton() {\\n container.classList.remove(\\\"is-hovered\\\", \\\"is-shaking\\\");\\n buttonText.textContent = \\\"Hover\\\";\\n\\n button.style.transform = \\\"rotateX(0deg) rotateY(0deg)\\\";\\n button.style.boxShadow = \\\"none\\\";\\n buttonText.style.textShadow = \\\"none\\\";\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9015b24a-ee73-4690-a1aa-57b77ffa3f62","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This returns the button to its default state.","styles":{}}],"children":[]},{"id":"1bcdb2ed-ecb0-4837-b109-ce82ec52371d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Click Effect\n\nWhen the button is clicked, the container scales down slightly.","styles":{}}],"children":[]},{"id":"e49dccf2-9e94-4a44-a1a9-816d98264bb0","type":"procode","props":{"code":".tilt-button-container:active {\n transform: scale(0.95);\n}","language":"javascript","filename":"","files":"[{\"id\":\"ibkodh40y\",\"name\":\"code\",\"code\":\".tilt-button-container:active {\\n transform: scale(0.95);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f82fb4d3-b2f6-4655-a50c-4ee6fadd202b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"JavaScript Events\n\nThe component uses three mouse events.","styles":{}}],"children":[]},{"id":"4ba5d8f0-4c4d-4bdc-969f-9812b241ac40","type":"procode","props":{"code":"container.addEventListener(\"mouseenter\", enterButton);\ncontainer.addEventListener(\"mousemove\", moveButton);\ncontainer.addEventListener(\"mouseleave\", leaveButton);","language":"javascript","filename":"","files":"[{\"id\":\"5ilib87jz\",\"name\":\"code\",\"code\":\"container.addEventListener(\\\"mouseenter\\\", enterButton);\\ncontainer.addEventListener(\\\"mousemove\\\", moveButton);\\ncontainer.addEventListener(\\\"mouseleave\\\", leaveButton);\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4999958c-70af-4754-ac90-8d67eef7d189","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The event flow is simple:","styles":{}}],"children":[]},{"id":"9888e283-b5e0-4738-bd7c-b8dd1c9fc59c","type":"procode","props":{"code":"mouseenter = change text to Click and start shake\nmousemove = tilt button based on cursor position\nmouseleave = reset text, tilt, shadow, and classes","language":"javascript","filename":"","files":"[{\"id\":\"j4by84x9r\",\"name\":\"code\",\"code\":\"mouseenter = change text to Click and start shake\\nmousemove = tilt button based on cursor position\\nmouseleave = reset text, tilt, shadow, and classes\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e828075b-257a-43b1-8553-6b1080a9a235","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Animation Flow\n\nDefault: purple filled button with ","styles":{}},{"type":"text","text":"Hover","styles":{"code":true}},{"type":"text","text":" text.\n\nMouse enter: fill disappears, text changes to ","styles":{}},{"type":"text","text":"Click","styles":{"code":true}},{"type":"text","text":", and text moves upward.\n\nMouse move: button tilts based on cursor position.\n\nMouse leave: button resets back to normal.\n\nClick: button scales down slightly.","styles":{}}],"children":[]},{"id":"6db70650-0102-4e0a-bca4-9aa37ae6a1b5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Motion Safety\n\nThe reduced motion media query removes transition and animation.","styles":{}}],"children":[]},{"id":"4a48d0f4-3a3c-42f6-a560-38278876f9b3","type":"procode","props":{"code":"@media (prefers-reduced-motion: reduce) {\n .tilt-button-container,\n .tilt-button,\n .tilt-button::before,\n .tilt-button-text {\n transition: none;\n animation: none;\n }\n}","language":"javascript","filename":"","files":"[{\"id\":\"z6qc4sxlb\",\"name\":\"code\",\"code\":\"@media (prefers-reduced-motion: reduce) {\\n .tilt-button-container,\\n .tilt-button,\\n .tilt-button::before,\\n .tilt-button-text {\\n transition: none;\\n animation: none;\\n }\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"444b9781-c4c9-4616-9b21-ee0ac18ba0f9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]