Circle Text Rotation Button

[{"id":"4ab630b1-5b12-4874-befb-fd46b2813bf8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"f561f3ce-5161-4474-b98d-5e251c6ed662","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"* {\\n box-sizing: border-box;\\n}\\n\\nbody {\\n min-height: 100vh;\\n margin: 0;\\n display: grid;\\n place-items: center;\\n background: #ffffff;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.iris-orbit {\\n cursor: pointer;\\n border: none;\\n background: #5d3fd3;\\n color: #ffffff;\\n width: 100px;\\n height: 100px;\\n border-radius: 50%;\\n overflow: hidden;\\n position: relative;\\n display: grid;\\n place-content: center;\\n transition:\\n background 300ms,\\n transform 200ms;\\n font-weight: 600;\\n}\\n\\n.iris-orbit__text {\\n position: absolute;\\n inset: 0;\\n margin: 0;\\n animation: iris-orbit-rotation 8s linear infinite;\\n}\\n\\n.iris-orbit__text span {\\n position: absolute;\\n inset: 7px;\\n transform: rotate(calc(var(--angle) * 1deg));\\n transform-origin: center;\\n font-size: 10px;\\n line-height: 1;\\n}\\n\\n.iris-orbit__circle {\\n position: relative;\\n width: 40px;\\n height: 40px;\\n overflow: hidden;\\n background: #ffffff;\\n color: #5d3fd3;\\n border-radius: 50%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.iris-orbit__icon--copy {\\n position: absolute;\\n transform: translate(-150%, 150%);\\n}\\n\\n.iris-orbit:hover {\\n background: #000000;\\n transform: scale(1.05);\\n}\\n\\n.iris-orbit:hover .iris-orbit__icon {\\n color: #000000;\\n}\\n\\n.iris-orbit:hover .iris-orbit__icon:first-child {\\n transition: transform 0.3s ease-in-out;\\n transform: translate(150%, -150%);\\n}\\n\\n.iris-orbit:hover .iris-orbit__icon--copy {\\n transition: transform 0.3s ease-in-out 0.1s;\\n transform: translate(0);\\n}\\n\\n@keyframes iris-orbit-rotation {\\n to {\\n rotate: 360deg;\\n }\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .iris-orbit,\\n .iris-orbit__text,\\n .iris-orbit__icon:first-child,\\n .iris-orbit__icon--copy {\\n transition: none;\\n animation: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Circle Text Rotation Button\\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 irisButtons = document.querySelectorAll(\\\".iris-orbit\\\");\\n\\nirisButtons.forEach((button) => {\\n const textElement = button.querySelector(\\\".iris-orbit__text\\\");\\n\\n const textOne = button.dataset.textOne || \\\"IRIS\\\";\\n const textTwo = button.dataset.textTwo || \\\"BUTTON\\\";\\n const textThree = button.dataset.textThree || \\\"ACTION\\\";\\n\\n const fullText = `${textOne} • ${textTwo} • ${textThree} • `;\\n const letters = fullText.split(\\\"\\\");\\n const angleStep = 360 / letters.length;\\n\\n textElement.innerHTML = letters\\n .map((letter, index) => {\\n return `${letter}`;\\n })\\n .join(\\\"\\\");\\n});\",\"language\":\"javascript\"}]","template":"vanilla-ts","activeFile":"/index.html","viewMode":"both","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]"},"children":[]},{"id":"d754141a-df2f-44de-ad25-151e2eb53e92","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"7696c999-debb-4c83-a61c-7b3a5b1c2eb3","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"55ce8b1a-11d8-48ef-bcf8-44a233cd894c","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n

\\n \\n

\\n

\\n\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"290e7a7c-0ee1-4735-b176-121f6287043d","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"86db812b-91bc-4980-8abe-f26475e60d59","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"2my9dcnjf\",\"name\":\"styles.css\",\"code\":\"* {\\n box-sizing: border-box;\\n}\\n\\nhtml,\\nbody {\\n min-height: 100%;\\n}\\n\\nbody {\\n margin: 0;\\n background: #111111;\\n font-family: \\\"Inter\\\", Arial, Helvetica, sans-serif;\\n}\\n\\n.page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\\n\\n.loader-wrapper {\\n position: relative;\\n width: 180px;\\n height: 180px;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n color: #ffffff;\\n user-select: none;\\n}\\n\\n.loader-text {\\n position: relative;\\n z-index: 1;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n font-size: 1.2em;\\n font-weight: 300;\\n}\\n\\n.loader-letter {\\n display: inline-block;\\n opacity: 0.4;\\n transform: translateY(0);\\n animation: loader-letter-anim 2s infinite;\\n animation-delay: var(--delay);\\n}\\n\\n.loader {\\n position: absolute;\\n inset: 0;\\n width: 100%;\\n aspect-ratio: 1 / 1;\\n border-radius: 50%;\\n background-color: transparent;\\n animation: loader-rotate 2s linear infinite;\\n z-index: 0;\\n}\\n\\n@keyframes loader-rotate {\\n 0% {\\n transform: rotate(90deg);\\n box-shadow:\\n 0 10px 20px 0 #ffffff inset,\\n 0 20px 30px 0 #ad5fff inset,\\n 0 60px 60px 0 #471eec inset;\\n }\\n\\n 50% {\\n transform: rotate(270deg);\\n box-shadow:\\n 0 10px 20px 0 #ffffff inset,\\n 0 20px 10px 0 #d60a47 inset,\\n 0 40px 60px 0 #311e80 inset;\\n }\\n\\n 100% {\\n transform: rotate(450deg);\\n box-shadow:\\n 0 10px 20px 0 #ffffff inset,\\n 0 20px 30px 0 #ad5fff inset,\\n 0 60px 60px 0 #471eec inset;\\n }\\n}\\n\\n@keyframes loader-letter-anim {\\n 0%,\\n 100% {\\n opacity: 0.4;\\n transform: translateY(0);\\n }\\n\\n 20% {\\n opacity: 1;\\n transform: scale(1.15);\\n }\\n\\n 40% {\\n opacity: 0.7;\\n transform: translateY(0);\\n }\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .loader,\\n .loader-letter {\\n animation: none;\\n }\\n\\n .loader-letter {\\n opacity: 1;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fef7272c-346b-4b78-9489-de718a4ec2de","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 3: Add HTML","styles":{}}],"children":[]},{"id":"927b2c7b-a8e9-4aa2-8974-00f31316632c","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"pru4ysuko\",\"name\":\"index.js\",\"code\":\"const loaderText = document.querySelector(\\\".loader-text\\\");\\nconst text = loaderText.dataset.text || \\\"Text\\\";\\n\\nloaderText.textContent = \\\"\\\";\\n\\ntext.split(\\\"\\\").forEach(function (letter, index) {\\n const span = document.createElement(\\\"span\\\");\\n\\n span.className = \\\"loader-letter\\\";\\n span.textContent = letter;\\n span.style.setProperty(\\\"--delay\\\", `${index * 0.1}s`);\\n\\n loaderText.appendChild(span);\\n});\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"af4160ec-fa6f-46b0-a3d4-1a21f72f29ab","type":"divider","props":{},"children":[]},{"id":"a58eec46-3fb0-4bff-af88-0e055ce1e30a","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"0927e351-fa7b-4751-ab8f-d4b8f935dfdc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Now the button supports 3 different text values.","styles":{}}],"children":[]},{"id":"f9942e93-27c0-4d02-9340-eb78e16b171e","type":"procode","props":{"code":"data-text-one=\"IRIS\"\ndata-text-two=\"BUTTON\"\ndata-text-three=\"ACTION\"","language":"javascript","filename":"","files":"[{\"id\":\"3h9rc2omk\",\"name\":\"code\",\"code\":\"data-text-one=\\\"IRIS\\\"\\ndata-text-two=\\\"BUTTON\\\"\\ndata-text-three=\\\"ACTION\\\"\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ac3e37f5-8a0f-41f7-aac0-4055495a406f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"JavaScript reads all 3 values.","styles":{}}],"children":[]},{"id":"986a1f42-fb19-4eac-8a59-b2e8c892dc8e","type":"procode","props":{"code":"const textOne = button.dataset.textOne || \"IRIS\";\nconst textTwo = button.dataset.textTwo || \"BUTTON\";\nconst textThree = button.dataset.textThree || \"ACTION\";","language":"javascript","filename":"","files":"[{\"id\":\"9mirzfsp0\",\"name\":\"code\",\"code\":\"const textOne = button.dataset.textOne || \\\"IRIS\\\";\\nconst textTwo = button.dataset.textTwo || \\\"BUTTON\\\";\\nconst textThree = button.dataset.textThree || \\\"ACTION\\\";\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2cc740d1-58d7-46f8-acc2-7deb0f8893e3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Then the 3 text values are joined into one circular sentence.","styles":{}}],"children":[]},{"id":"bc758ab4-f819-4231-9cb0-7863b19156e2","type":"procode","props":{"code":"const fullText = `${textOne} • ${textTwo} • ${textThree} • `;","language":"javascript","filename":"","files":"[{\"id\":\"ru5kzn2kc\",\"name\":\"code\",\"code\":\"const fullText = `${textOne} • ${textTwo} • ${textThree} • `;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6d1041d9-c237-414c-bad8-9ef53f5e4510","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"So the rotating text becomes:","styles":{}}],"children":[]},{"id":"349a70c2-56e1-436d-b8f2-125668b45ec1","type":"procode","props":{"code":"IRIS • BUTTON • ACTION •","language":"javascript","filename":"","files":"[{\"id\":\"zmq3ndckx\",\"name\":\"code\",\"code\":\"IRIS • BUTTON • ACTION •\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"51552912-0b21-44ef-b672-2a9040ea867a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Auto Letter Flow\n\nJavaScript splits the full text into characters.","styles":{}}],"children":[]},{"id":"3c52b6c2-95b8-46de-81cc-9af153dadc26","type":"procode","props":{"code":"const letters = fullText.split(\"\");","language":"javascript","filename":"","files":"[{\"id\":\"govf2ygny\",\"name\":\"code\",\"code\":\"const letters = fullText.split(\\\"\\\");\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6e458a69-6920-4bfe-a62b-a3342da40987","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Then it calculates the spacing automatically.","styles":{}}],"children":[]},{"id":"cf9599ae-8b35-42d8-96bb-3ff651d8c321","type":"procode","props":{"code":"const angleStep = 360 / letters.length;","language":"javascript","filename":"","files":"[{\"id\":\"l4df4p120\",\"name\":\"code\",\"code\":\"const angleStep = 360 / letters.length;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d68247eb-7862-454c-bfd9-5f82154f52f9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This means you can change the 3 text values without manually fixing the rotation.","styles":{}}],"children":[]},{"id":"9a60c9e4-712f-4dc0-8331-b0ca27f1882e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"5da97e8b-620f-40a8-8466-1159724bb92b","type":"procode","props":{"code":"data-text-one=\"START\"\ndata-text-two=\"CREATE\"\ndata-text-three=\"BUILD\"","language":"javascript","filename":"","files":"[{\"id\":\"0490qpjzi\",\"name\":\"code\",\"code\":\"data-text-one=\\\"START\\\"\\ndata-text-two=\\\"CREATE\\\"\\ndata-text-three=\\\"BUILD\\\"\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b81ee2b6-6934-4dbf-9d6a-0b3709e41975","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The circle will automatically become:","styles":{}}],"children":[]},{"id":"bb3b155d-ddfc-4a7b-ab7a-532425aab3a9","type":"procode","props":{"code":"START • CREATE • BUILD •","language":"javascript","filename":"","files":"[{\"id\":\"e16cu55ev\",\"name\":\"code\",\"code\":\"START • CREATE • BUILD •\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bc90d7cc-3f20-4695-84c2-244fc25fabcb","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Style Flow\n\nThe iris color stays on the main circle.","styles":{}}],"children":[]},{"id":"83d62325-eb31-4f3f-8f5f-8f09c5bb6ac7","type":"procode","props":{"code":"background: #5d3fd3;","language":"javascript","filename":"","files":"[{\"id\":\"danlyme1z\",\"name\":\"code\",\"code\":\"background: #5d3fd3;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"dd737c8e-bcf9-4cd9-b96b-3a137ae8bf6a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The center circle stays white, and the arrow keeps the iris color.","styles":{}}],"children":[]},{"id":"6b34c7d2-4d63-4b76-93ab-59ab0d85f5af","type":"procode","props":{"code":"background: #ffffff;\ncolor: #5d3fd3;","language":"javascript","filename":"","files":"[{\"id\":\"tb0xtlis6\",\"name\":\"code\",\"code\":\"background: #ffffff;\\ncolor: #5d3fd3;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"374a1702-32e4-4fb0-894f-558d6d626bda","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Flow\n\nOn hover, the outer button turns black and scales slightly.","styles":{}}],"children":[]},{"id":"c9b15c00-81c4-46ee-97ec-f7af47ddcf9e","type":"procode","props":{"code":".iris-orbit:hover {\n background: #000000;\n transform: scale(1.05);\n}","language":"javascript","filename":"","files":"[{\"id\":\"um7la4dw2\",\"name\":\"code\",\"code\":\".iris-orbit:hover {\\n background: #000000;\\n transform: scale(1.05);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7898dca6-8e52-4aa6-ace8-f2df105fa5cb","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The first arrow moves out, then the copied arrow slides into the center.","styles":{}}],"children":[]},{"id":"8223fc4a-beaf-4dd1-81b4-15109af0fbdc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]