var Component=(()=>{var F=Object.create;var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var B=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var N=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),x=(n,e)=>{for(var s in e)i(n,s,{get:e[s],enumerable:!0})},p=(n,e,s,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of E(e))!u.call(n,r)&&r!==s&&i(n,r,{get:()=>e[r],enumerable:!(t=m(e,r))||t.enumerable});return n};var f=(n,e,s)=>(s=n!=null?F(B(n)):{},p(e||!n||!n.__esModule?i(s,"default",{value:n,enumerable:!0}):s,n)),g=n=>p(i({},"__esModule",{value:!0}),n);var y=N((T,C)=>{C.exports=_jsx_runtime});var _={};x(_,{default:()=>D,frontmatter:()=>v});var l=f(y()),v={title:"Hacker Text",description:"A text animation that scrambles letters before revealing the final text."};function A(n){let e={a:"a",blockquote:"blockquote",code:"code",div:"div",h2:"h2",p:"p",pre:"pre",span:"span",...n.components},{ComponentPreview:s,ComponentSource:t,InstallationTabs:r,Step:o,Steps:d,TabsContent:c,UsageTabs:h}=e;return s||a("ComponentPreview",!0),t||a("ComponentSource",!0),r||a("InstallationTabs",!0),o||a("Step",!0),d||a("Steps",!0),c||a("TabsContent",!0),h||a("UsageTabs",!0),(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(s,{name:"hacker-text-demo",children:(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { HackerText } from "@/components/hacker-text"; export const HackerTextDemo = () => { return ; }; `,__src__:"/vercel/path0/registry/react/examples/hacker-text-demo.tsx",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default","data-line-numbers":"",children:[(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:"import "}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"{"}),(0,l.jsx)(e.span,{style:{color:"#ADD7FF"},children:" HackerText"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" }"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" from"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:' "'}),(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:"@/components/hacker-text"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:" const"}),(0,l.jsx)(e.span,{style:{color:"#ADD7FF"},children:" HackerTextDemo"}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" () "}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#5DE4C7C0"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:"HackerText"}),(0,l.jsx)(e.span,{style:{color:"#91B4D5",fontStyle:"italic"},children:" text"}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:"Hover Me!"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:" />"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"};"})})]})})})}),` `,(0,l.jsxs)(e.h2,{id:"installation",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,l.jsxs)(h,{children:[(0,l.jsx)(c,{value:"React",children:(0,l.jsxs)(r,{children:[(0,l.jsx)(c,{value:"cli",children:(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npx shadcn@latest add https://atlasui.dev/r/hacker-text.json `,__npm__:`npx shadcn@latest add https://atlasui.dev/r/hacker-text.json `,__yarn__:`yarn shadcn@latest add https://atlasui.dev/r/hacker-text.json `,__pnpm__:`pnpm dlx shadcn@latest add https://atlasui.dev/r/hacker-text.json `,__bun__:`bunx --bun shadcn@latest add https://atlasui.dev/r/hacker-text.json `,children:(0,l.jsx)(e.code,{"data-language":"bash","data-theme":"default","data-line-numbers":"",children:(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:"npx"}),(0,l.jsx)(e.span,{style:{color:"#ADD7FF"},children:" shadcn@latest"}),(0,l.jsx)(e.span,{style:{color:"#ADD7FF"},children:" add"}),(0,l.jsx)(e.span,{style:{color:"#ADD7FF"},children:" https://atlasui.dev/r/hacker-text.json"})]})})})})}),(0,l.jsx)(c,{value:"manual",children:(0,l.jsxs)(d,{children:[(0,l.jsx)(o,{children:"Copy and paste the following code into your project."}),(0,l.jsx)(t,{name:"hacker-text",filePath:"components/hacker-text.tsx",children:(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client"; import { Bebas_Neue } from "next/font/google"; import { useEffect } from "react"; import { cn } from "@/lib/utils"; const bebas = Bebas_Neue({ subsets: ["latin"], weight: ["400"] }); export const HackerText = ({ text, className, }: { text: string; className?: string; }) => { const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; useEffect(() => { const textElement = document.getElementById("text"); let interval: NodeJS.Timeout | null = null; let timeout: NodeJS.Timeout | null = null; const scrambleText = (target: HTMLElement) => { let iteration = 0; clearInterval(interval as NodeJS.Timeout); interval = setInterval(() => { if (!target.dataset.value) return; target.innerText = target.innerText .split("") .map((letter, index) => { if (index < iteration) { return target.dataset.value![index]; } return letters[Math.floor(Math.random() * 26)]; }) .join(""); if (iteration >= target.dataset.value.length) { clearInterval(interval as NodeJS.Timeout); } iteration += 1 / 3; }, 30); }; const applyEffect = () => { if (window.matchMedia("(min-width: 768px)").matches) { // For non-mobile devices if (textElement) { textElement.addEventListener("mouseover", (event) => { const target = event.target as HTMLElement; scrambleText(target); }); } } // Run the effect after 600ms on page load for all devices if (textElement) { timeout = setTimeout(() => { scrambleText(textElement); }, 600); } }; applyEffect(); return () => { if (textElement && window.matchMedia("(min-width: 768px)").matches) { textElement.removeEventListener("mouseover", (event) => { const target = event.target as HTMLElement; scrambleText(target); }); } if (interval) { clearInterval(interval); } if (timeout) { clearTimeout(timeout); } }; }, [letters]); return ( {text} ); }; `,__src__:"registry/react/atlasui/hacker-text.tsx",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default","data-line-numbers":"",children:[(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:"use client"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:"import "}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"{"}),(0,l.jsx)(e.span,{style:{color:"#ADD7FF"},children:" Bebas_Neue"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" }"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" from"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:' "'}),(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:"next/font/google"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:"import "}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"{"}),(0,l.jsx)(e.span,{style:{color:"#ADD7FF"},children:" useEffect"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" }"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" from"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:' "'}),(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:"react"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:"import "}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"{"}),(0,l.jsx)(e.span,{style:{color:"#ADD7FF"},children:" cn"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" }"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" from"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:' "'}),(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:"@/lib/utils"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:" bebas"}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#E4F0FBD0"},children:" Bebas_Neue"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"({"}),(0,l.jsx)(e.span,{style:{color:"#ADD7FF"},children:" subsets"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" ["}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:"latin"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"],"}),(0,l.jsx)(e.span,{style:{color:"#ADD7FF"},children:" weight"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" ["}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:"400"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"]"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" });"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:" const"}),(0,l.jsx)(e.span,{style:{color:"#ADD7FF"},children:" HackerText"}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" ({"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:" text"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:","})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:","})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"}"}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" text"}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCDC0"},children:" string"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:"?:"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCDC0"},children:" string"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"}) "}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:" const"}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:" letters"}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:' "'}),(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:"ABCDEFGHIJKLMNOPQRSTUVWXYZ"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E4F0FBD0"},children:" useEffect"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"(() "}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:" const"}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:" textElement"}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:" document"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#E4F0FBD0"},children:"getElementById"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:"text"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:");"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:" let"}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:" interval"}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCDC0"},children:" NodeJS"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#A6ACCDC0"},children:"Timeout"}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:" |"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCDC0"},children:" null"}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#D0679D"},children:" null"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:" let"}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:" timeout"}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCDC0"},children:" NodeJS"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#A6ACCDC0"},children:"Timeout"}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:" |"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCDC0"},children:" null"}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#D0679D"},children:" null"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:" const"}),(0,l.jsx)(e.span,{style:{color:"#ADD7FF"},children:" scrambleText"}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" ("}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"target"}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCDC0"},children:" HTMLElement"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:") "}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:" let"}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:" iteration"}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:" 0"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E4F0FBD0"},children:" clearInterval"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"interval"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCDC0"},children:" as"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCDC0"},children:" NodeJS"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#A6ACCDC0"},children:"Timeout"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:");"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:" interval"}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#E4F0FBD0"},children:" setInterval"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"(() "}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" if ("}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:"!"}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"target"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"dataset"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"value"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:") "}),(0,l.jsx)(e.span,{style:{color:"#5DE4C7C0"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:" target"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"innerText"}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:" target"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"innerText"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" ."}),(0,l.jsx)(e.span,{style:{color:"#E4F0FBD0"},children:"split"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:'""'}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:")"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" ."}),(0,l.jsx)(e.span,{style:{color:"#E4F0FBD0"},children:"map"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"(("}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"letter"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"index"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:") "}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" if ("}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"index"}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:" iteration"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:") {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#5DE4C7C0"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:" target"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"dataset"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"value"}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:"!"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"["}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"index"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"];"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" }"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#5DE4C7C0"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:" letters"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"["}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"Math"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#E4F0FBD0"},children:"floor"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"Math"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#E4F0FBD0"},children:"random"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"() "}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:"*"}),(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:" 26"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:")];"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" })"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" ."}),(0,l.jsx)(e.span,{style:{color:"#E4F0FBD0"},children:"join"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:'""'}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:");"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" if ("}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"iteration"}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:" >="}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:" target"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"dataset"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"value"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"length"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:") {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E4F0FBD0"},children:" clearInterval"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"interval"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCDC0"},children:" as"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCDC0"},children:" NodeJS"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#A6ACCDC0"},children:"Timeout"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:");"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" }"})}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:" iteration"}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:" +="}),(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:" 1"}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:" /"}),(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:" 3"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" }, "}),(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:"30"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:");"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" };"})}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:" const"}),(0,l.jsx)(e.span,{style:{color:"#ADD7FF"},children:" applyEffect"}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" () "}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" if ("}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"window"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#E4F0FBD0"},children:"matchMedia"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:"(min-width: 768px)"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:")."}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"matches"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:") {"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#767C9DB0",fontStyle:"italic"},children:" // For non-mobile devices"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" if ("}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"textElement"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:") {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:" textElement"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#E4F0FBD0"},children:"addEventListener"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:"mouseover"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:", ("}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"event"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:") "}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:" const"}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:" target"}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:" event"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"target"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCDC0"},children:" as"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCDC0"},children:" HTMLElement"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E4F0FBD0"},children:" scrambleText"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"target"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:");"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" });"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" }"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" }"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#767C9DB0",fontStyle:"italic"},children:" // Run the effect after 600ms on page load for all devices"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" if ("}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"textElement"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:") {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:" timeout"}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#E4F0FBD0"},children:" setTimeout"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"(() "}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E4F0FBD0"},children:" scrambleText"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"textElement"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:");"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" }, "}),(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:"600"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:");"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" }"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" };"})}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E4F0FBD0"},children:" applyEffect"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"();"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#5DE4C7C0"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" () "}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" if ("}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"textElement"}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:" &&"}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:" window"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#E4F0FBD0"},children:"matchMedia"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:"(min-width: 768px)"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:")."}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"matches"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:") {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:" textElement"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#E4F0FBD0"},children:"removeEventListener"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:"mouseover"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:", ("}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"event"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:") "}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:" const"}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:" target"}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:" event"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"target"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCDC0"},children:" as"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCDC0"},children:" HTMLElement"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E4F0FBD0"},children:" scrambleText"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"target"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:");"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" });"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" }"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" if ("}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"interval"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:") {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E4F0FBD0"},children:" clearInterval"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"interval"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:");"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" }"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" if ("}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"timeout"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:") {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E4F0FBD0"},children:" clearTimeout"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"timeout"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:");"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" }"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" };"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" }, ["}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"letters"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"]);"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#5DE4C7C0"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:"span"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#91B4D5",fontStyle:"italic"},children:" id"}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:"text"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:'"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#91B4D5",fontStyle:"italic"},children:" data-value"}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"{text}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#91B4D5",fontStyle:"italic"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"{"}),(0,l.jsx)(e.span,{style:{color:"#E4F0FBD0"},children:"cn"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:"text-4xl uppercase"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:","}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:" bebas"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:","}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:")"}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"}"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:" >"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:" {text}"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" );"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"};"})})]})})})}),(0,l.jsx)(o,{children:"Update the import paths to match your project setup."})]})})]})}),(0,l.jsx)(c,{value:"HTML",children:(0,l.jsxs)(r,{children:[(0,l.jsx)(c,{value:"cli",children:(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npx shadcn@latest add https://atlasui.dev/r/hacker-text-html.json `,__npm__:`npx shadcn@latest add https://atlasui.dev/r/hacker-text-html.json `,__yarn__:`yarn shadcn@latest add https://atlasui.dev/r/hacker-text-html.json `,__pnpm__:`pnpm dlx shadcn@latest add https://atlasui.dev/r/hacker-text-html.json `,__bun__:`bunx --bun shadcn@latest add https://atlasui.dev/r/hacker-text-html.json `,children:(0,l.jsx)(e.code,{"data-language":"bash","data-theme":"default","data-line-numbers":"",children:(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:"npx"}),(0,l.jsx)(e.span,{style:{color:"#ADD7FF"},children:" shadcn@latest"}),(0,l.jsx)(e.span,{style:{color:"#ADD7FF"},children:" add"}),(0,l.jsx)(e.span,{style:{color:"#ADD7FF"},children:" https://atlasui.dev/r/hacker-text-html.json"})]})})})})}),(0,l.jsx)(c,{value:"manual",children:(0,l.jsxs)(d,{children:[(0,l.jsx)(o,{children:"Copy and paste the following code into your project."}),(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"html","data-theme":"default",__rawString__:`Atlas UI `,children:(0,l.jsx)(e.code,{"data-language":"html","data-theme":"default","data-line-numbers":"",children:(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"<"}),(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:"span"}),(0,l.jsx)(e.span,{style:{color:"#5FB3A1",fontStyle:"italic"},children:" id"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:"text"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#5FB3A1",fontStyle:"italic"},children:" class"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:"hacker-text"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#5FB3A1",fontStyle:"italic"},children:" data-value"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:"Atlas UI"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:">"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"Atlas UI"}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:""})]})})})}),(0,l.jsxs)(o,{children:["Add ",(0,l.jsx)(e.code,{"data-line-numbers":"",children:"style.css"})]}),(0,l.jsxs)(e.blockquote,{children:[` `,(0,l.jsx)(e.p,{children:"Styles for this component are optional, you can use your own styles or modify these according to your needs. The magic happens in the HTML file."}),` `]}),(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"css","data-theme":"default",__rawString__:`body { margin: 0; padding: 0; height: 100vh; width: 100%; background: #18181b; display: flex; align-items: center; justify-content: center; } .hacker-text { font-family: "Bebas Neue", sans-serif; text-transform: uppercase; font-size: 4rem; cursor: pointer; color: #fff; } `,children:(0,l.jsxs)(e.code,{"data-language":"css","data-theme":"default","data-line-numbers":"",children:[(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:"body"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#ADD7FF"},children:" margin"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:": "}),(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:"0"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#ADD7FF"},children:" padding"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:": "}),(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:"0"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#ADD7FF"},children:" height"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:": "}),(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:"100vh"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#ADD7FF"},children:" width"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:": "}),(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:"100%"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#ADD7FF"},children:" background"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:": #"}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"18181b"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#ADD7FF"},children:" display"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:": "}),(0,l.jsx)(e.span,{style:{color:"#ADD7FF"},children:"flex"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#ADD7FF"},children:" align-items"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:": "}),(0,l.jsx)(e.span,{style:{color:"#ADD7FF"},children:"center"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#ADD7FF"},children:" justify-content"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:": "}),(0,l.jsx)(e.span,{style:{color:"#ADD7FF"},children:"center"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"}"})}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E4F0FBD0",fontStyle:"italic"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#5FB3A1",fontStyle:"italic"},children:"hacker-text"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#ADD7FF"},children:" font-family"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:": "}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:"Bebas Neue"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#ADD7FF"},children:"sans-serif"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#ADD7FF"},children:" text-transform"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:": "}),(0,l.jsx)(e.span,{style:{color:"#ADD7FF"},children:"uppercase"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#ADD7FF"},children:" font-size"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:": "}),(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:"4rem"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#ADD7FF"},children:" cursor"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:": "}),(0,l.jsx)(e.span,{style:{color:"#ADD7FF"},children:"pointer"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#ADD7FF"},children:" color"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:": #"}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"fff"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"}"})})]})})}),(0,l.jsxs)(o,{children:["Add ",(0,l.jsx)(e.code,{"data-line-numbers":"",children:"script.js"}),"."]}),(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"js","data-theme":"default",__rawString__:`document.addEventListener("DOMContentLoaded", () => { const textElement = document.getElementById("text"); const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; let interval = null; let timeout = null; const scrambleText = (target) => { let iteration = 0; clearInterval(interval); interval = setInterval(() => { if (!target.dataset.value) return; target.innerText = target.innerText .split("") .map((letter, index) => { if (index < iteration) { return target.dataset.value[index]; } return letters[Math.floor(Math.random() * 26)]; }) .join(""); if (iteration >= target.dataset.value.length) { clearInterval(interval); } iteration += 1 / 3; }, 30); }; const applyEffect = () => { if (window.matchMedia("(min-width: 768px)").matches) { textElement.addEventListener("mouseover", (event) => { const target = event.target; scrambleText(target); }); } timeout = setTimeout(() => { scrambleText(textElement); }, 600); }; applyEffect(); window.addEventListener("beforeunload", () => { if (interval) clearInterval(interval); if (timeout) clearTimeout(timeout); }); }); `,children:(0,l.jsxs)(e.code,{"data-language":"js","data-theme":"default","data-line-numbers":"",children:[(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"document"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#E4F0FBD0"},children:"addEventListener"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:"DOMContentLoaded"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:", () "}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:" const"}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:" textElement"}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:" document"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#E4F0FBD0"},children:"getElementById"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:"text"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:");"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:" const"}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:" letters"}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:' "'}),(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:"ABCDEFGHIJKLMNOPQRSTUVWXYZ"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:" let"}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:" interval"}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#D0679D"},children:" null"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:" let"}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:" timeout"}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#D0679D"},children:" null"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:" const"}),(0,l.jsx)(e.span,{style:{color:"#ADD7FF"},children:" scrambleText"}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" ("}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"target"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:") "}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:" let"}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:" iteration"}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:" 0"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E4F0FBD0"},children:" clearInterval"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"interval"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:");"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:" interval"}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#E4F0FBD0"},children:" setInterval"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"(() "}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" if ("}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:"!"}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"target"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"dataset"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"value"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:") "}),(0,l.jsx)(e.span,{style:{color:"#5DE4C7C0"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:" target"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"innerText"}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:" target"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"innerText"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" ."}),(0,l.jsx)(e.span,{style:{color:"#E4F0FBD0"},children:"split"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:'""'}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:")"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" ."}),(0,l.jsx)(e.span,{style:{color:"#E4F0FBD0"},children:"map"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"(("}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"letter"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"index"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:") "}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" if ("}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"index"}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:" iteration"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:") {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#5DE4C7C0"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:" target"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"dataset"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"value"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"["}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"index"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"];"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" }"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#5DE4C7C0"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:" letters"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"["}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"Math"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#E4F0FBD0"},children:"floor"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"Math"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#E4F0FBD0"},children:"random"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"() "}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:"*"}),(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:" 26"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:")];"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" })"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" ."}),(0,l.jsx)(e.span,{style:{color:"#E4F0FBD0"},children:"join"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:'""'}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:");"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" if ("}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"iteration"}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:" >="}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:" target"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"dataset"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"value"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"length"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:") {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E4F0FBD0"},children:" clearInterval"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"interval"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:");"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" }"})}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:" iteration"}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:" +="}),(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:" 1"}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:" /"}),(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:" 3"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" }, "}),(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:"30"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:");"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" };"})}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:" const"}),(0,l.jsx)(e.span,{style:{color:"#ADD7FF"},children:" applyEffect"}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" () "}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" if ("}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"window"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#E4F0FBD0"},children:"matchMedia"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:"(min-width: 768px)"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:")."}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"matches"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:") {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:" textElement"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#E4F0FBD0"},children:"addEventListener"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:"mouseover"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:", ("}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"event"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:") "}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:" const"}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:" target"}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:" event"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"target"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E4F0FBD0"},children:" scrambleText"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"target"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:");"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" });"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" }"})}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:" timeout"}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#E4F0FBD0"},children:" setTimeout"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"(() "}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E4F0FBD0"},children:" scrambleText"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"textElement"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:");"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" }, "}),(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:"600"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:");"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" };"})}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E4F0FBD0"},children:" applyEffect"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"();"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:" window"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#E4F0FBD0"},children:"addEventListener"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:"beforeunload"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:", () "}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" if ("}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"interval"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:") "}),(0,l.jsx)(e.span,{style:{color:"#E4F0FBD0"},children:"clearInterval"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"interval"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:");"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" if ("}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"timeout"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:") "}),(0,l.jsx)(e.span,{style:{color:"#E4F0FBD0"},children:"clearTimeout"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"timeout"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:");"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" });"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"});"})})]})})})]})})]})})]}),` `,(0,l.jsxs)(e.h2,{id:"usage",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#usage",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"Usage"]}),` `,(0,l.jsxs)(h,{children:[(0,l.jsxs)(c,{value:"React",children:[(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { HackerText } from "@/components/hacker-text"; `,children:(0,l.jsx)(e.code,{"data-language":"tsx","data-theme":"default","data-line-numbers":"",children:(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:"import "}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"{"}),(0,l.jsx)(e.span,{style:{color:"#ADD7FF"},children:" HackerText"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" }"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:" from"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:' "'}),(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:"@/components/hacker-text"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:";"})]})})})}),(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:` `,children:(0,l.jsx)(e.code,{"data-language":"tsx","data-theme":"default","data-line-numbers":"",children:(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"<"}),(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:"HackerText"}),(0,l.jsx)(e.span,{style:{color:"#91B4D5",fontStyle:"italic"},children:" text"}),(0,l.jsx)(e.span,{style:{color:"#91B4D5"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:"Atlas UI"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:" />"})]})})})})]}),(0,l.jsxs)(c,{value:"HTML",children:[(0,l.jsxs)(e.p,{children:["Define the text you want to display with Hacker text Effect in a span element. Add ",(0,l.jsx)(e.code,{"data-line-numbers":"",children:"data-value"})," attribute to the span element with the text you want to display, it must be the same as the text you want to display."]}),(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"html","data-theme":"default",__rawString__:`Atlas UI `,children:(0,l.jsx)(e.code,{"data-language":"html","data-theme":"default","data-line-numbers":"",children:(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:"<"}),(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:"span"}),(0,l.jsx)(e.span,{style:{color:"#5FB3A1",fontStyle:"italic"},children:" id"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:"text"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#5FB3A1",fontStyle:"italic"},children:" class"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:"hacker-text"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#5FB3A1",fontStyle:"italic"},children:" data-value"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#5DE4C7"},children:"Atlas UI"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:">"}),(0,l.jsx)(e.span,{style:{color:"#A6ACCD"},children:"Atlas UI"}),(0,l.jsx)(e.span,{style:{color:"#E4F0FB"},children:""})]})})})})]})]})]})}function D(n={}){let{wrapper:e}=n.components||{};return e?(0,l.jsx)(e,{...n,children:(0,l.jsx)(A,{...n})}):A(n)}function a(n,e){throw new Error("Expected "+(e?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return g(_);})(); ;return Component;