{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "typewriter-html",
"title": "Typewriter",
"description": "A typewriter component that cycles through text with a synced flashing highlight animation built with HTML, CSS, JavaScript and Motion.",
"dependencies": [
"motion"
],
"files": [
{
"path": "registry/html/atlasui/typewriter/index.html",
"content": "\n\n \n \n \n Typewriter - Atlas UI\n \n \n \n \n\n \n \n\n",
"type": "registry:file",
"target": "~/typewriter/index.html"
},
{
"path": "registry/html/atlasui/typewriter/style.css",
"content": ":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}\n\nhtml {\n color-scheme: light dark;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n min-height: 100svh;\n background-color: var(--background);\n color: var(--foreground);\n font-family: \"Inter\", sans-serif;\n max-width: 800px;\n margin: 0 auto;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n align-items: center;\n justify-content: center;\n}\n\n/* Important styles */\n.typewriter {\n font-size: 0.875rem;\n line-height: 1.5;\n font-weight: 300;\n text-transform: uppercase;\n}\n\n.box-span {\n position: absolute;\n inset: 0 1px;\n opacity: 0;\n background: currentColor;\n pointer-events: none;\n}\n",
"type": "registry:file",
"target": "~/typewriter/style.css"
},
{
"path": "registry/html/atlasui/typewriter/script.js",
"content": "import { animate } from \"motion\";\n\nconst CONFIG = {\n letterDelay: 0.025,\n boxFadeDuration: 0.125,\n textFadeOutDuration: 0.25,\n delayBetween: 5500,\n};\n\nconst textArray = [\n \"Building pixels with purpose\",\n \"Shipping faster than deadlines\",\n \"Deploy now, panic later!\",\n \"Debugging at 2AM professionally\",\n \"Fueled by coffee and code\",\n];\n\nconst typewriterEl = document.querySelector(\".typewriter\");\n\nlet currentIndex = 0;\n\nfunction renderText(text) {\n typewriterEl.innerHTML = \"\";\n\n const wrapper = document.createElement(\"span\");\n\n text.split(\"\").forEach((char, index) => {\n const charContainer = document.createElement(\"span\");\n charContainer.style.position = \"relative\";\n\n // Character span\n const charSpan = document.createElement(\"span\");\n charSpan.textContent = char === \" \" ? \"\\u00A0\" : char;\n charSpan.style.opacity = \"0\";\n\n // box overlay\n const boxSpan = document.createElement(\"span\");\n boxSpan.classList.add(\"box-span\");\n\n charContainer.appendChild(charSpan);\n charContainer.appendChild(boxSpan);\n wrapper.appendChild(charContainer);\n\n // animate character\n animate(\n charSpan,\n { opacity: 1 },\n { duration: 0, delay: index * CONFIG.letterDelay },\n );\n\n // animate box\n animate(\n boxSpan,\n { opacity: [0, 1, 0] },\n {\n delay: index * CONFIG.letterDelay,\n times: [0, 0.1, 1],\n duration: CONFIG.boxFadeDuration,\n ease: \"ease-in-out\",\n },\n );\n });\n\n typewriterEl.appendChild(wrapper);\n}\n\nasync function transitionText() {\n const currentWrapper = typewriterEl.querySelector(\"span\");\n\n // Fade out existing text\n if (currentWrapper) {\n await animate(\n currentWrapper,\n { opacity: 0 },\n {\n duration: CONFIG.textFadeOutDuration,\n ease: \"ease-in-out\",\n },\n ).finished;\n }\n\n currentIndex = (currentIndex + 1) % textArray.length;\n\n renderText(textArray[currentIndex]);\n}\n\nrenderText(textArray[0]);\nsetInterval(transitionText, CONFIG.delayBetween);\n",
"type": "registry:file",
"target": "~/typewriter/script.js"
}
],
"meta": {
"framework": "html"
},
"type": "registry:file"
}