Cursor Circle Button

[{"id":"4018e240-a153-45d0-bdf6-d8be184ca853","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"19f11cbb-dc2b-432a-8ba8-b7c751c584be","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"@property --size {\\n syntax: \\\"\\\";\\n inherits: true;\\n initial-value: 0px;\\n}\\n\\n* {\\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: #7c3aff;\\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.origin-button {\\n --x: 50%;\\n --y: 50%;\\n --size: 0px;\\n\\n position: relative;\\n width: 188px;\\n height: 80px;\\n border: 0;\\n border-radius: 14px;\\n overflow: hidden;\\n cursor: pointer;\\n background: #ffffff;\\n color: #101010;\\n display: grid;\\n place-items: center;\\n isolation: isolate;\\n transform: translate3d(0, 0, 0);\\n -webkit-backface-visibility: hidden;\\n backface-visibility: hidden;\\n transition: --size 700ms cubic-bezier(0.4, 0, 0.2, 1);\\n}\\n\\n.origin-button__fill {\\n position: absolute;\\n inset: -3px;\\n background: #000000;\\n pointer-events: none;\\n clip-path: circle(var(--size) at var(--x) var(--y));\\n will-change: clip-path;\\n}\\n\\n.origin-button__text {\\n position: absolute;\\n z-index: 2;\\n font-size: 23px;\\n font-weight: 500;\\n letter-spacing: -0.065em;\\n line-height: 1;\\n white-space: nowrap;\\n pointer-events: none;\\n user-select: none;\\n color: #ffffff;\\n mix-blend-mode: difference;\\n}\\n\\n/* full fill */\\n.origin-button.is-hovered {\\n --size: 230px;\\n}\\n\\n.origin-button.is-pressed {\\n transform: scale(0.98);\\n}\\n\\n.origin-button:focus-visible {\\n outline: 3px solid rgba(0, 0, 0, 0.18);\\n outline-offset: 6px;\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .origin-button__fill {\\n transition-duration: 1ms;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Cursor Circle 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 originButton = document.querySelector(\\\".origin-button\\\");\\n\\nif (originButton) {\\n let targetX = 50,\\n targetY = 50,\\n currentX = 50,\\n currentY = 50;\\n\\n // This controls the \\\"trailing\\\" speed. Lower = smoother trailing from the edge\\n const speed = 0.08;\\n\\n // Run a single, continuous animation loop\\n function animateCircle() {\\n currentX += (targetX - currentX) * speed;\\n currentY += (targetY - currentY) * speed;\\n originButton.style.setProperty(\\\"--x\\\", `${currentX}px`);\\n originButton.style.setProperty(\\\"--y\\\", `${currentY}px`);\\n requestAnimationFrame(animateCircle);\\n }\\n requestAnimationFrame(animateCircle);\\n\\n originButton.addEventListener(\\\"pointermove\\\", (e) => {\\n const rect = originButton.getBoundingClientRect();\\n targetX = e.clientX - rect.left;\\n targetY = e.clientY - rect.top;\\n });\\n\\n originButton.addEventListener(\\\"pointerenter\\\", (e) => {\\n const rect = originButton.getBoundingClientRect();\\n targetX = e.clientX - rect.left;\\n targetY = e.clientY - rect.top;\\n\\n // Instantly snap the start position to the left or right edge\\n currentX = targetX < rect.width / 2 ? 0 : rect.width;\\n currentY = targetY;\\n\\n originButton.classList.add(\\\"is-hovered\\\");\\n });\\n\\n originButton.addEventListener(\\\"pointerleave\\\", () => {\\n originButton.classList.remove(\\\"is-hovered\\\", \\\"is-pressed\\\");\\n });\\n\\n originButton.addEventListener(\\\"pointerdown\\\", () =>\\n originButton.classList.add(\\\"is-pressed\\\"),\\n );\\n originButton.addEventListener(\\\"pointerup\\\", () =>\\n originButton.classList.remove(\\\"is-pressed\\\"),\\n );\\n originButton.addEventListener(\\\"pointercancel\\\", () =>\\n originButton.classList.remove(\\\"is-pressed\\\"),\\n );\\n}\",\"language\":\"javascript\"}]","template":"vanilla-ts","activeFile":"/index.html","showCode":"true","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]","splitRatio":"50","mobileSplitRatio":"50"},"children":[]},{"id":"b009cccb-1ab4-4f9d-86e0-f9c6373e51da","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"78662f7d-968b-4b62-9da4-dbb63e07d1b4","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n

o\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a31aca15-e96f-43e2-b42e-2f27d2115ec6","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"fef2e9be-c17b-49fe-8335-7d49e7f4a7d8","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"2my9dcnjf\",\"name\":\"styles.css\",\"code\":\"@property --size {\\n syntax: \\\"\\\";\\n inherits: true;\\n initial-value: 0px;\\n}\\n\\n* {\\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: #7c3aff;\\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.origin-button {\\n --x: 50%;\\n --y: 50%;\\n --size: 0px;\\n\\n position: relative;\\n width: 188px;\\n height: 80px;\\n border: 0;\\n border-radius: 14px;\\n overflow: hidden;\\n cursor: pointer;\\n background: #ffffff;\\n color: #101010;\\n display: grid;\\n place-items: center;\\n isolation: isolate;\\n transform: translate3d(0, 0, 0);\\n -webkit-backface-visibility: hidden;\\n backface-visibility: hidden;\\n transition: --size 700ms cubic-bezier(0.4, 0, 0.2, 1);\\n}\\n\\n.origin-button__fill {\\n position: absolute;\\n inset: -3px;\\n background: #000000;\\n pointer-events: none;\\n clip-path: circle(var(--size) at var(--x) var(--y));\\n will-change: clip-path;\\n}\\n\\n.origin-button__text {\\n position: absolute;\\n z-index: 2;\\n font-size: 23px;\\n font-weight: 500;\\n letter-spacing: -0.065em;\\n line-height: 1;\\n white-space: nowrap;\\n pointer-events: none;\\n user-select: none;\\n color: #ffffff;\\n mix-blend-mode: difference;\\n}\\n\\n/* full fill */\\n.origin-button.is-hovered {\\n --size: 230px;\\n}\\n\\n.origin-button.is-pressed {\\n transform: scale(0.98);\\n}\\n\\n.origin-button:focus-visible {\\n outline: 3px solid rgba(0, 0, 0, 0.18);\\n outline-offset: 6px;\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .origin-button__fill {\\n transition-duration: 1ms;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"52fc146a-6685-49fc-9519-d37acb10b11d","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 3: Add JS","styles":{}}],"children":[]},{"id":"8b4bde9c-ab23-4b8d-bc61-4e2db080247d","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.js\",\"code\":\"const originButton = document.querySelector(\\\".origin-button\\\");\\n\\nif (originButton) {\\n let targetX = 50,\\n targetY = 50,\\n currentX = 50,\\n currentY = 50;\\n\\n // This controls the \\\"trailing\\\" speed. Lower = smoother trailing from the edge\\n const speed = 0.08;\\n\\n // Run a single, continuous animation loop\\n function animateCircle() {\\n currentX += (targetX - currentX) * speed;\\n currentY += (targetY - currentY) * speed;\\n originButton.style.setProperty(\\\"--x\\\", `${currentX}px`);\\n originButton.style.setProperty(\\\"--y\\\", `${currentY}px`);\\n requestAnimationFrame(animateCircle);\\n }\\n requestAnimationFrame(animateCircle);\\n\\n originButton.addEventListener(\\\"pointermove\\\", (e) => {\\n const rect = originButton.getBoundingClientRect();\\n targetX = e.clientX - rect.left;\\n targetY = e.clientY - rect.top;\\n });\\n\\n originButton.addEventListener(\\\"pointerenter\\\", (e) => {\\n const rect = originButton.getBoundingClientRect();\\n targetX = e.clientX - rect.left;\\n targetY = e.clientY - rect.top;\\n\\n // Instantly snap the start position to the left or right edge\\n currentX = targetX < rect.width / 2 ? 0 : rect.width;\\n currentY = targetY;\\n\\n originButton.classList.add(\\\"is-hovered\\\");\\n });\\n\\n originButton.addEventListener(\\\"pointerleave\\\", () => {\\n originButton.classList.remove(\\\"is-hovered\\\", \\\"is-pressed\\\");\\n });\\n\\n originButton.addEventListener(\\\"pointerdown\\\", () =>\\n originButton.classList.add(\\\"is-pressed\\\"),\\n );\\n originButton.addEventListener(\\\"pointerup\\\", () =>\\n originButton.classList.remove(\\\"is-pressed\\\"),\\n );\\n originButton.addEventListener(\\\"pointercancel\\\", () =>\\n originButton.classList.remove(\\\"is-pressed\\\"),\\n );\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9e4f1212-02ba-4569-aaed-caf4fe6b6116","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"ba5e4b5f-6cef-45de-ad34-e359b9b03fff","type":"divider","props":{},"children":[]},{"id":"15e963aa-e282-4b13-ac4d-8e78c836bc21","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"cfe1905a-9b03-40ad-9a8f-9dc05386128d","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Style\n","styles":{"bold":true}},{"type":"text","text":"White rounded button on purple background with black circle fill.","styles":{}}],"children":[]},{"id":"2bcd2622-f34c-4430-bc89-a66db708cba0","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Layout / Center","styles":{"bold":true}}],"children":[]},{"id":"8ddaca6f-dcd5-4520-9981-29ced0764272","type":"procode","props":{"code":".preview-center {\n min-height: 100vh;\n display: grid;\n place-items: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"0gvba1c9m\",\"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":"8405df7b-b13a-41c7-b3a3-cc74a0d9c23f","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Cursor Origin","styles":{"bold":true}}],"children":[]},{"id":"4906c104-7840-481b-b7c5-496d9bc5d6cf","type":"procode","props":{"code":".origin-button__fill {\n clip-path: circle(var(--size) at var(--x) var(--y));\n}","language":"javascript","filename":"","files":"[{\"id\":\"zrxqk1vlz\",\"name\":\"code\",\"code\":\".origin-button__fill {\\n clip-path: circle(var(--size) at var(--x) var(--y));\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"55616180-ef5e-4e8b-89c7-433a3e8fa152","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Full Fill","styles":{"bold":true}}],"children":[]},{"id":"e3aa7aac-d7ce-471d-ad06-b15bac001a80","type":"procode","props":{"code":".origin-button.is-hovered {\n --size: 230px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"6sj1u3zpc\",\"name\":\"code\",\"code\":\".origin-button.is-hovered {\\n --size: 230px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b5c5c655-7d85-4caa-986e-9d16a864c1a9","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Trailing Speed","styles":{"bold":true}}],"children":[]},{"id":"61bc0574-5893-48d8-ae9e-da0942b17dcd","type":"procode","props":{"code":"const speed = 0.08;","language":"javascript","filename":"","files":"[{\"id\":\"by3yh795x\",\"name\":\"code\",\"code\":\"const speed = 0.08;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"323d0518-e5ec-4c97-8e85-8595330fddc5","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Edge Start","styles":{"bold":true}}],"children":[]},{"id":"813e2d3b-e59b-49e4-887e-4a3cf4b0828b","type":"procode","props":{"code":"currentX = targetX < rect.width / 2 ? 0 : rect.width;\ncurrentY = targetY;","language":"javascript","filename":"","files":"[{\"id\":\"8lnef09fi\",\"name\":\"code\",\"code\":\"currentX = targetX < rect.width / 2 ? 0 : rect.width;\\ncurrentY = targetY;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f6ac62d7-3a21-43a9-be21-2e167cd8e349","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text Blend","styles":{"bold":true}}],"children":[]},{"id":"da0e113c-7984-46a2-8220-d87ebdad74b7","type":"procode","props":{"code":".origin-button__text {\n mix-blend-mode: difference;\n}","language":"javascript","filename":"","files":"[{\"id\":\"oup3h7cw8\",\"name\":\"code\",\"code\":\".origin-button__text {\\n mix-blend-mode: difference;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d3fddaab-0916-479b-9eca-5307226e4e5b","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Active","styles":{"bold":true}}],"children":[]},{"id":"66f92f97-a9d8-48ac-aeb5-63b4ea540f5c","type":"procode","props":{"code":".origin-button.is-pressed {\n transform: scale(0.98);\n}","language":"javascript","filename":"","files":"[{\"id\":\"pqn12r5i1\",\"name\":\"code\",\"code\":\".origin-button.is-pressed {\\n transform: scale(0.98);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c70a8a0f-6c57-4f3e-b91b-54417a6e0f13","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"JavaScript Logic\n","styles":{"bold":true}},{"type":"text","text":"JavaScript tracks the cursor inside the button, 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 fill from the nearest left/right edge, and toggles ","styles":{}},{"type":"text","text":"is-hovered","styles":{"code":true}},{"type":"text","text":" plus ","styles":{}},{"type":"text","text":"is-pressed","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"198bb608-758f-4bac-9ba1-a0efffe85641","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]