Cursor Gooey Button

[{"id":"e1de7fa1-02f1-49f3-aa74-179d9e9a7120","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"9f470392-5f01-4bff-bd70-a7909af1cb0a","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"* {\\n box-sizing: border-box;\\n}\\n\\nhtml,\\nbody {\\n margin: 0;\\n min-height: 100%;\\n}\\n\\nbody {\\n min-height: 100vh;\\n background: #ffffff;\\n font-family:\\n Inter,\\n ui-sans-serif,\\n system-ui,\\n -apple-system,\\n BlinkMacSystemFont,\\n \\\"Segoe UI\\\",\\n sans-serif;\\n}\\n\\nbutton {\\n font: inherit;\\n}\\n\\n.preview-center {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n padding: 32px;\\n}\\n\\n.gooey-purple-btn {\\n position: relative;\\n width: 224px;\\n height: 56px;\\n border: 0;\\n border-radius: 999px;\\n background: transparent;\\n color: #ffffff;\\n display: grid;\\n place-items: center;\\n isolation: isolate;\\n transform: translateZ(0);\\n cursor: pointer;\\n}\\n\\n.gooey-bg {\\n position: absolute;\\n inset: -12px;\\n width: calc(100% + 24px);\\n height: calc(100% + 24px);\\n z-index: 1;\\n pointer-events: none;\\n}\\n\\n.gooey-purple-btn__text {\\n position: relative;\\n z-index: 3;\\n color: #ffffff;\\n font-size: 16px;\\n font-weight: 500;\\n letter-spacing: -0.03em;\\n line-height: 1;\\n pointer-events: none;\\n user-select: none;\\n}\\n\\n/* The single invisible hole that cuts out the button and creates the tapering jaws */\\n.hole-blob {\\n r: 0;\\n cx: var(--x);\\n cy: var(--y);\\n will-change: r, cx, cy;\\n transform-origin: center;\\n transition: r 480ms cubic-bezier(0.16, 1, 0.3, 1) 480ms;\\n}\\n\\n.gooey-purple-btn.is-hovered .hole-blob {\\n r: 24px;\\n transition: r 480ms cubic-bezier(0.16, 1, 0.3, 1) 0s;\\n}\\n\\n/* The crisp white circle that sits ON TOP of the hole */\\n.cursor-circle {\\n position: absolute;\\n width: 34px;\\n height: 34px;\\n border-radius: 50%;\\n background: white;\\n left: 0;\\n top: 0;\\n translate: calc(var(--x) - 29px) calc(var(--y) - 29px);\\n pointer-events: none;\\n z-index: 4;\\n\\n clip-path: circle(0px at 17px 17px);\\n transition: clip-path 480ms cubic-bezier(0.16, 1, 0.3, 1) 480ms;\\n will-change: translate;\\n}\\n\\n.gooey-purple-btn.is-hovered .cursor-circle {\\n clip-path: circle(17.5px at 17px 17px);\\n transition: clip-path 480ms cubic-bezier(0.16, 1, 0.3, 1) 0s;\\n}\\n\\n/* The text inside the circle that inverses the translation */\\n.cursor-text {\\n position: absolute;\\n width: 224px;\\n height: 56px;\\n left: 0;\\n top: 0;\\n translate: calc(29px - var(--x, 124px)) calc(29px - var(--y, 40px));\\n display: grid;\\n place-items: center;\\n\\n color: #050505;\\n font-size: 16px;\\n font-weight: 500;\\n letter-spacing: -0.03em;\\n line-height: 1;\\n}\\n\\n.gooey-purple-btn.is-pressed {\\n transform: scale(0.98);\\n}\\n\\n.gooey-purple-btn:focus-visible {\\n outline: 3px solid rgba(124, 58, 237, 0.35);\\n outline-offset: 6px;\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .hole-blob,\\n .cursor-circle {\\n transition-duration: 1ms;\\n transition-delay: 0ms;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Cursor Gooey 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\"},{\"id\":\"/index.js\",\"name\":\"index.js\",\"code\":\"const gooeyButton = document.querySelector(\\\".gooey-purple-btn\\\");\\n\\nif (gooeyButton) {\\n // Lower speed creates a highly smooth, liquid drag delay!\\n const blob = { speed: 0.04, x: 0, y: 0, targetX: 0, targetY: 0 };\\n const INSET = 12; // Must match CSS inset value\\n\\n function animateBlobs() {\\n blob.x += (blob.targetX - blob.x) * blob.speed;\\n blob.y += (blob.targetY - blob.y) * blob.speed;\\n\\n gooeyButton.style.setProperty(`--x`, `${blob.x}px`);\\n gooeyButton.style.setProperty(`--y`, `${blob.y}px`);\\n\\n requestAnimationFrame(animateBlobs);\\n }\\n requestAnimationFrame(animateBlobs);\\n\\n gooeyButton.addEventListener(\\\"pointermove\\\", (event) => {\\n const rect = gooeyButton.getBoundingClientRect();\\n blob.targetX = event.clientX - rect.left + INSET;\\n blob.targetY = event.clientY - rect.top + INSET;\\n });\\n\\n gooeyButton.addEventListener(\\\"pointerenter\\\", (event) => {\\n const rect = gooeyButton.getBoundingClientRect();\\n const targetX = event.clientX - rect.left + INSET;\\n const targetY = event.clientY - rect.top + INSET;\\n\\n const totalWidth = rect.width + INSET * 2;\\n const startX = targetX < totalWidth / 2 ? 0 : totalWidth;\\n\\n blob.targetX = targetX;\\n blob.targetY = targetY;\\n\\n // Teleport the blob to the edge so it enters smoothly\\n blob.x = startX;\\n blob.y = targetY;\\n\\n gooeyButton.classList.remove(\\\"is-leaving\\\");\\n gooeyButton.classList.add(\\\"is-hovered\\\");\\n });\\n\\n gooeyButton.addEventListener(\\\"pointerleave\\\", () => {\\n gooeyButton.classList.remove(\\\"is-hovered\\\", \\\"is-pressed\\\");\\n gooeyButton.classList.add(\\\"is-leaving\\\");\\n });\\n\\n gooeyButton.addEventListener(\\\"pointerdown\\\", () =>\\n gooeyButton.classList.add(\\\"is-pressed\\\"),\\n );\\n gooeyButton.addEventListener(\\\"pointerup\\\", () =>\\n gooeyButton.classList.remove(\\\"is-pressed\\\"),\\n );\\n gooeyButton.addEventListener(\\\"pointercancel\\\", () =>\\n gooeyButton.classList.remove(\\\"is-pressed\\\"),\\n );\\n}\",\"language\":\"javascript\"}]","template":"vanilla-ts","activeFile":"/index.html","viewMode":"both","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]"},"children":[]},{"id":"72047937-5ba9-4ca9-b365-a0c63c772383","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"e41d78c1-156d-48ee-9cf3-585333ab4789","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"6def8ac1-a6eb-46c4-bf3e-900c140e66ca","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d24b2228-d44d-445a-bf52-1c8e834e0246","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"492fe535-2e3c-4c25-9355-d24dfc95d951","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"2my9dcnjf\",\"name\":\"styles.css\",\"code\":\"* {\\n box-sizing: border-box;\\n}\\n\\nhtml,\\nbody {\\n margin: 0;\\n min-height: 100%;\\n}\\n\\nbody {\\n min-height: 100vh;\\n background: #ffffff;\\n font-family:\\n Inter,\\n ui-sans-serif,\\n system-ui,\\n -apple-system,\\n BlinkMacSystemFont,\\n \\\"Segoe UI\\\",\\n sans-serif;\\n}\\n\\nbutton {\\n font: inherit;\\n}\\n\\n.preview-center {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n padding: 32px;\\n}\\n\\n.gooey-purple-btn {\\n position: relative;\\n width: 224px;\\n height: 56px;\\n border: 0;\\n border-radius: 999px;\\n background: transparent;\\n color: #ffffff;\\n display: grid;\\n place-items: center;\\n isolation: isolate;\\n transform: translateZ(0);\\n cursor: pointer;\\n}\\n\\n.gooey-bg {\\n position: absolute;\\n inset: -12px;\\n width: calc(100% + 24px);\\n height: calc(100% + 24px);\\n z-index: 1;\\n pointer-events: none;\\n}\\n\\n.gooey-purple-btn__text {\\n position: relative;\\n z-index: 3;\\n color: #ffffff;\\n font-size: 16px;\\n font-weight: 500;\\n letter-spacing: -0.03em;\\n line-height: 1;\\n pointer-events: none;\\n user-select: none;\\n}\\n\\n/* The single invisible hole that cuts out the button and creates the tapering jaws */\\n.hole-blob {\\n r: 0;\\n cx: var(--x);\\n cy: var(--y);\\n will-change: r, cx, cy;\\n transform-origin: center;\\n transition: r 480ms cubic-bezier(0.16, 1, 0.3, 1) 480ms;\\n}\\n\\n.gooey-purple-btn.is-hovered .hole-blob {\\n r: 24px;\\n transition: r 480ms cubic-bezier(0.16, 1, 0.3, 1) 0s;\\n}\\n\\n/* The crisp white circle that sits ON TOP of the hole */\\n.cursor-circle {\\n position: absolute;\\n width: 34px;\\n height: 34px;\\n border-radius: 50%;\\n background: white;\\n left: 0;\\n top: 0;\\n translate: calc(var(--x) - 29px) calc(var(--y) - 29px);\\n pointer-events: none;\\n z-index: 4;\\n\\n clip-path: circle(0px at 17px 17px);\\n transition: clip-path 480ms cubic-bezier(0.16, 1, 0.3, 1) 480ms;\\n will-change: translate;\\n}\\n\\n.gooey-purple-btn.is-hovered .cursor-circle {\\n clip-path: circle(17.5px at 17px 17px);\\n transition: clip-path 480ms cubic-bezier(0.16, 1, 0.3, 1) 0s;\\n}\\n\\n/* The text inside the circle that inverses the translation */\\n.cursor-text {\\n position: absolute;\\n width: 224px;\\n height: 56px;\\n left: 0;\\n top: 0;\\n translate: calc(29px - var(--x, 124px)) calc(29px - var(--y, 40px));\\n display: grid;\\n place-items: center;\\n\\n color: #050505;\\n font-size: 16px;\\n font-weight: 500;\\n letter-spacing: -0.03em;\\n line-height: 1;\\n}\\n\\n.gooey-purple-btn.is-pressed {\\n transform: scale(0.98);\\n}\\n\\n.gooey-purple-btn:focus-visible {\\n outline: 3px solid rgba(124, 58, 237, 0.35);\\n outline-offset: 6px;\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .hole-blob,\\n .cursor-circle {\\n transition-duration: 1ms;\\n transition-delay: 0ms;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3a5799fa-8b53-4cb1-9b71-7acc36d7da4b","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add JS","styles":{}}],"children":[]},{"id":"1987226e-98ed-4e2c-9a87-96fefe8c6c0e","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.js\",\"code\":\"const gooeyButton = document.querySelector(\\\".gooey-purple-btn\\\");\\n\\nif (gooeyButton) {\\n // Lower speed creates a highly smooth, liquid drag delay!\\n const blob = { speed: 0.04, x: 0, y: 0, targetX: 0, targetY: 0 };\\n const INSET = 12; // Must match CSS inset value\\n\\n function animateBlobs() {\\n blob.x += (blob.targetX - blob.x) * blob.speed;\\n blob.y += (blob.targetY - blob.y) * blob.speed;\\n\\n gooeyButton.style.setProperty(`--x`, `${blob.x}px`);\\n gooeyButton.style.setProperty(`--y`, `${blob.y}px`);\\n\\n requestAnimationFrame(animateBlobs);\\n }\\n requestAnimationFrame(animateBlobs);\\n\\n gooeyButton.addEventListener(\\\"pointermove\\\", (event) => {\\n const rect = gooeyButton.getBoundingClientRect();\\n blob.targetX = event.clientX - rect.left + INSET;\\n blob.targetY = event.clientY - rect.top + INSET;\\n });\\n\\n gooeyButton.addEventListener(\\\"pointerenter\\\", (event) => {\\n const rect = gooeyButton.getBoundingClientRect();\\n const targetX = event.clientX - rect.left + INSET;\\n const targetY = event.clientY - rect.top + INSET;\\n\\n const totalWidth = rect.width + INSET * 2;\\n const startX = targetX < totalWidth / 2 ? 0 : totalWidth;\\n\\n blob.targetX = targetX;\\n blob.targetY = targetY;\\n\\n // Teleport the blob to the edge so it enters smoothly\\n blob.x = startX;\\n blob.y = targetY;\\n\\n gooeyButton.classList.remove(\\\"is-leaving\\\");\\n gooeyButton.classList.add(\\\"is-hovered\\\");\\n });\\n\\n gooeyButton.addEventListener(\\\"pointerleave\\\", () => {\\n gooeyButton.classList.remove(\\\"is-hovered\\\", \\\"is-pressed\\\");\\n gooeyButton.classList.add(\\\"is-leaving\\\");\\n });\\n\\n gooeyButton.addEventListener(\\\"pointerdown\\\", () =>\\n gooeyButton.classList.add(\\\"is-pressed\\\"),\\n );\\n gooeyButton.addEventListener(\\\"pointerup\\\", () =>\\n gooeyButton.classList.remove(\\\"is-pressed\\\"),\\n );\\n gooeyButton.addEventListener(\\\"pointercancel\\\", () =>\\n gooeyButton.classList.remove(\\\"is-pressed\\\"),\\n );\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bf9ce510-e789-45d1-b203-a9ccb615e44b","type":"divider","props":{},"children":[]},{"id":"fb820e42-93f4-4f17-ab0a-1bf2fc6441aa","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"2b81bccd-1a86-46b8-a3a4-ccfbf5ff3a47","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Style","styles":{}}],"children":[]},{"id":"6aa46a4b-1bd0-414d-9380-a71138259e58","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Purple pill button with SVG gooey filter and a white cursor circle cutout.","styles":{}}],"children":[]},{"id":"2a76e0b8-a757-4172-81db-51b5ce7e357f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Layout / Center","styles":{}}],"children":[]},{"id":"987dd9fe-7e37-4867-b7aa-ee22fbaffbc4","type":"procode","props":{"code":".preview-center {\n min-height: 100vh;\n display: grid;\n place-items: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"x2m4htgxs\",\"name\":\"code\",\"code\":\".preview-center {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bb5c8e29-ca4a-4c77-85f7-d2c297621813","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Gooey Filter","styles":{}}],"children":[]},{"id":"ebac949e-56ae-49c3-93ee-4d66e4b426dd","type":"procode","props":{"code":"\n \n \n","language":"javascript","filename":"","files":"[{\"id\":\"t0pe0odv9\",\"name\":\"code\",\"code\":\"\\n \\n \\n\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"53c600b4-2e30-492b-bcfd-8161296f4dcb","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Cursor Hole","styles":{}}],"children":[]},{"id":"0e54790c-e707-4f97-8963-bfaa365545de","type":"procode","props":{"code":".hole-blob {\n r: 0;\n cx: var(--x);\n cy: var(--y);\n}","language":"javascript","filename":"","files":"[{\"id\":\"vvp4nv6ny\",\"name\":\"code\",\"code\":\".hole-blob {\\n r: 0;\\n cx: var(--x);\\n cy: var(--y);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"056e2f4d-0d00-4ffa-904b-020e22106172","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover","styles":{}}],"children":[]},{"id":"758bfc01-f85d-4297-83c0-3a139d8dbbe2","type":"procode","props":{"code":".gooey-purple-btn.is-hovered .hole-blob {\n r: 24px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"r67ikwl7z\",\"name\":\"code\",\"code\":\".gooey-purple-btn.is-hovered .hole-blob {\\n r: 24px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c0678787-3818-4bc3-b3eb-c2c9b94c47dd","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Smooth Follow","styles":{}}],"children":[]},{"id":"0f81afd8-d955-4174-a2c3-c1679a34ef36","type":"procode","props":{"code":"blob.x += (blob.targetX - blob.x) * blob.speed;\nblob.y += (blob.targetY - blob.y) * blob.speed;","language":"javascript","filename":"","files":"[{\"id\":\"sgtdns6pn\",\"name\":\"code\",\"code\":\"blob.x += (blob.targetX - blob.x) * blob.speed;\\nblob.y += (blob.targetY - blob.y) * blob.speed;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b7f8e31d-a9df-4861-b7f9-75eca402ebfc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Edge Start","styles":{}}],"children":[]},{"id":"c882b9a6-ca7e-479a-930b-a273e55da0ad","type":"procode","props":{"code":"const startX = targetX < totalWidth / 2 ? 0 : totalWidth;\nblob.x = startX;\nblob.y = targetY;","language":"javascript","filename":"","files":"[{\"id\":\"ayz4mxkuj\",\"name\":\"code\",\"code\":\"const startX = targetX < totalWidth / 2 ? 0 : totalWidth;\\nblob.x = startX;\\nblob.y = targetY;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ae89c942-c521-495d-95c7-ab4e0d0238c7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Active","styles":{}}],"children":[]},{"id":"0c3cf61c-b5e9-4ed3-9c59-441b6d9d059c","type":"procode","props":{"code":".gooey-purple-btn.is-pressed {\n transform: scale(0.98);\n}","language":"javascript","filename":"","files":"[{\"id\":\"3l1rubnmx\",\"name\":\"code\",\"code\":\".gooey-purple-btn.is-pressed {\\n transform: scale(0.98);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"db242c86-f84c-49c2-8690-e812632987cc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"JavaScript Logic","styles":{}}],"children":[]},{"id":"da526c15-26fb-4fdf-ba72-2dc7446c885e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"JavaScript tracks the pointer, updates ","styles":{}},{"type":"text","text":"--x","styles":{"code":true}},{"type":"text","text":" and ","styles":{}},{"type":"text","text":"--y","styles":{"code":true}},{"type":"text","text":", starts the blob from the nearest edge, then uses ","styles":{}},{"type":"text","text":"requestAnimationFrame","styles":{"code":true}},{"type":"text","text":" for a slow liquid follow effect.","styles":{}}],"children":[]},{"id":"6d59f61a-94d8-45d9-9cd4-053a0b5bc76c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]