Hover Reveal Pill Nav

[{"id":"503d4c10-7380-421c-9a59-7b14bf313b47","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"436dfc6c-95e5-4c8d-bbd0-0d766757016a","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"*,\\n*::before,\\n*::after {\\n box-sizing: border-box;\\n}\\n\\n* {\\n margin: 0;\\n padding: 0;\\n}\\n\\nhtml,\\nbody {\\n min-height: 100%;\\n}\\n\\nbody {\\n font-family: sans-serif;\\n background: #07080a;\\n}\\n\\na {\\n color: inherit;\\n text-decoration: none;\\n}\\n\\nul {\\n list-style: none;\\n}\\n\\n.preview {\\n min-height: 100vh;\\n width: 100%;\\n display: flex;\\n justify-content: center;\\n align-items: flex-start;\\n padding: 32px 24px;\\n}\\n\\n.pill-nav {\\n width: min(100%, 690px);\\n}\\n\\n.pill-nav__list {\\n --nav-padding: 7px;\\n\\n position: relative;\\n display: flex;\\n align-items: center;\\n width: 100%;\\n min-height: 92px;\\n padding: var(--nav-padding);\\n border-radius: 999px;\\n background: #f2f2f2;\\n overflow: hidden;\\n isolation: isolate;\\n}\\n\\n.pill-nav__item {\\n position: relative;\\n z-index: 2;\\n flex: 1 1 0;\\n min-width: 0;\\n height: 78px;\\n mix-blend-mode: difference;\\n}\\n\\n.pill-nav__link {\\n position: relative;\\n z-index: 3;\\n width: 100%;\\n height: 100%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n padding: 0 14px;\\n border-radius: 999px;\\n font-size: 20px;\\n font-weight: normal;\\n line-height: 1;\\n text-transform: uppercase;\\n white-space: nowrap;\\n user-select: none;\\n cursor: pointer;\\n\\n color: #ffffff;\\n\\n transition: transform 180ms ease;\\n}\\n\\n.pill-nav__link:active {\\n transform: scale(0.97);\\n}\\n\\n.pill-nav__link:focus-visible {\\n outline: 2px solid #111111;\\n outline-offset: -8px;\\n}\\n\\n.pill-nav__cursor {\\n position: absolute;\\n z-index: 1;\\n top: var(--nav-padding);\\n left: 0;\\n width: 0;\\n height: calc(100% - (var(--nav-padding) * 2));\\n border-radius: 999px;\\n background: #000000;\\n opacity: 0;\\n pointer-events: none;\\n transform: translateX(0);\\n transition:\\n transform 430ms cubic-bezier(0.16, 1, 0.3, 1),\\n width 430ms cubic-bezier(0.16, 1, 0.3, 1),\\n opacity 180ms ease;\\n}\\n\\n.pill-nav__list.is-hovering .pill-nav__cursor {\\n opacity: 1;\\n}\\n\\n@media (max-width: 720px) {\\n .preview {\\n padding: 24px 16px;\\n }\\n\\n .pill-nav__list {\\n min-height: 72px;\\n }\\n\\n .pill-nav__item {\\n height: 58px;\\n }\\n\\n .pill-nav__link {\\n padding: 0 8px;\\n font-size: 14px;\\n }\\n}\\n\\n@media (max-width: 480px) {\\n .pill-nav__list {\\n min-height: 58px;\\n }\\n\\n .pill-nav__item {\\n height: 44px;\\n }\\n\\n .pill-nav__link {\\n padding: 0 4px;\\n font-size: 10px;\\n }\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .pill-nav__cursor,\\n .pill-nav__link {\\n transition: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Hover Reveal Pill Nav\\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 navList = document.querySelector(\\\"#navList\\\");\\nconst navCursor = document.querySelector(\\\"#navCursor\\\");\\nconst navItems = document.querySelectorAll(\\\".pill-nav__item\\\");\\n\\nfunction moveCursorToItem(item) {\\n if (!item || !navList || !navCursor) return;\\n\\n const left = item.offsetLeft;\\n const width = item.offsetWidth;\\n\\n navCursor.style.width = `${width}px`;\\n navCursor.style.transform = `translateX(${left}px)`;\\n navList.classList.add(\\\"is-hovering\\\");\\n\\n navItems.forEach((navItem) => {\\n navItem.classList.remove(\\\"is-active\\\");\\n });\\n\\n item.classList.add(\\\"is-active\\\");\\n}\\n\\nfunction resetNav() {\\n if (!navList) return;\\n\\n navList.classList.remove(\\\"is-hovering\\\");\\n\\n navItems.forEach((navItem) => {\\n navItem.classList.remove(\\\"is-active\\\");\\n });\\n}\\n\\nnavItems.forEach((item) => {\\n item.addEventListener(\\\"mouseenter\\\", () => {\\n moveCursorToItem(item);\\n });\\n\\n item.addEventListener(\\\"touchstart\\\", () => {\\n moveCursorToItem(item);\\n });\\n\\n const link = item.querySelector(\\\".pill-nav__link\\\");\\n\\n if (link) {\\n link.addEventListener(\\\"focus\\\", () => {\\n moveCursorToItem(item);\\n });\\n }\\n});\\n\\nnavList.addEventListener(\\\"mouseleave\\\", resetNav);\\n\\nnavList.addEventListener(\\\"focusout\\\", (event) => {\\n if (!navList.contains(event.relatedTarget)) {\\n resetNav();\\n }\\n});\\n\\nwindow.addEventListener(\\\"resize\\\", resetNav);\",\"language\":\"javascript\"}]","template":"vanilla-ts","activeFile":"/index.js","showCode":"true","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]","splitRatio":"50","mobileSplitRatio":"50"},"children":[]},{"id":"4dc77774-ea8b-4500-8984-0bbd7773f975","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"527787ec-50cd-4999-a8e7-b7d0deec494d","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"af84082b-485e-4d38-a366-cc14292131ea","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6cec0035-c066-42e0-bfb0-0a7f80653f70","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"182832b2-452c-4069-a5c2-ac7b3164b860","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"2my9dcnjf\",\"name\":\"styles.css\",\"code\":\"*,\\n*::before,\\n*::after {\\n box-sizing: border-box;\\n}\\n\\n* {\\n margin: 0;\\n padding: 0;\\n}\\n\\nhtml,\\nbody {\\n min-height: 100%;\\n}\\n\\nbody {\\n font-family: sans-serif;\\n background: #07080a;\\n}\\n\\na {\\n color: inherit;\\n text-decoration: none;\\n}\\n\\nul {\\n list-style: none;\\n}\\n\\n.preview {\\n min-height: 100vh;\\n width: 100%;\\n display: flex;\\n justify-content: center;\\n align-items: flex-start;\\n padding: 32px 24px;\\n}\\n\\n.pill-nav {\\n width: min(100%, 690px);\\n}\\n\\n.pill-nav__list {\\n --nav-padding: 7px;\\n\\n position: relative;\\n display: flex;\\n align-items: center;\\n width: 100%;\\n min-height: 92px;\\n padding: var(--nav-padding);\\n border-radius: 999px;\\n background: #f2f2f2;\\n overflow: hidden;\\n isolation: isolate;\\n}\\n\\n.pill-nav__item {\\n position: relative;\\n z-index: 2;\\n flex: 1 1 0;\\n min-width: 0;\\n height: 78px;\\n mix-blend-mode: difference;\\n}\\n\\n.pill-nav__link {\\n position: relative;\\n z-index: 3;\\n width: 100%;\\n height: 100%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n padding: 0 14px;\\n border-radius: 999px;\\n font-size: 20px;\\n font-weight: normal;\\n line-height: 1;\\n text-transform: uppercase;\\n white-space: nowrap;\\n user-select: none;\\n cursor: pointer;\\n\\n color: #ffffff;\\n\\n transition: transform 180ms ease;\\n}\\n\\n.pill-nav__link:active {\\n transform: scale(0.97);\\n}\\n\\n.pill-nav__link:focus-visible {\\n outline: 2px solid #111111;\\n outline-offset: -8px;\\n}\\n\\n.pill-nav__cursor {\\n position: absolute;\\n z-index: 1;\\n top: var(--nav-padding);\\n left: 0;\\n width: 0;\\n height: calc(100% - (var(--nav-padding) * 2));\\n border-radius: 999px;\\n background: #000000;\\n opacity: 0;\\n pointer-events: none;\\n transform: translateX(0);\\n transition:\\n transform 430ms cubic-bezier(0.16, 1, 0.3, 1),\\n width 430ms cubic-bezier(0.16, 1, 0.3, 1),\\n opacity 180ms ease;\\n}\\n\\n.pill-nav__list.is-hovering .pill-nav__cursor {\\n opacity: 1;\\n}\\n\\n@media (max-width: 720px) {\\n .preview {\\n padding: 24px 16px;\\n }\\n\\n .pill-nav__list {\\n min-height: 72px;\\n }\\n\\n .pill-nav__item {\\n height: 58px;\\n }\\n\\n .pill-nav__link {\\n padding: 0 8px;\\n font-size: 14px;\\n }\\n}\\n\\n@media (max-width: 480px) {\\n .pill-nav__list {\\n min-height: 58px;\\n }\\n\\n .pill-nav__item {\\n height: 44px;\\n }\\n\\n .pill-nav__link {\\n padding: 0 4px;\\n font-size: 10px;\\n }\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .pill-nav__cursor,\\n .pill-nav__link {\\n transition: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bf93b804-3ef0-4e6e-b37f-fc8e0f0e39d5","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 3: Add JS","styles":{}}],"children":[]},{"id":"6f24b618-a01a-41e5-8edd-58a7ed0f0b8f","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.js\",\"code\":\"const navList = document.querySelector(\\\"#navList\\\");\\nconst navCursor = document.querySelector(\\\"#navCursor\\\");\\nconst navItems = document.querySelectorAll(\\\".pill-nav__item\\\");\\n\\nfunction moveCursorToItem(item) {\\n if (!item || !navList || !navCursor) return;\\n\\n const left = item.offsetLeft;\\n const width = item.offsetWidth;\\n\\n navCursor.style.width = `${width}px`;\\n navCursor.style.transform = `translateX(${left}px)`;\\n navList.classList.add(\\\"is-hovering\\\");\\n\\n navItems.forEach((navItem) => {\\n navItem.classList.remove(\\\"is-active\\\");\\n });\\n\\n item.classList.add(\\\"is-active\\\");\\n}\\n\\nfunction resetNav() {\\n if (!navList) return;\\n\\n navList.classList.remove(\\\"is-hovering\\\");\\n\\n navItems.forEach((navItem) => {\\n navItem.classList.remove(\\\"is-active\\\");\\n });\\n}\\n\\nnavItems.forEach((item) => {\\n item.addEventListener(\\\"mouseenter\\\", () => {\\n moveCursorToItem(item);\\n });\\n\\n item.addEventListener(\\\"touchstart\\\", () => {\\n moveCursorToItem(item);\\n });\\n\\n const link = item.querySelector(\\\".pill-nav__link\\\");\\n\\n if (link) {\\n link.addEventListener(\\\"focus\\\", () => {\\n moveCursorToItem(item);\\n });\\n }\\n});\\n\\nnavList.addEventListener(\\\"mouseleave\\\", resetNav);\\n\\nnavList.addEventListener(\\\"focusout\\\", (event) => {\\n if (!navList.contains(event.relatedTarget)) {\\n resetNav();\\n }\\n});\\n\\nwindow.addEventListener(\\\"resize\\\", resetNav);\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0a71b01d-838a-4273-9484-2a7d9581dc25","type":"divider","props":{},"children":[]},{"id":"759880af-e898-49ee-b4ad-766d406b69b3","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"0b5e59e4-c479-4cd8-ba70-ee469d910e77","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Style\n","styles":{"bold":true}},{"type":"text","text":"The nav uses a dark page background, a light pill container, uppercase menu text, and a black rounded cursor behind each item.","styles":{}}],"children":[]},{"id":"1d91fca9-29e1-41f2-b41d-cbb94a13e0e4","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Layout\n","styles":{"bold":true}},{"type":"text","text":"The component is centered horizontally near the top using ","styles":{}},{"type":"text","text":".preview","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"93b33287-4c06-4ee8-ac56-0a3b8b1d1d84","type":"procode","props":{"code":".preview {\n min-height: 100vh;\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: flex-start;\n padding: 32px 24px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"qimy0agoy\",\"name\":\"code\",\"code\":\".preview {\\n min-height: 100vh;\\n width: 100%;\\n display: flex;\\n justify-content: center;\\n align-items: flex-start;\\n padding: 32px 24px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3f6973b8-47fe-4209-931b-59fa2c5780f0","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover\n","styles":{"bold":true}},{"type":"text","text":"When hovering a nav item, the cursor moves to that item and matches its width.","styles":{}}],"children":[]},{"id":"4de37e5c-1a67-4dee-8b62-cec7c219354d","type":"procode","props":{"code":"navCursor.style.width = `${width}px`;\nnavCursor.style.transform = `translateX(${left}px)`;\nnavList.classList.add(\"is-hovering\");","language":"javascript","filename":"","files":"[{\"id\":\"l4b71swxw\",\"name\":\"code\",\"code\":\"navCursor.style.width = `${width}px`;\\nnavCursor.style.transform = `translateX(${left}px)`;\\nnavList.classList.add(\\\"is-hovering\\\");\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7cfe2976-851a-49c5-aff2-81f9dd07d910","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Active\n","styles":{"bold":true}},{"type":"text","text":"When clicking a link, the text scales down slightly.","styles":{}}],"children":[]},{"id":"528f1a76-378c-4036-8401-8966bd08a3b1","type":"procode","props":{"code":".pill-nav__link:active {\n transform: scale(0.97);\n}","language":"javascript","filename":"","files":"[{\"id\":\"s2hpw8zd2\",\"name\":\"code\",\"code\":\".pill-nav__link:active {\\n transform: scale(0.97);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"60666962-d94e-4b69-89be-4f5f1ca43aaa","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Animation\n","styles":{"bold":true}},{"type":"text","text":"The cursor uses CSS transition for smooth movement and width changes.","styles":{}}],"children":[]},{"id":"cc4a26e7-21d4-4ff7-9876-c7f4d1c8d9dd","type":"procode","props":{"code":"transition:\n transform 430ms cubic-bezier(0.16, 1, 0.3, 1),\n width 430ms cubic-bezier(0.16, 1, 0.3, 1),\n opacity 180ms ease;","language":"javascript","filename":"","files":"[{\"id\":\"85oaocbia\",\"name\":\"code\",\"code\":\"transition:\\n transform 430ms cubic-bezier(0.16, 1, 0.3, 1),\\n width 430ms cubic-bezier(0.16, 1, 0.3, 1),\\n opacity 180ms ease;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2773223d-830a-4719-86a6-9f958bad43f7","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Duration\n","styles":{"bold":true}},{"type":"text","text":"Change ","styles":{}},{"type":"text","text":"430ms","styles":{"code":true}},{"type":"text","text":" to make the cursor movement faster or slower.","styles":{}}],"children":[]},{"id":"516ea02f-c925-4857-baa2-eacd2125df20","type":"procode","props":{"code":"transform 430ms cubic-bezier(0.16, 1, 0.3, 1),\nwidth 430ms cubic-bezier(0.16, 1, 0.3, 1),","language":"javascript","filename":"","files":"[{\"id\":\"iq5bz0ix7\",\"name\":\"code\",\"code\":\"transform 430ms cubic-bezier(0.16, 1, 0.3, 1),\\nwidth 430ms cubic-bezier(0.16, 1, 0.3, 1),\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"86a664e6-cd80-4853-9b3c-44c570995e4b","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Color\n","styles":{"bold":true}},{"type":"text","text":"Change the nav background here:","styles":{}}],"children":[]},{"id":"ea0855f3-97fe-4671-ab4a-1578c809e9b1","type":"procode","props":{"code":"background: #f2f2f2;","language":"javascript","filename":"","files":"[{\"id\":\"ceeof7bfy\",\"name\":\"code\",\"code\":\"background: #f2f2f2;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2d50a89b-fb0e-486c-8148-f6c6401bc08e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the cursor color here:","styles":{}}],"children":[]},{"id":"a716f9f4-a06d-475c-8686-4b26ea36cf3e","type":"procode","props":{"code":"background: #000000;","language":"javascript","filename":"","files":"[{\"id\":\"3jcehgdk0\",\"name\":\"code\",\"code\":\"background: #000000;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e2524f01-07e9-465f-a078-f3c9341beb35","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the page background here:","styles":{}}],"children":[]},{"id":"e6dbdeed-97af-4667-835b-00d05c558b6d","type":"procode","props":{"code":"background: #07080a;","language":"javascript","filename":"","files":"[{\"id\":\"ll9rs7jvr\",\"name\":\"code\",\"code\":\"background: #07080a;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6c5de937-464c-41a4-917c-a7e76c66022f","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text / Content\n","styles":{"bold":true}},{"type":"text","text":"Change the nav labels directly in ","styles":{}},{"type":"text","text":"/index.html","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"b75ff81d-8000-43bf-8d48-c50b40359663","type":"procode","props":{"code":"Pricing","language":"javascript","filename":"","files":"[{\"id\":\"sxa4wc91m\",\"name\":\"code\",\"code\":\"Pricing\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"87bfb9e3-ffa1-4573-bca3-50a38b559f1a","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"JavaScript Logic\n","styles":{"bold":true}},{"type":"text","text":"The cursor position uses ","styles":{}},{"type":"text","text":"offsetLeft","styles":{"code":true}},{"type":"text","text":" and ","styles":{}},{"type":"text","text":"offsetWidth","styles":{"code":true}},{"type":"text","text":", so it follows the exact item size.","styles":{}}],"children":[]},{"id":"a2b95f12-c8bd-4ca3-acfc-f43d368ab7b1","type":"procode","props":{"code":"const left = item.offsetLeft;\nconst width = item.offsetWidth;","language":"javascript","filename":"","files":"[{\"id\":\"twqx4fkv4\",\"name\":\"code\",\"code\":\"const left = item.offsetLeft;\\nconst width = item.offsetWidth;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6d9c46e1-2b31-4ffe-b007-76206dc10549","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Responsive\n","styles":{"bold":true}},{"type":"text","text":"The nav becomes smaller on tablet and mobile using media queries.","styles":{}}],"children":[]},{"id":"9b58af38-3307-4b35-9ea3-4fc5794428a5","type":"procode","props":{"code":"@media (max-width: 720px) {\n .pill-nav__link {\n padding: 0 8px;\n font-size: 14px;\n }\n}","language":"javascript","filename":"","files":"[{\"id\":\"ii3eff2rx\",\"name\":\"code\",\"code\":\"@media (max-width: 720px) {\\n .pill-nav__link {\\n padding: 0 8px;\\n font-size: 14px;\\n }\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d1585337-69f0-4b00-9f31-7824fecbd5b5","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Reduced Motion\n","styles":{"bold":true}},{"type":"text","text":"Motion is disabled for users who prefer reduced motion.","styles":{}}],"children":[]},{"id":"b2851054-93a8-45ec-940f-31efab9b6adf","type":"procode","props":{"code":"@media (prefers-reduced-motion: reduce) {\n .pill-nav__cursor,\n .pill-nav__link {\n transition: none;\n }\n}","language":"javascript","filename":"","files":"[{\"id\":\"hf03n6n0e\",\"name\":\"code\",\"code\":\"@media (prefers-reduced-motion: reduce) {\\n .pill-nav__cursor,\\n .pill-nav__link {\\n transition: none;\\n }\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d1a5d705-90f1-4480-8b60-db53df6f6aa0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]