Blob Button

[{"id":"d013af5d-1e0b-4784-b9e1-22602b07ee98","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"3b03b5c6-5dd4-4135-a6d5-d5cd53afc7de","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"*,\\n*::before,\\n*::after {\\n box-sizing: border-box;\\n margin: 0;\\n padding: 0;\\n}\\n\\nbody {\\n font-family:\\n Inter,\\n system-ui,\\n -apple-system,\\n sans-serif;\\n}\\n\\n.scene {\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n min-height: 100vh;\\n background: #ffffff;\\n}\\n\\n.stage {\\n position: relative;\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n width: 360px;\\n height: 120px;\\n}\\n\\n/* GOO filter shell — button + pill inside */\\n.blob-button-wrapper {\\n position: absolute;\\n top: 50%;\\n left: 50%;\\n transform: translate(-50%, -50%) scale(1);\\n display: flex;\\n align-items: center;\\n filter: url(#goo);\\n will-change: contents;\\n transition: transform 0.15s cubic-bezier(0.25, 1, 0.5, 1);\\n -webkit-tap-highlight-color: transparent;\\n cursor: pointer;\\n}\\n\\n.blob-button-wrapper:active {\\n transform: translate(-50%, -50%) scale(0.95);\\n}\\n\\n/* ── Main button ── */\\n.blob-button {\\n position: relative;\\n z-index: 2;\\n background: #000000;\\n color: #fff;\\n border: none;\\n border-radius: 999px;\\n height: 52px;\\n padding: 0 28px;\\n font-size: 15px;\\n font-weight: 600;\\n letter-spacing: 0.01em;\\n cursor: pointer;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n overflow: hidden;\\n flex-shrink: 0;\\n white-space: nowrap;\\n font-family: inherit;\\n transition: background 0.3s ease;\\n -webkit-tap-highlight-color: transparent;\\n outline: none;\\n}\\n\\n.blob-button:hover {\\n background: #222222;\\n}\\n\\n.blob-button:focus-visible {\\n outline: 3px solid rgba(0, 0, 0, 0.25);\\n outline-offset: 4px;\\n}\\n\\n/* ── Arrow pill ── */\\n.blob-button__pill {\\n position: relative;\\n z-index: 1;\\n background: #000000;\\n border-radius: 999px;\\n width: 52px;\\n height: 52px;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n flex-shrink: 0;\\n /* hidden behind button to start */\\n margin-left: -52px;\\n opacity: 0;\\n transition:\\n margin-left 0.72s cubic-bezier(0.34, 1.42, 0.64, 1) 0.04s,\\n opacity 0.3s ease 0.4s;\\n -webkit-tap-highlight-color: transparent;\\n}\\n\\n.blob-button__pill.is-entering {\\n opacity: 1;\\n margin-left: -20px;\\n transition:\\n margin-left 0.9s cubic-bezier(0.4, 0, 0.2, 1),\\n opacity 0.1s;\\n}\\n\\n.blob-button__pill.is-resting {\\n opacity: 1;\\n margin-left: 22px;\\n transition:\\n margin-left 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.05s,\\n opacity 0.1s;\\n}\\n\\n.blob-button__pill svg {\\n width: 20px;\\n height: 20px;\\n fill: #fff;\\n flex-shrink: 0;\\n transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\\n}\\n\\n.blob-button__pill.is-resting svg {\\n transform: translateX(2px);\\n}\\n\\n/* GOO filter hidden element */\\n.blob-button__svg-filter {\\n position: absolute;\\n width: 0;\\n height: 0;\\n overflow: hidden;\\n}\\n\\n/* Utility for screen readers */\\n.sr-only {\\n position: absolute;\\n width: 1px;\\n height: 1px;\\n overflow: hidden;\\n clip: rect(0, 0, 0, 0);\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Blob Button\\n \\n \\n \\n \\n\\n \\n \\n\\n

\\n

\\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 blobBtnWrapper = document.getElementById(\\\"gooShell\\\");\\nconst blobBtn = document.getElementById(\\\"blobBtn\\\");\\nconst iconPill = document.getElementById(\\\"iconPill\\\");\\n\\nlet enterTimeout;\\nlet leaveTimeout;\\n\\nfunction handleEnter() {\\n clearTimeout(leaveTimeout);\\n\\n blobBtn.setAttribute(\\\"aria-label\\\", \\\"Go\\\");\\n\\n iconPill.style.transition = \\\"\\\";\\n iconPill.style.marginLeft = \\\"\\\";\\n iconPill.style.opacity = \\\"\\\";\\n\\n iconPill.classList.remove(\\\"is-resting\\\");\\n iconPill.classList.add(\\\"is-entering\\\");\\n\\n enterTimeout = setTimeout(() => {\\n iconPill.classList.remove(\\\"is-entering\\\");\\n iconPill.classList.add(\\\"is-resting\\\");\\n }, 300);\\n}\\n\\nfunction handleLeave() {\\n clearTimeout(enterTimeout);\\n\\n blobBtn.setAttribute(\\\"aria-label\\\", \\\"Get Started\\\");\\n\\n iconPill.classList.remove(\\\"is-resting\\\");\\n iconPill.classList.remove(\\\"is-entering\\\");\\n}\\n\\nblobBtnWrapper.addEventListener(\\\"mouseenter\\\", handleEnter);\\nblobBtnWrapper.addEventListener(\\\"mouseleave\\\", handleLeave);\\n\\n// Touch support for mobile tactile experience\\nblobBtnWrapper.addEventListener(\\\"touchstart\\\", handleEnter, { passive: true });\\nblobBtnWrapper.addEventListener(\\\"touchend\\\", handleLeave, { passive: true });\\nblobBtnWrapper.addEventListener(\\\"touchcancel\\\", handleLeave, { passive: true });\\n\\n// Forward click events from wrapper/pill/gap to the main button\\nblobBtnWrapper.addEventListener(\\\"click\\\", (e) => {\\n if (!blobBtn.contains(e.target)) {\\n blobBtn.click();\\n }\\n});\",\"language\":\"javascript\"}]","template":"vanilla-ts","activeFile":"/index.js","viewMode":"both","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]"},"children":[]},{"id":"9e8d49a0-f233-4eed-bf4f-3d2389436ab7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"f34d4fb1-fd4b-4292-946a-0a60a80dfa5b","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"41800c76-9e24-4d0d-b87e-043e85891e58","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n\\n

\\n

\\n \\n\\n \\n

\\n \\n \\n

\\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"63953937-5e82-4d4a-a7a0-9cb75fa1efc3","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"1a0e2f85-d1e1-4aef-a772-59024d4e9859","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"2my9dcnjf\",\"name\":\"styles.css\",\"code\":\"*,\\n*::before,\\n*::after {\\n box-sizing: border-box;\\n margin: 0;\\n padding: 0;\\n}\\n\\nbody {\\n font-family:\\n Inter,\\n system-ui,\\n -apple-system,\\n sans-serif;\\n}\\n\\n.scene {\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n min-height: 100vh;\\n background: #ffffff;\\n}\\n\\n.stage {\\n position: relative;\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n width: 360px;\\n height: 120px;\\n}\\n\\n/* GOO filter shell — button + pill inside */\\n.blob-button-wrapper {\\n position: absolute;\\n top: 50%;\\n left: 50%;\\n transform: translate(-50%, -50%) scale(1);\\n display: flex;\\n align-items: center;\\n filter: url(#goo);\\n will-change: contents;\\n transition: transform 0.15s cubic-bezier(0.25, 1, 0.5, 1);\\n -webkit-tap-highlight-color: transparent;\\n cursor: pointer;\\n}\\n\\n.blob-button-wrapper:active {\\n transform: translate(-50%, -50%) scale(0.95);\\n}\\n\\n/* ── Main button ── */\\n.blob-button {\\n position: relative;\\n z-index: 2;\\n background: #000000;\\n color: #fff;\\n border: none;\\n border-radius: 999px;\\n height: 52px;\\n padding: 0 28px;\\n font-size: 15px;\\n font-weight: 600;\\n letter-spacing: 0.01em;\\n cursor: pointer;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n overflow: hidden;\\n flex-shrink: 0;\\n white-space: nowrap;\\n font-family: inherit;\\n transition: background 0.3s ease;\\n -webkit-tap-highlight-color: transparent;\\n outline: none;\\n}\\n\\n.blob-button:hover {\\n background: #222222;\\n}\\n\\n.blob-button:focus-visible {\\n outline: 3px solid rgba(0, 0, 0, 0.25);\\n outline-offset: 4px;\\n}\\n\\n/* ── Arrow pill ── */\\n.blob-button__pill {\\n position: relative;\\n z-index: 1;\\n background: #000000;\\n border-radius: 999px;\\n width: 52px;\\n height: 52px;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n flex-shrink: 0;\\n /* hidden behind button to start */\\n margin-left: -52px;\\n opacity: 0;\\n transition:\\n margin-left 0.72s cubic-bezier(0.34, 1.42, 0.64, 1) 0.04s,\\n opacity 0.3s ease 0.4s;\\n -webkit-tap-highlight-color: transparent;\\n}\\n\\n.blob-button__pill.is-entering {\\n opacity: 1;\\n margin-left: -20px;\\n transition:\\n margin-left 0.9s cubic-bezier(0.4, 0, 0.2, 1),\\n opacity 0.1s;\\n}\\n\\n.blob-button__pill.is-resting {\\n opacity: 1;\\n margin-left: 22px;\\n transition:\\n margin-left 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.05s,\\n opacity 0.1s;\\n}\\n\\n.blob-button__pill svg {\\n width: 20px;\\n height: 20px;\\n fill: #fff;\\n flex-shrink: 0;\\n transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\\n}\\n\\n.blob-button__pill.is-resting svg {\\n transform: translateX(2px);\\n}\\n\\n/* GOO filter hidden element */\\n.blob-button__svg-filter {\\n position: absolute;\\n width: 0;\\n height: 0;\\n overflow: hidden;\\n}\\n\\n/* Utility for screen readers */\\n.sr-only {\\n position: absolute;\\n width: 1px;\\n height: 1px;\\n overflow: hidden;\\n clip: rect(0, 0, 0, 0);\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"85bd084e-0600-4b67-b44a-8c942a5c3ab3","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 3: Add JS","styles":{}}],"children":[]},{"id":"439307af-13b7-4508-ac06-976258e65328","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.js\",\"code\":\"const blobBtnWrapper = document.getElementById(\\\"gooShell\\\");\\nconst blobBtn = document.getElementById(\\\"blobBtn\\\");\\nconst iconPill = document.getElementById(\\\"iconPill\\\");\\n\\nlet enterTimeout;\\nlet leaveTimeout;\\n\\nfunction handleEnter() {\\n clearTimeout(leaveTimeout);\\n\\n blobBtn.setAttribute(\\\"aria-label\\\", \\\"Go\\\");\\n\\n iconPill.style.transition = \\\"\\\";\\n iconPill.style.marginLeft = \\\"\\\";\\n iconPill.style.opacity = \\\"\\\";\\n\\n iconPill.classList.remove(\\\"is-resting\\\");\\n iconPill.classList.add(\\\"is-entering\\\");\\n\\n enterTimeout = setTimeout(() => {\\n iconPill.classList.remove(\\\"is-entering\\\");\\n iconPill.classList.add(\\\"is-resting\\\");\\n }, 300);\\n}\\n\\nfunction handleLeave() {\\n clearTimeout(enterTimeout);\\n\\n blobBtn.setAttribute(\\\"aria-label\\\", \\\"Get Started\\\");\\n\\n iconPill.classList.remove(\\\"is-resting\\\");\\n iconPill.classList.remove(\\\"is-entering\\\");\\n}\\n\\nblobBtnWrapper.addEventListener(\\\"mouseenter\\\", handleEnter);\\nblobBtnWrapper.addEventListener(\\\"mouseleave\\\", handleLeave);\\n\\n// Touch support for mobile tactile experience\\nblobBtnWrapper.addEventListener(\\\"touchstart\\\", handleEnter, { passive: true });\\nblobBtnWrapper.addEventListener(\\\"touchend\\\", handleLeave, { passive: true });\\nblobBtnWrapper.addEventListener(\\\"touchcancel\\\", handleLeave, { passive: true });\\n\\n// Forward click events from wrapper/pill/gap to the main button\\nblobBtnWrapper.addEventListener(\\\"click\\\", (e) => {\\n if (!blobBtn.contains(e.target)) {\\n blobBtn.click();\\n }\\n});\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c5399251-d0c5-4c06-9eb7-85df01a79348","type":"divider","props":{},"children":[]},{"id":"c24a2329-66ac-4d20-b857-75fc141d8ce7","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"c9e3c806-0870-4420-9d50-81b37d530d4d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Purpose\nThis component creates a black pill button with a gooey arrow pill. On hover, the arrow pill slides out from behind the main button and settles beside it with a liquid merge effect.","styles":{}}],"children":[]},{"id":"bc28ea25-3f5c-4cae-8736-c2fd57e57ce0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Structure Flow","styles":{}}],"children":[]},{"id":"44344f2d-46c6-4de4-a054-47cbb4371a8c","type":"procode","props":{"code":"Page\n├── hidden SVG goo filter\n└── scene\n └── stage\n └── blob-button-wrapper\n ├── main button\n └── arrow pill","language":"javascript","filename":"","files":"[{\"id\":\"oeadqehz0\",\"name\":\"code\",\"code\":\"Page\\n├── hidden SVG goo filter\\n└── scene\\n └── stage\\n └── blob-button-wrapper\\n ├── main button\\n └── arrow pill\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4722e990-00e5-4640-aba0-970ab73958ea","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"HTML Flow","styles":{}}],"children":[]},{"id":"34a85f05-bb26-4e89-b300-7dabde4115ef","type":"procode","props":{"code":"

\n \n\n

\n \n

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

\\n \\n\\n

\\n \\n

\\n

\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8d4d9823-2b7f-4ef8-9d2d-4029c7f6d7c0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The wrapper contains both shapes: the main button and the arrow pill.","styles":{}}],"children":[]},{"id":"22621b36-e40d-4b92-98ff-ce3e1b510d14","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The goo filter is applied to the wrapper, so both shapes visually blend together.","styles":{}}],"children":[]},{"id":"461b961f-e71a-4180-91cc-36cb6b4c9e55","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Goo Filter Flow","styles":{}}],"children":[]},{"id":"a072749e-9692-433b-8b56-17f54c3578cf","type":"procode","props":{"code":"\n \n \n \n","language":"javascript","filename":"","files":"[{\"id\":\"9ymmdyf7h\",\"name\":\"code\",\"code\":\"\\n \\n \\n \\n\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"771be5b4-b78b-4fc1-b6f2-cf8aec79e675","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Flow:","styles":{}}],"children":[]},{"id":"4d1703f6-1647-44b5-8d11-8b9b111a2c9f","type":"procode","props":{"code":"Button + pill\n↓\nBlur shape edges\n↓\nIncrease alpha contrast\n↓\nMerge nearby black shapes\n↓\nCreate gooey liquid connection","language":"javascript","filename":"","files":"[{\"id\":\"hayggcr2m\",\"name\":\"code\",\"code\":\"Button + pill\\n↓\\nBlur shape edges\\n↓\\nIncrease alpha contrast\\n↓\\nMerge nearby black shapes\\n↓\\nCreate gooey liquid connection\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d41eb7e3-7c20-4066-b1ea-fb17075a5051","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Scene Layout Flow","styles":{}}],"children":[]},{"id":"356037d8-8b2a-4273-b4ce-e0d1eced0964","type":"procode","props":{"code":".scene {\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n background: #ffffff;\n}","language":"javascript","filename":"","files":"[{\"id\":\"n2e4cv0xx\",\"name\":\"code\",\"code\":\".scene {\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n min-height: 100vh;\\n background: #ffffff;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9c40d62c-42e9-4d48-bf97-00e7f99d52fa","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The ","styles":{}},{"type":"text","text":".scene","styles":{"code":true}},{"type":"text","text":" centers the whole button in the viewport.","styles":{}}],"children":[]},{"id":"3c4e1a8a-4d3b-41b1-aab0-55b52f518a8f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Stage Flow","styles":{}}],"children":[]},{"id":"79f2cf7e-6e66-4502-9c0c-9c46cea5ab56","type":"procode","props":{"code":".stage {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 360px;\n height: 120px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"xgttcurld\",\"name\":\"code\",\"code\":\".stage {\\n position: relative;\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n width: 360px;\\n height: 120px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"244db9f7-00bb-46f7-b3c8-599f6b1e0367","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The ","styles":{}},{"type":"text","text":".stage","styles":{"code":true}},{"type":"text","text":" gives the button enough horizontal room for the arrow pill to slide out.","styles":{}}],"children":[]},{"id":"89c471b5-c129-4b95-8f42-a0340e3be26c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Wrapper Flow","styles":{}}],"children":[]},{"id":"1595a160-9a8f-48dc-a1cf-06e7776f33fe","type":"procode","props":{"code":".blob-button-wrapper {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) scale(1);\n display: flex;\n align-items: center;\n filter: url(#goo);\n cursor: pointer;\n}","language":"javascript","filename":"","files":"[{\"id\":\"p3a7h089t\",\"name\":\"code\",\"code\":\".blob-button-wrapper {\\n position: absolute;\\n top: 50%;\\n left: 50%;\\n transform: translate(-50%, -50%) scale(1);\\n display: flex;\\n align-items: center;\\n filter: url(#goo);\\n cursor: pointer;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5a0ae12a-a8d5-491d-b3c4-93ebdce67133","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The wrapper is centered and uses ","styles":{}},{"type":"text","text":"display: flex","styles":{"code":true}},{"type":"text","text":", so the button and pill sit in one horizontal row.","styles":{}}],"children":[]},{"id":"14654feb-d8e2-4953-9da9-1254ee00eabe","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The important part is:","styles":{}}],"children":[]},{"id":"467f1f56-3295-432d-a411-fd90501a0779","type":"procode","props":{"code":"filter: url(#goo);","language":"javascript","filename":"","files":"[{\"id\":\"03pi7vi9g\",\"name\":\"code\",\"code\":\"filter: url(#goo);\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d2d6020e-818a-4b25-8852-f34c040a7df9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"That applies the SVG goo filter to both the button and the pill.","styles":{}}],"children":[]},{"id":"c80d1e25-3d02-4691-9391-02d29e409b1d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Main Button Flow","styles":{}}],"children":[]},{"id":"190cc1d7-cfd0-45c8-b44a-dc94d9612059","type":"procode","props":{"code":".blob-button {\n position: relative;\n z-index: 2;\n background: #000000;\n color: #fff;\n border-radius: 999px;\n height: 52px;\n padding: 0 28px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"60hyj2gwm\",\"name\":\"code\",\"code\":\".blob-button {\\n position: relative;\\n z-index: 2;\\n background: #000000;\\n color: #fff;\\n border-radius: 999px;\\n height: 52px;\\n padding: 0 28px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8f9dc60f-2986-4880-a585-0bf51716e1a7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The main button stays above the pill with ","styles":{}},{"type":"text","text":"z-index: 2","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"c850823a-26d0-4c6e-aa9c-a2a986d09eef","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"It has a pill shape because of:","styles":{}}],"children":[]},{"id":"539bd2cd-1b34-4e14-a481-0a9de97f2dd6","type":"procode","props":{"code":"border-radius: 999px;","language":"javascript","filename":"","files":"[{\"id\":\"iq7rxuzj1\",\"name\":\"code\",\"code\":\"border-radius: 999px;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f91439d4-4d82-4e1f-98f8-827f857dc96c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Arrow Pill Start State","styles":{}}],"children":[]},{"id":"91853c04-4b91-4e3e-b833-e552995a83ec","type":"procode","props":{"code":".blob-button__pill {\n width: 52px;\n height: 52px;\n border-radius: 999px;\n margin-left: -52px;\n opacity: 0;\n}","language":"javascript","filename":"","files":"[{\"id\":\"w2hvef6cm\",\"name\":\"code\",\"code\":\".blob-button__pill {\\n width: 52px;\\n height: 52px;\\n border-radius: 999px;\\n margin-left: -52px;\\n opacity: 0;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"608f3cd5-a8ba-4891-abd3-0279395282c4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The arrow pill starts hidden behind the main button.","styles":{}}],"children":[]},{"id":"37ae183d-58f6-4d62-82a1-d9030f7eecdc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Flow:","styles":{}}],"children":[]},{"id":"c9737d3d-c444-485f-b80e-d49504206297","type":"procode","props":{"code":"width: 52px\nmargin-left: -52px\n↓\npill overlaps behind button\n↓\nopacity: 0\n↓\npill is hidden","language":"javascript","filename":"","files":"[{\"id\":\"gf6cap2x7\",\"name\":\"code\",\"code\":\"width: 52px\\nmargin-left: -52px\\n↓\\npill overlaps behind button\\n↓\\nopacity: 0\\n↓\\npill is hidden\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"17a5e952-b4a8-4436-9533-c87342bb6195","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Enter Animation Flow","styles":{}}],"children":[]},{"id":"5289cfb9-add9-41a3-a661-477002b875e2","type":"procode","props":{"code":".blob-button__pill.is-entering {\n opacity: 1;\n margin-left: -20px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"bxs1fwcqr\",\"name\":\"code\",\"code\":\".blob-button__pill.is-entering {\\n opacity: 1;\\n margin-left: -20px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0e6706b8-b27c-4d25-bdc2-713fbf994e59","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"When hover starts, JavaScript adds ","styles":{}},{"type":"text","text":".is-entering","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"881a358d-ecec-4873-be86-5bd080e99b96","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The pill becomes visible and moves slightly out from behind the button.","styles":{}}],"children":[]},{"id":"dd8098f5-0ca1-4f70-aff4-1bdfb7c2de01","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Resting Animation Flow","styles":{}}],"children":[]},{"id":"bf94dafe-2310-4615-84b4-147648b44fcf","type":"procode","props":{"code":".blob-button__pill.is-resting {\n opacity: 1;\n margin-left: 22px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"u487psake\",\"name\":\"code\",\"code\":\".blob-button__pill.is-resting {\\n opacity: 1;\\n margin-left: 22px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"58f0b3bd-2473-4375-bb5c-4decfb6b4e9a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"After ","styles":{}},{"type":"text","text":"300ms","styles":{"code":true}},{"type":"text","text":", JavaScript replaces ","styles":{}},{"type":"text","text":".is-entering","styles":{"code":true}},{"type":"text","text":" with ","styles":{}},{"type":"text","text":".is-resting","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"226af95e-103b-41c6-8cc4-7ab8c975a9c9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The pill moves fully to the right side.","styles":{}}],"children":[]},{"id":"38000a0f-71bd-4702-8dcf-567034807936","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Full Hover Flow","styles":{}}],"children":[]},{"id":"a18bf250-c1f0-4de3-8f14-7454b831f871","type":"procode","props":{"code":"Mouse enters wrapper\n↓\nhandleEnter() runs\n↓\nButton aria-label changes to \"Go\"\n↓\nPill removes resting state\n↓\nPill gets is-entering\n↓\nAfter 300ms\n↓\nPill removes is-entering\n↓\nPill gets is-resting\n↓\nPill settles beside button","language":"javascript","filename":"","files":"[{\"id\":\"we7ylkw67\",\"name\":\"code\",\"code\":\"Mouse enters wrapper\\n↓\\nhandleEnter() runs\\n↓\\nButton aria-label changes to \\\"Go\\\"\\n↓\\nPill removes resting state\\n↓\\nPill gets is-entering\\n↓\\nAfter 300ms\\n↓\\nPill removes is-entering\\n↓\\nPill gets is-resting\\n↓\\nPill settles beside button\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"19808c5a-0d4c-412e-bcee-c2e0fc0cd282","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"JavaScript Enter Flow","styles":{}}],"children":[]},{"id":"fdd3abac-78c7-4612-be8f-39009ffeb6b6","type":"procode","props":{"code":"function handleEnter() {\n clearTimeout(leaveTimeout);\n\n blobBtn.setAttribute(\"aria-label\", \"Go\");\n\n iconPill.style.transition = \"\";\n iconPill.style.marginLeft = \"\";\n iconPill.style.opacity = \"\";\n\n iconPill.classList.remove(\"is-resting\");\n iconPill.classList.add(\"is-entering\");\n\n enterTimeout = setTimeout(() => {\n iconPill.classList.remove(\"is-entering\");\n iconPill.classList.add(\"is-resting\");\n }, 300);\n}","language":"javascript","filename":"","files":"[{\"id\":\"uwykgb3yh\",\"name\":\"code\",\"code\":\"function handleEnter() {\\n clearTimeout(leaveTimeout);\\n\\n blobBtn.setAttribute(\\\"aria-label\\\", \\\"Go\\\");\\n\\n iconPill.style.transition = \\\"\\\";\\n iconPill.style.marginLeft = \\\"\\\";\\n iconPill.style.opacity = \\\"\\\";\\n\\n iconPill.classList.remove(\\\"is-resting\\\");\\n iconPill.classList.add(\\\"is-entering\\\");\\n\\n enterTimeout = setTimeout(() => {\\n iconPill.classList.remove(\\\"is-entering\\\");\\n iconPill.classList.add(\\\"is-resting\\\");\\n }, 300);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5707be03-3154-459a-a15e-a5c472e2b9b1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This function controls the two-step pill animation.","styles":{}}],"children":[]},{"id":"edbff353-a238-412a-9f1d-1815d11ccfd4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Leave Flow","styles":{}}],"children":[]},{"id":"e3994c30-e113-42cc-adde-42bfe48d3d89","type":"procode","props":{"code":"function handleLeave() {\n clearTimeout(enterTimeout);\n\n blobBtn.setAttribute(\"aria-label\", \"Get Started\");\n\n iconPill.classList.remove(\"is-resting\");\n iconPill.classList.remove(\"is-entering\");\n}","language":"javascript","filename":"","files":"[{\"id\":\"r1hy9l4d8\",\"name\":\"code\",\"code\":\"function handleLeave() {\\n clearTimeout(enterTimeout);\\n\\n blobBtn.setAttribute(\\\"aria-label\\\", \\\"Get Started\\\");\\n\\n iconPill.classList.remove(\\\"is-resting\\\");\\n iconPill.classList.remove(\\\"is-entering\\\");\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5586b5e9-b8ad-40af-bf5a-6038e449bdb1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"When the pointer leaves, the pill returns to its default CSS state:","styles":{}}],"children":[]},{"id":"eac3bebd-b18f-49d9-a36c-6e63781f873c","type":"procode","props":{"code":"margin-left: -52px\nopacity: 0","language":"javascript","filename":"","files":"[{\"id\":\"51pph2lna\",\"name\":\"code\",\"code\":\"margin-left: -52px\\nopacity: 0\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"836ef4b0-1e1d-4a81-a54a-20de0db9db58","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Touch Flow","styles":{}}],"children":[]},{"id":"ef663bed-a762-4530-99e3-3852fec4a012","type":"procode","props":{"code":"blobBtnWrapper.addEventListener(\"touchstart\", handleEnter, { passive: true });\nblobBtnWrapper.addEventListener(\"touchend\", handleLeave, { passive: true });\nblobBtnWrapper.addEventListener(\"touchcancel\", handleLeave, { passive: true });","language":"javascript","filename":"","files":"[{\"id\":\"pt1cqf6lw\",\"name\":\"code\",\"code\":\"blobBtnWrapper.addEventListener(\\\"touchstart\\\", handleEnter, { passive: true });\\nblobBtnWrapper.addEventListener(\\\"touchend\\\", handleLeave, { passive: true });\\nblobBtnWrapper.addEventListener(\\\"touchcancel\\\", handleLeave, { passive: true });\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f2136b03-e75b-4b23-bad2-15271daf0287","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This makes the same hover-like animation work on touch devices.","styles":{}}],"children":[]},{"id":"fdf75bce-91bd-43bb-9cc2-a414048ab22e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Click Forward Flow","styles":{}}],"children":[]},{"id":"61acafe1-8788-4adb-bb4c-668c4f62e3b5","type":"procode","props":{"code":"blobBtnWrapper.addEventListener(\"click\", (e) => {\n if (!blobBtn.contains(e.target)) {\n blobBtn.click();\n }\n});","language":"javascript","filename":"","files":"[{\"id\":\"o4wjwhqy0\",\"name\":\"code\",\"code\":\"blobBtnWrapper.addEventListener(\\\"click\\\", (e) => {\\n if (!blobBtn.contains(e.target)) {\\n blobBtn.click();\\n }\\n});\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5d83499e-fab3-4774-bdf1-4db251421f67","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The wrapper, arrow pill, and gap area forward clicks to the real button.","styles":{}}],"children":[]},{"id":"f16d547e-93a0-4ea0-a072-a0f9312c84f5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Flow:","styles":{}}],"children":[]},{"id":"eeff09a7-3817-4ed2-9941-2b308986df5d","type":"procode","props":{"code":"User clicks wrapper or pill\n↓\nCheck if click is outside real button\n↓\nTrigger blobBtn.click()\n↓\nMain button receives click behavior","language":"javascript","filename":"","files":"[{\"id\":\"ib65binw9\",\"name\":\"code\",\"code\":\"User clicks wrapper or pill\\n↓\\nCheck if click is outside real button\\n↓\\nTrigger blobBtn.click()\\n↓\\nMain button receives click behavior\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"908a1ea0-5cda-47a7-9a57-f332e2fb2bb7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Layer Flow","styles":{}}],"children":[]},{"id":"eff249e4-31bf-4af5-8c86-e2e1ecd8078b","type":"procode","props":{"code":"z-index: 2 → main button\nz-index: 1 → arrow pill\nfilter → wrapper merges both shapes","language":"javascript","filename":"","files":"[{\"id\":\"yzanxq3xu\",\"name\":\"code\",\"code\":\"z-index: 2 → main button\\nz-index: 1 → arrow pill\\nfilter → wrapper merges both shapes\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"344a2303-aecb-4357-97cc-64c507c1b03e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Animation Flow","styles":{}}],"children":[]},{"id":"d47c52fe-003d-4d68-b373-a6d443afc687","type":"procode","props":{"code":"Default\nButton visible\nPill hidden behind button\n\nHover\nPill appears behind button\nPill goo-connects with button\nPill slides to the right\n\nLeave\nPill returns behind button\nPill disappears","language":"javascript","filename":"","files":"[{\"id\":\"htb8udwgd\",\"name\":\"code\",\"code\":\"Default\\nButton visible\\nPill hidden behind button\\n\\nHover\\nPill appears behind button\\nPill goo-connects with button\\nPill slides to the right\\n\\nLeave\\nPill returns behind button\\nPill disappears\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"28470862-48d6-416a-8d4c-a80288427685","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]

Blob Get Started Button

Blob Get Started Button