Loki
\n \n\n \n\n", "type": "registry:file", "target": "~/loki-text-effect/index.html" }, { "path": "registry/html/atlasui/loki-text-effect/style.css", "content": "/* Loading the fonts */\n@font-face {\n font-family: \"FontOne\";\n src: url(\"/fonts/fontOne.woff2\") format(\"woff2\");\n}\n@font-face {\n font-family: \"FontTwo\";\n src: url(\"/fonts/fontTwo.woff2\") format(\"woff2\");\n}\n@font-face {\n font-family: \"FontThree\";\n src: url(\"/fonts/fontThree.woff2\") format(\"woff2\");\n}\n@font-face {\n font-family: \"FontFour\";\n src: url(\"/fonts/fontFour.woff2\") format(\"woff2\");\n}\n@font-face {\n font-family: \"FontFive\";\n src: url(\"/fonts/fontFive.woff2\") format(\"woff2\");\n}\n@font-face {\n font-family: \"FontSix\";\n src: url(\"/fonts/fontSix.woff2\") format(\"woff2\");\n}\n@font-face {\n font-family: \"FontSeven\";\n src: url(\"/fonts/fontSeven.woff2\") format(\"woff2\");\n}\n\n:root {\n --background: light-dark(\n oklch(100% 0.00011 271.152),\n oklch(18.22% 0.00002 271.152)\n );\n --foreground: light-dark(\n oklch(18.22% 0.00002 271.152),\n oklch(98.511% 0.00011 271.152)\n );\n --shadow: light-dark(black, white);\n}\n\nhtml {\n color-scheme: light dark;\n}\n\nbody {\n background-color: var(--background);\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100svh;\n margin: 0;\n}\n\n.loki-letter {\n display: inline-block;\n font-size: clamp(\n 3rem,\n 10vw,\n 7rem\n ); /* You can adjust the font size according to you usage ;) */\n font-weight: 700;\n color: var(--foreground);\n letter-spacing: 0.15em;\n text-shadow:\n 0 0 2px #ffffff66,\n 0 0 5px #ffffff66;\n filter: drop-shadow(0 0 8px var(--shadow));\n}\n", "type": "registry:file", "target": "~/loki-text-effect/style.css" }, { "path": "registry/html/atlasui/loki-text-effect/script.js", "content": "import { animate } from \"motion\";\n\nconst fonts = [\n \"FontOne\",\n \"FontTwo\",\n \"FontThree\",\n \"FontFour\",\n \"FontFive\",\n \"FontSix\",\n \"FontSeven\",\n];\n\nconst getRandomFont = (current) => {\n let next = current;\n while (next === current) {\n next = fonts[Math.floor(Math.random() * fonts.length)];\n }\n return next;\n};\n\nconst getRandomOffset = () => ({\n x: (Math.random() - 0.5) * 2,\n y: (Math.random() - 0.5) * 2,\n});\n\nconst applyLokiEffect = (element) => {\n const text = element.dataset.value || element.textContent.trim();\n const velocityFont = Math.max(\n 100,\n Number(element.dataset.velocityFont || 800),\n );\n const velocityMove = Math.max(\n 100,\n Number(element.dataset.velocityMove || 1800),\n );\n\n element.innerHTML = \"\";\n\n text.split(\"\").forEach((char, i) => {\n const span = document.createElement(\"span\");\n span.className = \"loki-letter\";\n span.textContent = char;\n\n let baseFont = fonts[i % fonts.length];\n span.style.fontFamily = baseFont;\n element.appendChild(span);\n\n // Font swap\n setInterval(() => {\n baseFont = getRandomFont(baseFont);\n span.style.fontFamily = baseFont;\n }, velocityFont);\n\n // Position animate\n setInterval(() => {\n const { x, y } = getRandomOffset();\n animate(span, { x, y }, { duration: 0.5, easing: \"ease-in-out\" });\n }, velocityMove);\n });\n};\n\nwindow.addEventListener(\"DOMContentLoaded\", () => {\n document.querySelectorAll(\".loki-effect-text\").forEach(applyLokiEffect);\n});\n", "type": "registry:file", "target": "~/loki-text-effect/script.js" }, { "path": "registry/fonts/fontOne.woff2", "content": "wOF2\u0000\u0001\u0000\u0000\u0000\u0000Gt\u0000\u0012\u0000\u0000\u0000\u00016|\u0000\u0000G\f\u0000\u0001\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u001b�0\u0014�\u001a\u0006`\u0016�`\u0000�r\b\u000e\t�s\n��`��\u0013\u000b�.\u0000\u0012�0\u00016\u0002$\u0003�X\u0013�,\u0004 \u0005�1\u0007�?\f\u0016[C\u001b����n� �\u0000\u0001An\u001b\u0000�ZWX\"���@��x�\u0016[I㔨n\r\u0003��ՄP\u0006�����������W2\t�L�?��۶\u0005��\b�\u0000n���^B��\u0012�u�.\r8�\u0019]��x��p��+u��{�͋�M����L��i\u001a��8�]�(#�u���}�Z��E\u0006_=^]�5���\u0014VuL]̸\n|\\\u001b=��ל5e|�\u0012�\"m3k��)r��`���,�\t�\b;��K�ANFN���Av��vu�t\u0001�j�3b�N}Ii�\u0019lӇ�\u000b��#��%~�%�������{A�\u001bdX�0\u0012\u001evF\u001c�X<�����bTW�?�~��\u000f�7��\nU�7c&S\u0002o���Z�\u000e����mUL\u001a,=�C/����0W!x�Š�;t�\u000e�ڟ��t*(t�N���>A:$[��+�����\u001df�����xJ�\u0006���F�\u0004ME�\u0000�0\u0019~�A����U߯ල��U1\u000f5\u0002����5�>�z��W�\u0016�6\"�PD�=r(�i[\u0019��3�\u000e��PM�|���\u000f�6�OQ9��:\u0011�B\u0011�B)�\b\u001b�W�؛\u0019osz�ta��H�k���kㅫ��c�ф �z~xˠ$E�L��\u0001pdWuX�\u001e��� �g�\u0001����%\u0007^����[5��L\u0002\u0001\u0016Y�sy^T[�\\��h^��/��