Scrambel Hover List Text

[{"id":"9f85249d-4b39-4087-9721-6f719baf662c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"ed2ae143-f522-4449-b3db-b5c151dbb19c","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"* {\\n box-sizing: border-box;\\n}\\n\\nbody {\\n margin: 0;\\n background: #000000;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.cipher-page {\\n min-height: 100vh;\\n overflow: hidden;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.cipher-stack {\\n width: 100%;\\n padding: 0 4vw;\\n display: flex;\\n flex-direction: column;\\n gap: 16px;\\n}\\n\\n.cipher-title {\\n position: relative;\\n display: flex;\\n align-items: center;\\n\\n width: 100%;\\n max-width: 100vw;\\n margin: 0;\\n padding: 12px 0;\\n\\n overflow: hidden;\\n cursor: pointer;\\n\\n color: rgba(216, 180, 254, 0.16);\\n font-size: clamp(24px, 5vw, 64px);\\n font-weight: 800;\\n line-height: 1;\\n letter-spacing: -0.06em;\\n white-space: nowrap;\\n word-break: break-word;\\n\\n border-bottom: 1px solid rgba(216, 180, 254, 0.18);\\n\\n background-image: linear-gradient(90deg, #22d3ee, #f472b6, #a78bfa);\\n background-repeat: no-repeat;\\n background-size: 0% 100%;\\n background-clip: text;\\n -webkit-background-clip: text;\\n\\n opacity: 0.7;\\n transform: scale(0.95);\\n\\n transition:\\n opacity 600ms cubic-bezier(0.34, 1.56, 0.64, 1),\\n transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1),\\n background-size 1400ms cubic-bezier(0.22, 1, 0.36, 1);\\n}\\n\\n.cipher-title.is-loaded {\\n opacity: 1;\\n transform: scale(1);\\n background-size: 100% 100%;\\n}\\n\\n.cipher-base {\\n position: relative;\\n z-index: 1;\\n}\\n\\n.cipher-highlight {\\n position: absolute;\\n inset: 0;\\n z-index: 2;\\n\\n display: flex;\\n align-items: center;\\n\\n width: 100%;\\n height: 100%;\\n\\n overflow: hidden;\\n\\n background: #8b5cf6;\\n color: #f8fafc;\\n\\n font: inherit;\\n letter-spacing: inherit;\\n white-space: nowrap;\\n\\n clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);\\n\\n transition:\\n clip-path 420ms ease-out,\\n transform 420ms ease-out;\\n}\\n\\n.cipher-title.is-hovered .cipher-highlight {\\n clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);\\n}\\n\\n.cipher-title:active {\\n transform: scale(0.985);\\n}\\n\\n@media (max-width: 640px) {\\n .cipher-title {\\n font-size: clamp(18px, 6vw, 32px);\\n white-space: normal;\\n text-align: left;\\n justify-content: flex-start;\\n }\\n\\n .cipher-highlight {\\n white-space: normal;\\n justify-content: flex-start;\\n text-align: left;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Scrambel Hover List Text\\n \\n \\n \\n \\n

\\n

\\n \\n MINDORY SPACE\\n MINDORY SPACE\\n \\n\\n \\n Hello World\\n Hello World\\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 letters = \\\"ABCDEFGHIJKLMNOPQRSTUVWXYZ\\\";\\nconst titles = document.querySelectorAll(\\\".cipher-title\\\");\\n\\nfunction scrambleText(element, finalText) {\\n let iteration = 0;\\n\\n clearInterval(element.scrambleTimer);\\n\\n element.scrambleTimer = setInterval(() => {\\n const nextText = finalText\\n .split(\\\"\\\")\\n .map((letter, index) => {\\n if (letter === \\\" \\\") return \\\" \\\";\\n\\n if (index < iteration) {\\n return finalText[index];\\n }\\n\\n return letters[Math.floor(Math.random() * letters.length)];\\n })\\n .join(\\\"\\\");\\n\\n element.textContent = nextText;\\n\\n if (iteration >= finalText.length) {\\n clearInterval(element.scrambleTimer);\\n element.textContent = finalText;\\n }\\n\\n iteration += 1 / 3;\\n }, 30);\\n}\\n\\ntitles.forEach((title) => {\\n const highlight = title.querySelector(\\\".cipher-highlight\\\");\\n const baseText = title.dataset.text || title.textContent.trim();\\n const hoverText = title.dataset.hover || baseText;\\n const delay = Number(title.dataset.delay || 0) * 1000;\\n const href = title.dataset.href;\\n\\n setTimeout(() => {\\n title.classList.add(\\\"is-loaded\\\");\\n }, delay);\\n\\n title.addEventListener(\\\"mouseenter\\\", () => {\\n title.classList.add(\\\"is-hovered\\\");\\n scrambleText(highlight, hoverText);\\n });\\n\\n title.addEventListener(\\\"mouseleave\\\", () => {\\n title.classList.remove(\\\"is-hovered\\\");\\n\\n clearInterval(highlight.scrambleTimer);\\n highlight.textContent = hoverText;\\n });\\n\\n title.addEventListener(\\\"click\\\", () => {\\n if (!href) return;\\n\\n window.open(href, \\\"_blank\\\", \\\"noreferrer\\\");\\n });\\n});\",\"language\":\"javascript\"}]","template":"vanilla-ts","activeFile":"/index.js","viewMode":"both","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]"},"children":[]},{"id":"d730ee0b-3439-46fb-b02a-5b83d04935b8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"60bcd45f-d4d8-4e56-8504-a0185e954db6","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"8a9d9b72-12e6-49a1-878d-644130c228e3","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n

\\n \\n MINDORY SPACE\\n MINDORY SPACE\\n \\n\\n \\n Hello World\\n Hello World\\n \\n

\\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e9fe9da5-c8da-4070-b1e4-09ce12dd805f","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"aa15bd6c-74ff-4c88-b63f-698e9c2f3b26","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"2my9dcnjf\",\"name\":\"styles.css\",\"code\":\"* {\\n box-sizing: border-box;\\n}\\n\\nbody {\\n margin: 0;\\n background: #000000;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.cipher-page {\\n min-height: 100vh;\\n overflow: hidden;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.cipher-stack {\\n width: 100%;\\n padding: 0 4vw;\\n display: flex;\\n flex-direction: column;\\n gap: 16px;\\n}\\n\\n.cipher-title {\\n position: relative;\\n display: flex;\\n align-items: center;\\n\\n width: 100%;\\n max-width: 100vw;\\n margin: 0;\\n padding: 12px 0;\\n\\n overflow: hidden;\\n cursor: pointer;\\n\\n color: rgba(216, 180, 254, 0.16);\\n font-size: clamp(24px, 5vw, 64px);\\n font-weight: 800;\\n line-height: 1;\\n letter-spacing: -0.06em;\\n white-space: nowrap;\\n word-break: break-word;\\n\\n border-bottom: 1px solid rgba(216, 180, 254, 0.18);\\n\\n background-image: linear-gradient(90deg, #22d3ee, #f472b6, #a78bfa);\\n background-repeat: no-repeat;\\n background-size: 0% 100%;\\n background-clip: text;\\n -webkit-background-clip: text;\\n\\n opacity: 0.7;\\n transform: scale(0.95);\\n\\n transition:\\n opacity 600ms cubic-bezier(0.34, 1.56, 0.64, 1),\\n transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1),\\n background-size 1400ms cubic-bezier(0.22, 1, 0.36, 1);\\n}\\n\\n.cipher-title.is-loaded {\\n opacity: 1;\\n transform: scale(1);\\n background-size: 100% 100%;\\n}\\n\\n.cipher-base {\\n position: relative;\\n z-index: 1;\\n}\\n\\n.cipher-highlight {\\n position: absolute;\\n inset: 0;\\n z-index: 2;\\n\\n display: flex;\\n align-items: center;\\n\\n width: 100%;\\n height: 100%;\\n\\n overflow: hidden;\\n\\n background: #8b5cf6;\\n color: #f8fafc;\\n\\n font: inherit;\\n letter-spacing: inherit;\\n white-space: nowrap;\\n\\n clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);\\n\\n transition:\\n clip-path 420ms ease-out,\\n transform 420ms ease-out;\\n}\\n\\n.cipher-title.is-hovered .cipher-highlight {\\n clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);\\n}\\n\\n.cipher-title:active {\\n transform: scale(0.985);\\n}\\n\\n@media (max-width: 640px) {\\n .cipher-title {\\n font-size: clamp(18px, 6vw, 32px);\\n white-space: normal;\\n text-align: left;\\n justify-content: flex-start;\\n }\\n\\n .cipher-highlight {\\n white-space: normal;\\n justify-content: flex-start;\\n text-align: left;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"cc1f7e3b-ee60-449b-b132-47664fb8f68e","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 3: Add JS","styles":{}}],"children":[]},{"id":"d9d9d58f-59ae-4717-a012-6714ab38921b","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.js\",\"code\":\"const letters = \\\"ABCDEFGHIJKLMNOPQRSTUVWXYZ\\\";\\nconst titles = document.querySelectorAll(\\\".cipher-title\\\");\\n\\nfunction scrambleText(element, finalText) {\\n let iteration = 0;\\n\\n clearInterval(element.scrambleTimer);\\n\\n element.scrambleTimer = setInterval(() => {\\n const nextText = finalText\\n .split(\\\"\\\")\\n .map((letter, index) => {\\n if (letter === \\\" \\\") return \\\" \\\";\\n\\n if (index < iteration) {\\n return finalText[index];\\n }\\n\\n return letters[Math.floor(Math.random() * letters.length)];\\n })\\n .join(\\\"\\\");\\n\\n element.textContent = nextText;\\n\\n if (iteration >= finalText.length) {\\n clearInterval(element.scrambleTimer);\\n element.textContent = finalText;\\n }\\n\\n iteration += 1 / 3;\\n }, 30);\\n}\\n\\ntitles.forEach((title) => {\\n const highlight = title.querySelector(\\\".cipher-highlight\\\");\\n const baseText = title.dataset.text || title.textContent.trim();\\n const hoverText = title.dataset.hover || baseText;\\n const delay = Number(title.dataset.delay || 0) * 1000;\\n const href = title.dataset.href;\\n\\n setTimeout(() => {\\n title.classList.add(\\\"is-loaded\\\");\\n }, delay);\\n\\n title.addEventListener(\\\"mouseenter\\\", () => {\\n title.classList.add(\\\"is-hovered\\\");\\n scrambleText(highlight, hoverText);\\n });\\n\\n title.addEventListener(\\\"mouseleave\\\", () => {\\n title.classList.remove(\\\"is-hovered\\\");\\n\\n clearInterval(highlight.scrambleTimer);\\n highlight.textContent = hoverText;\\n });\\n\\n title.addEventListener(\\\"click\\\", () => {\\n if (!href) return;\\n\\n window.open(href, \\\"_blank\\\", \\\"noreferrer\\\");\\n });\\n});\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"32f58917-fcf9-44cf-bafc-a1b37631314d","type":"divider","props":{},"children":[]},{"id":"49c8828f-8212-42a5-8260-f96d80a6f499","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"e5306546-f9d5-4a71-8102-ff03635551de","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"HTML Structure","styles":{}}],"children":[]},{"id":"93d86041-734e-4573-98d4-f0197740bea3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The HTML creates a full-screen ","styles":{}},{"type":"text","text":".cipher-page","styles":{"code":true}},{"type":"text","text":". Inside it, ","styles":{}},{"type":"text","text":".cipher-stack","styles":{"code":true}},{"type":"text","text":" holds two ","styles":{}},{"type":"text","text":".cipher-title","styles":{"code":true}},{"type":"text","text":" elements. Each title has a base text layer and a highlight text layer.","styles":{}}],"children":[]},{"id":"795c96fc-ca75-4472-af3b-23d7c7c3d23d","type":"procode","props":{"code":"

\n \n MINDORY SPACE\n MINDORY SPACE\n \n\n \n RANDOM\n RANDOM\n \n

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

\\n

\\n \\n MINDORY SPACE\\n MINDORY SPACE\\n \\n\\n \\n RANDOM\\n RANDOM\\n \\n

\\n

\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"93441f4a-879d-493e-818a-db921bfa9602","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Page Layout","styles":{}}],"children":[]},{"id":"307e1706-7eb2-478c-b489-7c8d88cbdf56","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The page uses a black background. ","styles":{}},{"type":"text","text":".cipher-page","styles":{"code":true}},{"type":"text","text":" fills the viewport and centers the text stack horizontally and vertically.","styles":{}}],"children":[]},{"id":"f982d2e1-0157-41ad-a2f2-4528e574acda","type":"procode","props":{"code":"body {\n margin: 0;\n background: #000000;\n font-family: Arial, Helvetica, sans-serif;\n}\n\n.cipher-page {\n min-height: 100vh;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"p1dapi0v1\",\"name\":\"code\",\"code\":\"body {\\n margin: 0;\\n background: #000000;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.cipher-page {\\n min-height: 100vh;\\n overflow: hidden;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bb254247-7e9c-4b6c-ae60-be70278d13c5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text Stack","styles":{}}],"children":[]},{"id":"deb98311-e4a8-4f1f-aa39-6b1bc4f82ed4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":".cipher-stack","styles":{"code":true}},{"type":"text","text":" controls the layout of the title list. It takes full width, adds horizontal padding, and stacks the title items vertically with spacing.","styles":{}}],"children":[]},{"id":"f783374b-eb49-404e-8b72-249a7371072f","type":"procode","props":{"code":".cipher-stack {\n width: 100%;\n padding: 0 4vw;\n display: flex;\n flex-direction: column;\n gap: 16px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"4dfk6uamk\",\"name\":\"code\",\"code\":\".cipher-stack {\\n width: 100%;\\n padding: 0 4vw;\\n display: flex;\\n flex-direction: column;\\n gap: 16px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d5588f79-bd0b-4327-b759-aa0f97228e01","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Title Base Style","styles":{}}],"children":[]},{"id":"96f587c6-c19d-4c3d-b61d-0030ad080dcc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Each ","styles":{}},{"type":"text","text":".cipher-title","styles":{"code":true}},{"type":"text","text":" is a large clickable row. It starts slightly scaled down with lower opacity, then animates into place when ","styles":{}},{"type":"text","text":".is-loaded","styles":{"code":true}},{"type":"text","text":" is added by JavaScript.","styles":{}}],"children":[]},{"id":"509968ab-2cb3-4cc6-ad9c-ad4e0edfbb54","type":"procode","props":{"code":".cipher-title {\n position: relative;\n display: flex;\n align-items: center;\n\n width: 100%;\n max-width: 100vw;\n margin: 0;\n padding: 12px 0;\n\n overflow: hidden;\n cursor: pointer;\n\n color: rgba(216, 180, 254, 0.16);\n font-size: clamp(24px, 5vw, 64px);\n font-weight: 800;\n line-height: 1;\n letter-spacing: -0.06em;\n white-space: nowrap;\n word-break: break-word;\n\n border-bottom: 1px solid rgba(216, 180, 254, 0.18);\n\n background-image: linear-gradient(90deg, #22d3ee, #f472b6, #a78bfa);\n background-repeat: no-repeat;\n background-size: 0% 100%;\n background-clip: text;\n -webkit-background-clip: text;\n\n opacity: 0.7;\n transform: scale(0.95);\n\n transition:\n opacity 600ms cubic-bezier(0.34, 1.56, 0.64, 1),\n transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1),\n background-size 1400ms cubic-bezier(0.22, 1, 0.36, 1);\n}","language":"javascript","filename":"","files":"[{\"id\":\"y4s71qskn\",\"name\":\"code\",\"code\":\".cipher-title {\\n position: relative;\\n display: flex;\\n align-items: center;\\n\\n width: 100%;\\n max-width: 100vw;\\n margin: 0;\\n padding: 12px 0;\\n\\n overflow: hidden;\\n cursor: pointer;\\n\\n color: rgba(216, 180, 254, 0.16);\\n font-size: clamp(24px, 5vw, 64px);\\n font-weight: 800;\\n line-height: 1;\\n letter-spacing: -0.06em;\\n white-space: nowrap;\\n word-break: break-word;\\n\\n border-bottom: 1px solid rgba(216, 180, 254, 0.18);\\n\\n background-image: linear-gradient(90deg, #22d3ee, #f472b6, #a78bfa);\\n background-repeat: no-repeat;\\n background-size: 0% 100%;\\n background-clip: text;\\n -webkit-background-clip: text;\\n\\n opacity: 0.7;\\n transform: scale(0.95);\\n\\n transition:\\n opacity 600ms cubic-bezier(0.34, 1.56, 0.64, 1),\\n transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1),\\n background-size 1400ms cubic-bezier(0.22, 1, 0.36, 1);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"32582fb1-3277-4b45-8481-3f998745dc2d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Loaded State","styles":{}}],"children":[]},{"id":"ce60eaa7-e371-4c78-8bff-b746ff02c0d3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"When JavaScript adds ","styles":{}},{"type":"text","text":".is-loaded","styles":{"code":true}},{"type":"text","text":", the title becomes fully visible, scales to normal size, and the gradient background expands across the text.","styles":{}}],"children":[]},{"id":"3bf15a63-0039-4049-8c31-f9b516d106fc","type":"procode","props":{"code":".cipher-title.is-loaded {\n opacity: 1;\n transform: scale(1);\n background-size: 100% 100%;\n}","language":"javascript","filename":"","files":"[{\"id\":\"xyas6gvlq\",\"name\":\"code\",\"code\":\".cipher-title.is-loaded {\\n opacity: 1;\\n transform: scale(1);\\n background-size: 100% 100%;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"33a0a9f4-30b3-42c2-a0b3-8e59f0aed8fd","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Base Text Layer","styles":{}}],"children":[]},{"id":"28e34fac-dd08-41c1-9f4e-d736de887cf5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":".cipher-base","styles":{"code":true}},{"type":"text","text":" is the default visible text layer. It stays behind the highlight layer.","styles":{}}],"children":[]},{"id":"226a3a2e-3db2-4f44-889c-54aea877e954","type":"procode","props":{"code":".cipher-base {\n position: relative;\n z-index: 1;\n}","language":"javascript","filename":"","files":"[{\"id\":\"f0n5al57u\",\"name\":\"code\",\"code\":\".cipher-base {\\n position: relative;\\n z-index: 1;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ba97a1e4-9dea-432c-b487-84b4230793ce","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Highlight Layer","styles":{}}],"children":[]},{"id":"84ba1939-a9ba-4baf-872e-4d03cc11c264","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":".cipher-highlight","styles":{"code":true}},{"type":"text","text":" is positioned absolutely on top of the base text. It starts hidden with a thin middle ","styles":{}},{"type":"text","text":"clip-path","styles":{"code":true}},{"type":"text","text":", then expands on hover.","styles":{}}],"children":[]},{"id":"2bab4570-488f-4cb8-9db3-347647f11488","type":"procode","props":{"code":".cipher-highlight {\n position: absolute;\n inset: 0;\n z-index: 2;\n\n display: flex;\n align-items: center;\n\n width: 100%;\n height: 100%;\n\n overflow: hidden;\n\n background: #8b5cf6;\n color: #f8fafc;\n\n font: inherit;\n letter-spacing: inherit;\n white-space: nowrap;\n\n clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);\n\n transition:\n clip-path 420ms ease-out,\n transform 420ms ease-out;\n}","language":"javascript","filename":"","files":"[{\"id\":\"iyu8t9a2c\",\"name\":\"code\",\"code\":\".cipher-highlight {\\n position: absolute;\\n inset: 0;\\n z-index: 2;\\n\\n display: flex;\\n align-items: center;\\n\\n width: 100%;\\n height: 100%;\\n\\n overflow: hidden;\\n\\n background: #8b5cf6;\\n color: #f8fafc;\\n\\n font: inherit;\\n letter-spacing: inherit;\\n white-space: nowrap;\\n\\n clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);\\n\\n transition:\\n clip-path 420ms ease-out,\\n transform 420ms ease-out;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a51ab4f5-2e91-41b0-b4bd-3d7fb900dd9b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Reveal","styles":{}}],"children":[]},{"id":"4dbf9b8e-23c4-4cf2-93f9-824de649387d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"When the title gets ","styles":{}},{"type":"text","text":".is-hovered","styles":{"code":true}},{"type":"text","text":", the highlight layer expands from the center line into a full rectangle.","styles":{}}],"children":[]},{"id":"9d06f0e6-efeb-4c42-8729-c14cd31f2598","type":"procode","props":{"code":".cipher-title.is-hovered .cipher-highlight {\n clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);\n}","language":"javascript","filename":"","files":"[{\"id\":\"i9k6lr0xw\",\"name\":\"code\",\"code\":\".cipher-title.is-hovered .cipher-highlight {\\n clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2a75457e-9c78-423f-af9d-5c46cc018143","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Active Press","styles":{}}],"children":[]},{"id":"839f23bd-faf8-404a-9565-1885bd384607","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"When clicked or pressed, the title scales down slightly.","styles":{}}],"children":[]},{"id":"2133dca3-16e7-40ad-aa88-f87513c35f1d","type":"procode","props":{"code":".cipher-title:active {\n transform: scale(0.985);\n}","language":"javascript","filename":"","files":"[{\"id\":\"ut2k18f6t\",\"name\":\"code\",\"code\":\".cipher-title:active {\\n transform: scale(0.985);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8705c7ce-8240-42eb-8b15-590e596d0384","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Scramble Characters","styles":{}}],"children":[]},{"id":"4d203b4d-6275-4ae9-9ac1-3cc0e565adb3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The JavaScript uses uppercase letters as random characters during the scramble animation.","styles":{}}],"children":[]},{"id":"0a3e414b-a5f4-448b-a299-005af76b2fe7","type":"procode","props":{"code":"const letters = \"ABCDEFGHIJKLMNOPQRSTUVWXYZ\";\nconst titles = document.querySelectorAll(\".cipher-title\");","language":"javascript","filename":"","files":"[{\"id\":\"daid2dwe3\",\"name\":\"code\",\"code\":\"const letters = \\\"ABCDEFGHIJKLMNOPQRSTUVWXYZ\\\";\\nconst titles = document.querySelectorAll(\\\".cipher-title\\\");\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0f6378e3-a453-4fdf-a1e5-00601a231acb","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Scramble Function","styles":{}}],"children":[]},{"id":"1e2a2ed6-0c7c-4cef-8dac-7c55455edf19","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"scrambleText()","styles":{"code":true}},{"type":"text","text":" animates the text from random letters into the final text. Characters lock into their final position one by one based on ","styles":{}},{"type":"text","text":"iteration","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"b9cff35f-da42-4de6-9980-d771fa3984b9","type":"procode","props":{"code":"function scrambleText(element, finalText) {\n let iteration = 0;\n\n clearInterval(element.scrambleTimer);\n\n element.scrambleTimer = setInterval(() => {\n const nextText = finalText\n .split(\"\")\n .map((letter, index) => {\n if (letter === \" \") return \" \";\n\n if (index < iteration) {\n return finalText[index];\n }\n\n return letters[Math.floor(Math.random() * letters.length)];\n })\n .join(\"\");\n\n element.textContent = nextText;\n\n if (iteration >= finalText.length) {\n clearInterval(element.scrambleTimer);\n element.textContent = finalText;\n }\n\n iteration += 1 / 3;\n }, 30);\n}","language":"javascript","filename":"","files":"[{\"id\":\"rioa60zd0\",\"name\":\"code\",\"code\":\"function scrambleText(element, finalText) {\\n let iteration = 0;\\n\\n clearInterval(element.scrambleTimer);\\n\\n element.scrambleTimer = setInterval(() => {\\n const nextText = finalText\\n .split(\\\"\\\")\\n .map((letter, index) => {\\n if (letter === \\\" \\\") return \\\" \\\";\\n\\n if (index < iteration) {\\n return finalText[index];\\n }\\n\\n return letters[Math.floor(Math.random() * letters.length)];\\n })\\n .join(\\\"\\\");\\n\\n element.textContent = nextText;\\n\\n if (iteration >= finalText.length) {\\n clearInterval(element.scrambleTimer);\\n element.textContent = finalText;\\n }\\n\\n iteration += 1 / 3;\\n }, 30);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"de1d6e55-b6d5-4eac-b01b-6e2fe68537dd","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Title Setup Logic","styles":{}}],"children":[]},{"id":"495fdc75-cf6e-4a13-822e-d3159baf3821","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Each ","styles":{}},{"type":"text","text":".cipher-title","styles":{"code":true}},{"type":"text","text":" reads its own dataset values. ","styles":{}},{"type":"text","text":"data-text","styles":{"code":true}},{"type":"text","text":" stores the original text, ","styles":{}},{"type":"text","text":"data-hover","styles":{"code":true}},{"type":"text","text":" stores the hover text, ","styles":{}},{"type":"text","text":"data-delay","styles":{"code":true}},{"type":"text","text":" controls the load delay, and ","styles":{}},{"type":"text","text":"data-href","styles":{"code":true}},{"type":"text","text":" is used for optional click navigation.","styles":{}}],"children":[]},{"id":"1c948173-ca26-458f-be5b-17074b71a3fb","type":"procode","props":{"code":"titles.forEach((title) => {\n const highlight = title.querySelector(\".cipher-highlight\");\n const baseText = title.dataset.text || title.textContent.trim();\n const hoverText = title.dataset.hover || baseText;\n const delay = Number(title.dataset.delay || 0) * 1000;\n const href = title.dataset.href;\n\n setTimeout(() => {\n title.classList.add(\"is-loaded\");\n }, delay);\n});","language":"javascript","filename":"","files":"[{\"id\":\"7g9pjqm0j\",\"name\":\"code\",\"code\":\"titles.forEach((title) => {\\n const highlight = title.querySelector(\\\".cipher-highlight\\\");\\n const baseText = title.dataset.text || title.textContent.trim();\\n const hoverText = title.dataset.hover || baseText;\\n const delay = Number(title.dataset.delay || 0) * 1000;\\n const href = title.dataset.href;\\n\\n setTimeout(() => {\\n title.classList.add(\\\"is-loaded\\\");\\n }, delay);\\n});\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"73643d1e-5260-40eb-82c2-f9ee83e42540","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Logic","styles":{}}],"children":[]},{"id":"cf74caaa-551b-447b-93e6-082dc78da076","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"On mouse enter, the title receives ","styles":{}},{"type":"text","text":".is-hovered","styles":{"code":true}},{"type":"text","text":", the highlight layer opens, and the highlight text starts scrambling into the final hover text.","styles":{}}],"children":[]},{"id":"01ecc254-3e5a-4814-b048-6f29ab0651ac","type":"procode","props":{"code":"title.addEventListener(\"mouseenter\", () => {\n title.classList.add(\"is-hovered\");\n scrambleText(highlight, hoverText);\n});","language":"javascript","filename":"","files":"[{\"id\":\"4m6sk718r\",\"name\":\"code\",\"code\":\"title.addEventListener(\\\"mouseenter\\\", () => {\\n title.classList.add(\\\"is-hovered\\\");\\n scrambleText(highlight, hoverText);\\n});\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fe15cda6-6729-42d5-90b1-eb3b6586e56e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Leave Logic","styles":{}}],"children":[]},{"id":"79d7061c-802a-420e-8ebb-1f543c1fea70","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"On mouse leave, the highlight closes. Any active scramble interval is stopped, and the highlight text is reset back to the final hover text.","styles":{}}],"children":[]},{"id":"c350b186-6aa1-4587-a1f3-615ff1b93474","type":"procode","props":{"code":"title.addEventListener(\"mouseleave\", () => {\n title.classList.remove(\"is-hovered\");\n\n clearInterval(highlight.scrambleTimer);\n highlight.textContent = hoverText;\n});","language":"javascript","filename":"","files":"[{\"id\":\"hbm9bxf0z\",\"name\":\"code\",\"code\":\"title.addEventListener(\\\"mouseleave\\\", () => {\\n title.classList.remove(\\\"is-hovered\\\");\\n\\n clearInterval(highlight.scrambleTimer);\\n highlight.textContent = hoverText;\\n});\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"115ad80f-5b63-4d97-879d-8a06e07286e1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Click Logic","styles":{}}],"children":[]},{"id":"c96c1fac-0bf7-42f8-9728-fbbc3918553e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"If the title has ","styles":{}},{"type":"text","text":"data-href","styles":{"code":true}},{"type":"text","text":", clicking it opens the link in a new tab.","styles":{}}],"children":[]},{"id":"645c9d07-c7e4-4c83-bf84-eae5c7d3e4fc","type":"procode","props":{"code":"title.addEventListener(\"click\", () => {\n if (!href) return;\n\n window.open(href, \"_blank\", \"noreferrer\");\n});","language":"javascript","filename":"","files":"[{\"id\":\"0nvmuc4c6\",\"name\":\"code\",\"code\":\"title.addEventListener(\\\"click\\\", () => {\\n if (!href) return;\\n\\n window.open(href, \\\"_blank\\\", \\\"noreferrer\\\");\\n});\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bac51b16-c329-467f-b00b-a5e3f59769e4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Mobile Layout","styles":{}}],"children":[]},{"id":"f1aa1005-7c15-44ab-a67e-23cccc40978a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"On small screens, the text size becomes smaller and the text can wrap naturally.","styles":{}}],"children":[]},{"id":"5455cf80-50f4-476f-bd72-4cfac8e8b052","type":"procode","props":{"code":"@media (max-width: 640px) {\n .cipher-title {\n font-size: clamp(18px, 6vw, 32px);\n white-space: normal;\n text-align: left;\n justify-content: flex-start;\n }\n\n .cipher-highlight {\n white-space: normal;\n justify-content: flex-start;\n text-align: left;\n }\n}","language":"javascript","filename":"","files":"[{\"id\":\"gduwajkj0\",\"name\":\"code\",\"code\":\"@media (max-width: 640px) {\\n .cipher-title {\\n font-size: clamp(18px, 6vw, 32px);\\n white-space: normal;\\n text-align: left;\\n justify-content: flex-start;\\n }\\n\\n .cipher-highlight {\\n white-space: normal;\\n justify-content: flex-start;\\n text-align: left;\\n }\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"eed91a85-7380-42b7-8b25-a2cb70ea79df","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Implementation Flow Code","styles":{}}],"children":[]},{"id":"ee7ffbea-61c7-48b0-9068-fab68e156e76","type":"procode","props":{"code":"1. Browser loads index.html\n2. index.html loads styles.css\n3. index.html loads index.js with defer\n4. .cipher-page creates the full-screen black section\n5. .cipher-stack creates the vertical title list\n6. each .cipher-title stores text settings in data attributes\n7. .cipher-base displays the default background text\n8. .cipher-highlight sits above the base text\n9. .cipher-highlight starts hidden using clip-path\n10. index.js selects all .cipher-title elements\n11. each title reads data-text, data-hover, data-delay, and data-href\n12. setTimeout waits based on data-delay\n13. JavaScript adds .is-loaded to each title\n14. .is-loaded animates opacity from 0.7 to 1\n15. .is-loaded scales the title from 0.95 to 1\n16. .is-loaded expands the gradient background-size to 100%\n17. mouseenter adds .is-hovered to the title\n18. .is-hovered expands the highlight clip-path\n19. scrambleText starts on the highlight layer\n20. scrambleText clears any previous scramble interval\n21. scrambleText splits the final text into characters\n22. locked characters show the real final text\n23. unlocked characters show random uppercase letters\n24. spaces stay as spaces\n25. every 30ms, more characters become locked\n26. when iteration reaches the text length, the interval stops\n27. highlight text becomes the final hover text\n28. mouseleave removes .is-hovered\n29. the highlight clip-path closes back to the center line\n30. the scramble interval is cleared\n31. highlight text resets to the final hover text\n32. click checks whether data-href exists\n33. if data-href exists, the URL opens in a new tab\n34. active state slightly scales the title down when pressed\n35. mobile media query reduces font size and allows wrapping","language":"javascript","filename":"","files":"[{\"id\":\"3p3vpkhy0\",\"name\":\"code\",\"code\":\"1. Browser loads index.html\\n2. index.html loads styles.css\\n3. index.html loads index.js with defer\\n4. .cipher-page creates the full-screen black section\\n5. .cipher-stack creates the vertical title list\\n6. each .cipher-title stores text settings in data attributes\\n7. .cipher-base displays the default background text\\n8. .cipher-highlight sits above the base text\\n9. .cipher-highlight starts hidden using clip-path\\n10. index.js selects all .cipher-title elements\\n11. each title reads data-text, data-hover, data-delay, and data-href\\n12. setTimeout waits based on data-delay\\n13. JavaScript adds .is-loaded to each title\\n14. .is-loaded animates opacity from 0.7 to 1\\n15. .is-loaded scales the title from 0.95 to 1\\n16. .is-loaded expands the gradient background-size to 100%\\n17. mouseenter adds .is-hovered to the title\\n18. .is-hovered expands the highlight clip-path\\n19. scrambleText starts on the highlight layer\\n20. scrambleText clears any previous scramble interval\\n21. scrambleText splits the final text into characters\\n22. locked characters show the real final text\\n23. unlocked characters show random uppercase letters\\n24. spaces stay as spaces\\n25. every 30ms, more characters become locked\\n26. when iteration reaches the text length, the interval stops\\n27. highlight text becomes the final hover text\\n28. mouseleave removes .is-hovered\\n29. the highlight clip-path closes back to the center line\\n30. the scramble interval is cleared\\n31. highlight text resets to the final hover text\\n32. click checks whether data-href exists\\n33. if data-href exists, the URL opens in a new tab\\n34. active state slightly scales the title down when pressed\\n35. mobile media query reduces font size and allows wrapping\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e4048364-2429-4042-b3c9-a300c7571f58","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]