1c:I[88678,["8500","static/chunks/8500-01a63dafd809e317.js","3725","static/chunks/3725-1271f26d54bf6b57.js","7645","static/chunks/7645-1ca8d29f22f0cbd8.js","9695","static/chunks/9695-49a7c029c38ce6ae.js","2555","static/chunks/2555-08f52e68208a57e8.js","2395","static/chunks/2395-5e305d89191e3da6.js","294","static/chunks/app/library/%5Bslug%5D/page-2dadb29d2213cdf3.js"],"LibraryDetail"] 1f:I[86869,[],"IconMark"] 1d:T2048,"use client"; import { Fragment, useEffect, useState, type CSSProperties, type HTMLAttributes } from "react"; type CellState = "hidden" | "scramble" | "flash" | "done"; type Cell = { char: string; glyph: string; state: CellState }; type View = { cells: Cell[]; caret: number; resting: boolean }; type Plan = { chars: string[]; appear: number[]; settle: number[]; leave: number[]; done: number; end: number }; export interface DecodeTextProps extends HTMLAttributes { /** 차례로 해독될 문장들 */ phrases?: string[]; /** 글자 하나가 자리 잡는 간격(ms). 작을수록 빨라요 */ speed?: number; /** 완성된 문장을 보여 주는 시간(ms) */ hold?: number; /** 영문·숫자 자리에 섞일 랜덤 글자들 (한글 자리는 랜덤 한글로 섞여요) */ glyphs?: string; /** 완성된 글자에 입힐 배경 그라데이션 */ gradient?: string; /** 해독 위치를 따라다니는 커서 표시 */ caret?: boolean; } const defaultPhrases = ["아이디어를 코드로", "Build with AI", "AI와 함께 만들기", "Ship it today."]; function settledView(text: string): View { const cells = Array.from(text, char => ({ char, glyph: char, state: "done" as const })); return { cells, caret: cells.length, resting: true }; } const kindOf = (char: string) => (/[가-힣]/.test(char) ? "ko" : /[a-z]/.test(char) ? "lower" : /[A-Z]/.test(char) ? "upper" : /[0-9]/.test(char) ? "digit" : "etc"); const pick = (list: string[]) => list[Math.floor(Math.random() * list.length)]; function randomGlyph(char: string, pool: string[]) { // 한글 자리는 랜덤 한글 음절(가~힣)로 섞어야 폭과 질감이 비슷해 보여요. const kind = kindOf(char); if (kind === "ko") return String.fromCharCode(0xac00 + Math.floor(Math.random() * 11172)); // 영문은 대·소문자처럼 같은 종류에서 주로 뽑아 폭 차이를 줄이고, 가끔 기호를 섞어 질감을 더해요. const same = pool.filter(glyph => kindOf(glyph) === kind); return pick(same.length > 0 && Math.random() > 0.2 ? same : pool); } // 글자마다 '나타남 → 자리 잡음 → 사라짐' 시각을 미리 정해 둡니다. 약간의 무작위 지연이 해독하는 느낌을 살려요. function makePlan(text: string, speed: number, hold: number): Plan { const chars = Array.from(text); const last = chars.length - 1; const appear = chars.map((_, i) => i * speed * 0.35); const settle = chars.map((_, i) => 450 + i * speed + Math.random() * speed * 2.5); const done = Math.max(...settle) + 300; const leave = chars.map((_, i) => done + hold + (last - i) * speed * 0.45 + Math.random() * speed); return { chars, appear, settle, leave, done, end: Math.max(...leave) + 500 }; } function viewAt(plan: Plan, t: number, pool: string[]): View { const cells = plan.chars.map((char, i): Cell => { let state: CellState = "hidden"; if (t >= plan.leave[i] + 280) state = "hidden"; else if (t >= plan.leave[i]) state = "scramble"; else if (t >= plan.settle[i] + 260) state = "done"; else if (t >= plan.settle[i]) state = "flash"; else if (t >= plan.appear[i]) state = "scramble"; if (char === " " && state === "scramble") state = "hidden"; return { char, state, glyph: state === "scramble" ? randomGlyph(char, pool) : char }; }); const front = cells.findIndex(cell => cell.state !== "done" && cell.state !== "flash"); return { cells, caret: front === -1 ? cells.length : front, resting: t >= plan.done && t < plan.leave[plan.leave.length - 1] }; } function Glyph({ cell }: { cell: Cell }) { if (cell.state === "done") return {cell.char}; if (cell.state === "flash") return {cell.char}; if (cell.state === "hidden") return {cell.char}; // 최종 글자를 투명하게 깔아 자리(폭)를 먼저 잡고, 그 위에 랜덤 글자를 겹쳐 보여 줍니다 → 폭이 흔들리지 않아요. return ( {cell.char} {cell.glyph} ); } function Caret({ blink }: { blink: boolean }) { return ( ); } export function DecodeText({ phrases = defaultPhrases, speed = 70, hold = 2000, glyphs = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789#$%&*+=/<>?", gradient = "linear-gradient(90deg, #ffffff 0%, #c7d2fe 35%, #f0abfc 65%, #67e8f9 100%)", caret = true, className = "", ...props }: DecodeTextProps) { const key = phrases.join("\n"); const [view, setView] = useState(() => settledView(phrases[0] ?? "")); useEffect(() => { const list = key.split("\n"); if (!key || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return; const pool = Array.from(glyphs); let phrase = 0; let plan = makePlan(list[0], speed, hold); let start = performance.now(); let lastDraw = 0; let wasResting = false; let frame = 0; const tick = (now: number) => { if (now - start > plan.end) { phrase = (phrase + 1) % list.length; plan = makePlan(list[phrase], speed, hold); start = now; } // 랜덤 글자는 60ms마다 바꿔요. 매 프레임(16ms) 바꾸면 너무 빨라 오히려 덜 보입니다. if (now - lastDraw > 60) { lastDraw = now; const next = viewAt(plan, now - start, pool); // 완성된 문장을 보여 주는 동안은 화면이 같으니 다시 그리지 않아요. if (!(next.resting && wasResting)) setView(next); wasResting = next.resting; } frame = requestAnimationFrame(tick); }; frame = requestAnimationFrame(tick); return () => cancelAnimationFrame(frame); }, [key, speed, hold, glyphs]); // 공백 기준으로 단어를 묶어야 영어 단어가 중간에서 줄바꿈되지 않아요. const words: { start: number; cells: Cell[] }[] = []; view.cells.forEach((cell, i) => { if (cell.char === " ") return; const previous = words[words.length - 1]; if (previous && previous.start + previous.cells.length === i) previous.cells.push(cell); else words.push({ start: i, cells: [cell] }); }); return ( {phrases.join(" / ")} {words.map((word, w) => { const end = word.start + word.cells.length; return ( {w > 0 && " "} {word.cells.map((cell, i) => ( {caret && view.caret === word.start + i && } ))} {caret && view.caret === end && } ); })} ); } export default DecodeText;1e:T6c12,

13:["$","main",null,{"id":"main-content","tabIndex":-1,"className":"library_page__IxXwj","children":[["$","div",null,{"className":"library_headerSpace__cyKqF","children":"$L1b"}],["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"LearningResource\",\"name\":\"디코드 텍스트\",\"description\":\"랜덤 글자가 왼쪽부터 제자리를 찾아가며 문장을 해독하는 텍스트 효과\",\"url\":\"https://aicoder.kr/library/decode-text\",\"inLanguage\":\"ko-KR\",\"learningResourceType\":\"코드 예제 및 실습\",\"educationalLevel\":\"기초\"},{\"@type\":\"BreadcrumbList\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"홈\",\"item\":\"https://aicoder.kr/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"라이브러리\",\"item\":\"https://aicoder.kr/library\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"디코드 텍스트\",\"item\":\"https://aicoder.kr/library/decode-text\"}]}]}"}}],["$","div",null,{"className":"library_container__grs86","children":["$","$L1c",null,{"item":{"slug":"decode-text","tags":["React","Tailwind","requestAnimationFrame","텍스트 애니메이션","background-clip"],"files":[{"name":"decode-text.tsx","content":"$1d","language":"tsx"},{"name":"demo.tsx","content":"import { DecodeText } from \"@/components/ui/decode-text\";\n\nexport default function Demo() {\n return (\n

AI CODER · DECODING

\n \n

랜덤 글자가 왼쪽부터 제자리를 찾아 문장을 완성해요

\n );\n}","language":"tsx"}],"level":"기초","title":"디코드 텍스트","author":"AI Coder 예제","license":"MIT","category":"text-effect","exercise":"phrases에 내 프로젝트 슬로건 3개를 넣고 speed를 30과 120으로 바꿔 느낌을 비교해 보세요. glyphs를 \"01\"로 바꾸면 이진수가 해독되는 느낌이 나요.","sourceUrl":"","objectives":["글자마다 나타남·정착·사라짐 시각을 미리 계산해 두고 경과 시간으로 상태를 정하는 타임라인 만들기","최종 글자를 투명하게 깔아 폭을 고정한 뒤 랜덤 글자를 겹쳐 레이아웃 흔들림 없애기","background-clip: text로 완성된 글자에만 그라데이션 입히기","공백 단위로 단어를 묶어 줄바꿈을 지키고, 스크린 리더에는 원래 문장을 읽어 주기"],"description":"랜덤 글자가 왼쪽부터 제자리를 찾아가며 문장을 해독하는 텍스트 효과","previewHtml":"$1e","dependencies":"React · Tailwind CSS"},"highlighted":[{"name":"decode-text.tsx","lines":[[{"content":"\"use client\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[],[{"content":"import","color":"#FF7B72"},{"content":" { Fragment, useEffect, useState, ","color":"#E6EDF3"},{"content":"type","color":"#FF7B72"},{"content":" CSSProperties, ","color":"#E6EDF3"},{"content":"type","color":"#FF7B72"},{"content":" HTMLAttributes } ","color":"#E6EDF3"},{"content":"from","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"react\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[],[{"content":"type","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"CellState","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"hidden\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"|","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"scramble\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"|","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"flash\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"|","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"done\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[{"content":"type","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"Cell","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" { ","color":"#E6EDF3"},{"content":"char","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":"; ","color":"#E6EDF3"},{"content":"glyph","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":"; ","color":"#E6EDF3"},{"content":"state","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"CellState","color":"#FFA657"},{"content":" };","color":"#E6EDF3"}],[{"content":"type","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"View","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" { ","color":"#E6EDF3"},{"content":"cells","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"Cell","color":"#FFA657"},{"content":"[]; ","color":"#E6EDF3"},{"content":"caret","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":"; ","color":"#E6EDF3"},{"content":"resting","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"boolean","color":"#79C0FF"},{"content":" };","color":"#E6EDF3"}],[{"content":"type","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"Plan","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" { ","color":"#E6EDF3"},{"content":"chars","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":"[]; ","color":"#E6EDF3"},{"content":"appear","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":"[]; ","color":"#E6EDF3"},{"content":"settle","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":"[]; ","color":"#E6EDF3"},{"content":"leave","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":"[]; ","color":"#E6EDF3"},{"content":"done","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":"; ","color":"#E6EDF3"},{"content":"end","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":" };","color":"#E6EDF3"}],[],[{"content":"export","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"interface","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"DecodeTextProps","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"extends","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"HTMLAttributes","color":"#79C0FF"},{"content":"<","color":"#E6EDF3"},{"content":"HTMLSpanElement","color":"#FFA657"},{"content":"> {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"/** 차례로 해독될 문장들 */","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"phrases","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":"[];","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"/** 글자 하나가 자리 잡는 간격(ms). 작을수록 빨라요 */","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"speed","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"/** 완성된 문장을 보여 주는 시간(ms) */","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"hold","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"/** 영문·숫자 자리에 섞일 랜덤 글자들 (한글 자리는 랜덤 한글로 섞여요) */","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"glyphs","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"/** 완성된 글자에 입힐 배경 그라데이션 */","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"gradient","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"/** 해독 위치를 따라다니는 커서 표시 */","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"caret","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"boolean","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}],[],[{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"defaultPhrases","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"},{"content":"\"아이디어를 코드로\"","color":"#A5D6FF"},{"content":", ","color":"#E6EDF3"},{"content":"\"Build with AI\"","color":"#A5D6FF"},{"content":", ","color":"#E6EDF3"},{"content":"\"AI와 함께 만들기\"","color":"#A5D6FF"},{"content":", ","color":"#E6EDF3"},{"content":"\"Ship it today.\"","color":"#A5D6FF"},{"content":"];","color":"#E6EDF3"}],[],[{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"settledView","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"text","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":")","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"View","color":"#FFA657"},{"content":" {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"cells","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" Array.","color":"#E6EDF3"},{"content":"from","color":"#D2A8FF"},{"content":"(text, ","color":"#E6EDF3"},{"content":"char","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ({ char, glyph: char, state: ","color":"#E6EDF3"},{"content":"\"done\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"as","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" }));","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" { cells, caret: cells.","color":"#E6EDF3"},{"content":"length","color":"#79C0FF"},{"content":", resting: ","color":"#E6EDF3"},{"content":"true","color":"#79C0FF"},{"content":" };","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}],[],[{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"kindOf","color":"#D2A8FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"char","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":") ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"/","color":"#A5D6FF"},{"content":"[가-힣]","color":"#79C0FF"},{"content":"/","color":"#A5D6FF"},{"content":".","color":"#E6EDF3"},{"content":"test","color":"#D2A8FF"},{"content":"(char) ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"ko\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" /","color":"#A5D6FF"},{"content":"[a-z]","color":"#79C0FF"},{"content":"/","color":"#A5D6FF"},{"content":".","color":"#E6EDF3"},{"content":"test","color":"#D2A8FF"},{"content":"(char) ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"lower\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" /","color":"#A5D6FF"},{"content":"[A-Z]","color":"#79C0FF"},{"content":"/","color":"#A5D6FF"},{"content":".","color":"#E6EDF3"},{"content":"test","color":"#D2A8FF"},{"content":"(char) ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"upper\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" /","color":"#A5D6FF"},{"content":"[0-9]","color":"#79C0FF"},{"content":"/","color":"#A5D6FF"},{"content":".","color":"#E6EDF3"},{"content":"test","color":"#D2A8FF"},{"content":"(char) ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"digit\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"etc\"","color":"#A5D6FF"},{"content":");","color":"#E6EDF3"}],[{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"pick","color":"#D2A8FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"list","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":"[]) ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" list[Math.","color":"#E6EDF3"},{"content":"floor","color":"#D2A8FF"},{"content":"(Math.","color":"#E6EDF3"},{"content":"random","color":"#D2A8FF"},{"content":"() ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" list.","color":"#E6EDF3"},{"content":"length","color":"#79C0FF"},{"content":")];","color":"#E6EDF3"}],[],[{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"randomGlyph","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"char","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"pool","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":"[]) {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"// 한글 자리는 랜덤 한글 음절(가~힣)로 섞어야 폭과 질감이 비슷해 보여요.","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"kind","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"kindOf","color":"#D2A8FF"},{"content":"(char);","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (kind ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"ko\"","color":"#A5D6FF"},{"content":") ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" String.","color":"#E6EDF3"},{"content":"fromCharCode","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"0xac00","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" Math.","color":"#E6EDF3"},{"content":"floor","color":"#D2A8FF"},{"content":"(Math.","color":"#E6EDF3"},{"content":"random","color":"#D2A8FF"},{"content":"() ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"11172","color":"#79C0FF"},{"content":"));","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"// 영문은 대·소문자처럼 같은 종류에서 주로 뽑아 폭 차이를 줄이고, 가끔 기호를 섞어 질감을 더해요.","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"same","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" pool.","color":"#E6EDF3"},{"content":"filter","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"glyph","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"kindOf","color":"#D2A8FF"},{"content":"(glyph) ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" kind);","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"pick","color":"#D2A8FF"},{"content":"(same.","color":"#E6EDF3"},{"content":"length","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":">","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" Math.","color":"#E6EDF3"},{"content":"random","color":"#D2A8FF"},{"content":"() ","color":"#E6EDF3"},{"content":">","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0.2","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" same ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" pool);","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}],[],[{"content":"// 글자마다 '나타남 → 자리 잡음 → 사라짐' 시각을 미리 정해 둡니다. 약간의 무작위 지연이 해독하는 느낌을 살려요.","color":"#8B949E"}],[{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"makePlan","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"text","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"speed","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"hold","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":")","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"Plan","color":"#FFA657"},{"content":" {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"chars","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" Array.","color":"#E6EDF3"},{"content":"from","color":"#D2A8FF"},{"content":"(text);","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"last","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" chars.","color":"#E6EDF3"},{"content":"length","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"appear","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" chars.","color":"#E6EDF3"},{"content":"map","color":"#D2A8FF"},{"content":"((","color":"#E6EDF3"},{"content":"_","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"i","color":"#FFA657"},{"content":") ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" i ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" speed ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0.35","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"settle","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" chars.","color":"#E6EDF3"},{"content":"map","color":"#D2A8FF"},{"content":"((","color":"#E6EDF3"},{"content":"_","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"i","color":"#FFA657"},{"content":") ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"450","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" i ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" speed ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" Math.","color":"#E6EDF3"},{"content":"random","color":"#D2A8FF"},{"content":"() ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" speed ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"2.5","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"done","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" Math.","color":"#E6EDF3"},{"content":"max","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"...","color":"#FF7B72"},{"content":"settle) ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"300","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"leave","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" chars.","color":"#E6EDF3"},{"content":"map","color":"#D2A8FF"},{"content":"((","color":"#E6EDF3"},{"content":"_","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"i","color":"#FFA657"},{"content":") ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" done ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" hold ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" (last ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" i) ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" speed ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0.45","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" Math.","color":"#E6EDF3"},{"content":"random","color":"#D2A8FF"},{"content":"() ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" speed);","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" { chars, appear, settle, leave, done, end: Math.","color":"#E6EDF3"},{"content":"max","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"...","color":"#FF7B72"},{"content":"leave) ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"500","color":"#79C0FF"},{"content":" };","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}],[],[{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"viewAt","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"plan","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"Plan","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"t","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"pool","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":"[])","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"View","color":"#FFA657"},{"content":" {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"cells","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" plan.chars.","color":"#E6EDF3"},{"content":"map","color":"#D2A8FF"},{"content":"((","color":"#E6EDF3"},{"content":"char","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"i","color":"#FFA657"},{"content":")","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"Cell","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"let","color":"#FF7B72"},{"content":" state","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"CellState","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"hidden\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (t ","color":"#E6EDF3"},{"content":">=","color":"#FF7B72"},{"content":" plan.leave[i] ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"280","color":"#79C0FF"},{"content":") state ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"hidden\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"else","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (t ","color":"#E6EDF3"},{"content":">=","color":"#FF7B72"},{"content":" plan.leave[i]) state ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"scramble\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"else","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (t ","color":"#E6EDF3"},{"content":">=","color":"#FF7B72"},{"content":" plan.settle[i] ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"260","color":"#79C0FF"},{"content":") state ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"done\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"else","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (t ","color":"#E6EDF3"},{"content":">=","color":"#FF7B72"},{"content":" plan.settle[i]) state ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"flash\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"else","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (t ","color":"#E6EDF3"},{"content":">=","color":"#FF7B72"},{"content":" plan.appear[i]) state ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"scramble\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (char ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\" \"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" state ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"scramble\"","color":"#A5D6FF"},{"content":") state ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"hidden\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" { char, state, glyph: state ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"scramble\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"randomGlyph","color":"#D2A8FF"},{"content":"(char, pool) ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" char };","color":"#E6EDF3"}],[{"content":" });","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"front","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" cells.","color":"#E6EDF3"},{"content":"findIndex","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"cell","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" cell.state ","color":"#E6EDF3"},{"content":"!==","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"done\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" cell.state ","color":"#E6EDF3"},{"content":"!==","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"flash\"","color":"#A5D6FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" { cells, caret: front ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":"1","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" cells.","color":"#E6EDF3"},{"content":"length","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" front, resting: t ","color":"#E6EDF3"},{"content":">=","color":"#FF7B72"},{"content":" plan.done ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" t ","color":"#E6EDF3"},{"content":"<","color":"#FF7B72"},{"content":" plan.leave[plan.leave.","color":"#E6EDF3"},{"content":"length","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":"] };","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}],[],[{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"Glyph","color":"#D2A8FF"},{"content":"({ ","color":"#E6EDF3"},{"content":"cell","color":"#FFA657"},{"content":" }","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" { ","color":"#E6EDF3"},{"content":"cell","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"Cell","color":"#FFA657"},{"content":" }) {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (cell.state ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"done\"","color":"#A5D6FF"},{"content":") ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"cell.char","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (cell.state ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"flash\"","color":"#A5D6FF"},{"content":") ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"decode-text-flash\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"cell.char","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (cell.state ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"hidden\"","color":"#A5D6FF"},{"content":") ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"invisible\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"cell.char","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"// 최종 글자를 투명하게 깔아 자리(폭)를 먼저 잡고, 그 위에 랜덤 글자를 겹쳐 보여 줍니다 → 폭이 흔들리지 않아요.","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"relative inline-block\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"invisible\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"cell.char","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"decode-text-glyph absolute top-0 left-1/2 -translate-x-1/2\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"cell.glyph","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" );","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}],[],[{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"Caret","color":"#D2A8FF"},{"content":"({ ","color":"#E6EDF3"},{"content":"blink","color":"#FFA657"},{"content":" }","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" { ","color":"#E6EDF3"},{"content":"blink","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"boolean","color":"#79C0FF"},{"content":" }) {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"relative inline-block w-0\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`decode-text-caret absolute bottom-[-0.12em] left-[0.04em] h-[1em] w-[0.07em] min-w-[2px] rounded-full ${","color":"#A5D6FF"},{"content":"blink","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"decode-text-blink\"","color":"#A5D6FF"},{"content":" ","color":"#A5D6FF"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"\"}`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"},{"content":" />","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" );","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}],[],[{"content":"export","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"DecodeText","color":"#D2A8FF"},{"content":"({","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"phrases","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" defaultPhrases,","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"speed","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"70","color":"#79C0FF"},{"content":",","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"hold","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"2000","color":"#79C0FF"},{"content":",","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"glyphs","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789#$%&*+=/<>?\"","color":"#A5D6FF"},{"content":",","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"gradient","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"linear-gradient(90deg, #ffffff 0%, #c7d2fe 35%, #f0abfc 65%, #67e8f9 100%)\"","color":"#A5D6FF"},{"content":",","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"caret","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"true","color":"#79C0FF"},{"content":",","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"\"","color":"#A5D6FF"},{"content":",","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"...","color":"#FF7B72"},{"content":"props","color":"#FFA657"}],[{"content":"}","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"DecodeTextProps","color":"#FFA657"},{"content":") {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"key","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" phrases.","color":"#E6EDF3"},{"content":"join","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"","color":"#A5D6FF"},{"content":"\\n","color":"#FF7B72"},{"content":"\"","color":"#A5D6FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"},{"content":"view","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"setView","color":"#79C0FF"},{"content":"] ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useState","color":"#D2A8FF"},{"content":"(() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"settledView","color":"#D2A8FF"},{"content":"(phrases[","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":"] ","color":"#E6EDF3"},{"content":"??","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"\"","color":"#A5D6FF"},{"content":"));","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"useEffect","color":"#D2A8FF"},{"content":"(() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"list","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" key.","color":"#E6EDF3"},{"content":"split","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"","color":"#A5D6FF"},{"content":"\\n","color":"#FF7B72"},{"content":"\"","color":"#A5D6FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"!","color":"#FF7B72"},{"content":"key ","color":"#E6EDF3"},{"content":"||","color":"#FF7B72"},{"content":" window.","color":"#E6EDF3"},{"content":"matchMedia","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"(prefers-reduced-motion: reduce)\"","color":"#A5D6FF"},{"content":").matches) ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"pool","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" Array.","color":"#E6EDF3"},{"content":"from","color":"#D2A8FF"},{"content":"(glyphs);","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"let","color":"#FF7B72"},{"content":" phrase ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"let","color":"#FF7B72"},{"content":" plan ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"makePlan","color":"#D2A8FF"},{"content":"(list[","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":"], speed, hold);","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"let","color":"#FF7B72"},{"content":" start ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" performance.","color":"#E6EDF3"},{"content":"now","color":"#D2A8FF"},{"content":"();","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"let","color":"#FF7B72"},{"content":" lastDraw ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"let","color":"#FF7B72"},{"content":" wasResting ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"false","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"let","color":"#FF7B72"},{"content":" frame ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"tick","color":"#D2A8FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"now","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":") ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (now ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" start ","color":"#E6EDF3"},{"content":">","color":"#FF7B72"},{"content":" plan.end) {","color":"#E6EDF3"}],[{"content":" phrase ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" (phrase ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":") ","color":"#E6EDF3"},{"content":"%","color":"#FF7B72"},{"content":" list.","color":"#E6EDF3"},{"content":"length","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" plan ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"makePlan","color":"#D2A8FF"},{"content":"(list[phrase], speed, hold);","color":"#E6EDF3"}],[{"content":" start ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" now;","color":"#E6EDF3"}],[{"content":" }","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"// 랜덤 글자는 60ms마다 바꿔요. 매 프레임(16ms) 바꾸면 너무 빨라 오히려 덜 보입니다.","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (now ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" lastDraw ","color":"#E6EDF3"},{"content":">","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"60","color":"#79C0FF"},{"content":") {","color":"#E6EDF3"}],[{"content":" lastDraw ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" now;","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"next","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"viewAt","color":"#D2A8FF"},{"content":"(plan, now ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" start, pool);","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"// 완성된 문장을 보여 주는 동안은 화면이 같으니 다시 그리지 않아요.","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"!","color":"#FF7B72"},{"content":"(next.resting ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" wasResting)) ","color":"#E6EDF3"},{"content":"setView","color":"#D2A8FF"},{"content":"(next);","color":"#E6EDF3"}],[{"content":" wasResting ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" next.resting;","color":"#E6EDF3"}],[{"content":" }","color":"#E6EDF3"}],[{"content":" frame ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"requestAnimationFrame","color":"#D2A8FF"},{"content":"(tick);","color":"#E6EDF3"}],[{"content":" };","color":"#E6EDF3"}],[{"content":" frame ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"requestAnimationFrame","color":"#D2A8FF"},{"content":"(tick);","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" () ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"cancelAnimationFrame","color":"#D2A8FF"},{"content":"(frame);","color":"#E6EDF3"}],[{"content":" }, [key, speed, hold, glyphs]);","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"// 공백 기준으로 단어를 묶어야 영어 단어가 중간에서 줄바꿈되지 않아요.","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"words","color":"#79C0FF"},{"content":":","color":"#FF7B72"},{"content":" { ","color":"#E6EDF3"},{"content":"start","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":"; ","color":"#E6EDF3"},{"content":"cells","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"Cell","color":"#FFA657"},{"content":"[] }[] ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" [];","color":"#E6EDF3"}],[{"content":" view.cells.","color":"#E6EDF3"},{"content":"forEach","color":"#D2A8FF"},{"content":"((","color":"#E6EDF3"},{"content":"cell","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"i","color":"#FFA657"},{"content":") ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (cell.char ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\" \"","color":"#A5D6FF"},{"content":") ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"previous","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" words[words.","color":"#E6EDF3"},{"content":"length","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":"];","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (previous ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" previous.start ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" previous.cells.","color":"#E6EDF3"},{"content":"length","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" i) previous.cells.","color":"#E6EDF3"},{"content":"push","color":"#D2A8FF"},{"content":"(cell);","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"else","color":"#FF7B72"},{"content":" words.","color":"#E6EDF3"},{"content":"push","color":"#D2A8FF"},{"content":"({ start: i, cells: [cell] });","color":"#E6EDF3"}],[{"content":" });","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`inline-block ${","color":"#A5D6FF"},{"content":"className","color":"#E6EDF3"},{"content":"}`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"{...","color":"#FF7B72"},{"content":"props","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"sr-only\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"phrases.","color":"#E6EDF3"},{"content":"join","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\" / \"","color":"#A5D6FF"},{"content":")","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"aria-hidden","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"decode-text-ink\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"style","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"{ ","color":"#E6EDF3"},{"content":"\"--decode-text-gradient\"","color":"#A5D6FF"},{"content":": gradient } ","color":"#E6EDF3"},{"content":"as","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"CSSProperties","color":"#FFA657"},{"content":"}","color":"#FF7B72"},{"content":">","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"words.","color":"#E6EDF3"},{"content":"map","color":"#D2A8FF"},{"content":"((","color":"#E6EDF3"},{"content":"word","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"w","color":"#FFA657"},{"content":") ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"end","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" word.start ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" word.cells.","color":"#E6EDF3"},{"content":"length","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"Fragment","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"key","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"word.start","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":">","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"w ","color":"#E6EDF3"},{"content":">","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\" \"","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"inline-block whitespace-nowrap\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"word.cells.","color":"#E6EDF3"},{"content":"map","color":"#D2A8FF"},{"content":"((","color":"#E6EDF3"},{"content":"cell","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"i","color":"#FFA657"},{"content":") ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"Fragment","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"key","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"i","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":">","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"caret ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" view.caret ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" word.start ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" i ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" <","color":"#E6EDF3"},{"content":"Caret","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"blink","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"view.resting","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" />","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" <","color":"#E6EDF3"},{"content":"Glyph","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"cell","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"cell","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" />","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ))","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"caret ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" view.caret ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" end ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" <","color":"#E6EDF3"},{"content":"Caret","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"blink","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"view.resting","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" />","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" );","color":"#E6EDF3"}],[{"content":" })","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"style","color":"#7EE787"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"`","color":"#A5D6FF"}],[{"content":" .decode-text-ink { background: var(--decode-text-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }","color":"#A5D6FF"}],[{"content":" .decode-text-glyph { color: #67e8f9; opacity: .75; text-shadow: 0 0 .4em rgba(103, 232, 249, .6); }","color":"#A5D6FF"}],[{"content":" .decode-text-flash { color: #fff; text-shadow: 0 0 .45em rgba(199, 210, 254, .95); }","color":"#A5D6FF"}],[{"content":" .decode-text-caret { background: linear-gradient(#67e8f9, #818cf8); box-shadow: 0 0 .5em rgba(103, 232, 249, .7); }","color":"#A5D6FF"}],[{"content":" .decode-text-blink { animation: decode-text-blink 1s step-end infinite; }","color":"#A5D6FF"}],[{"content":" @keyframes decode-text-blink { 50% { opacity: 0; } }","color":"#A5D6FF"}],[{"content":" @media (prefers-reduced-motion: reduce) { .decode-text-blink { animation: none; } }","color":"#A5D6FF"}],[{"content":" `","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"},{"content":"","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" );","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}],[],[{"content":"export","color":"#FF7B72"},{"content":" ","color":"#FFA657"},{"content":"default","color":"#FF7B72"},{"content":" ","color":"#FFA657"},{"content":"DecodeText;","color":"#E6EDF3"}]]},{"name":"demo.tsx","lines":[[{"content":"import","color":"#FF7B72"},{"content":" { DecodeText } ","color":"#E6EDF3"},{"content":"from","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"@/components/ui/decode-text\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[],[{"content":"export","color":"#FF7B72"},{"content":" ","color":"#FFA657"},{"content":"default","color":"#FF7B72"},{"content":" ","color":"#FFA657"},{"content":"function","color":"#FF7B72"},{"content":" ","color":"#FFA657"},{"content":"Demo","color":"#D2A8FF"},{"content":"() ","color":"#FFA657"},{"content":"{","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"grid min-h-screen place-items-center overflow-hidden bg-[radial-gradient(ellipse_at_50%_50%,#17193d,#05060d_68%)] p-6 text-center\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"p","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"text-[11px] font-medium tracking-[0.35em] text-cyan-200/60\"","color":"#A5D6FF"},{"content":">AI CODER · DECODING","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"h1","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"mt-5 text-[clamp(2.25rem,10vw,5.5rem)] leading-[1.15] font-bold tracking-tight text-white\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"DecodeText","color":"#7EE787"},{"content":" />","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"p","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"mt-5 text-sm text-balance break-keep text-slate-400\"","color":"#A5D6FF"},{"content":">랜덤 글자가 왼쪽부터 제자리를 찾아 문장을 완성해요","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" );","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}]]}]}]}]]}] 16:null 1a:[["$","title","0",{"children":"디코드 텍스트 · AI Coder"}],["$","meta","1",{"name":"description","content":"랜덤 글자가 왼쪽부터 제자리를 찾아가며 문장을 해독하는 텍스트 효과"}],["$","meta","2",{"name":"application-name","content":"AI Coder"}],["$","link","3",{"rel":"manifest","href":"/manifest.webmanifest","crossOrigin":"$undefined"}],["$","meta","4",{"name":"referrer","content":"strict-origin-when-cross-origin"}],["$","meta","5",{"name":"robots","content":"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1"}],["$","meta","6",{"name":"category","content":"education"}],["$","link","7",{"rel":"canonical","href":"https://aicoder.kr/library/decode-text"}],["$","meta","8",{"name":"naver-site-verification","content":"3347449a2b36f2b5cea3e0cd9fb49ae3959ff348"}],["$","meta","9",{"property":"og:title","content":"디코드 텍스트 · AI Coder"}],["$","meta","10",{"property":"og:description","content":"랜덤 글자가 왼쪽부터 제자리를 찾아가며 문장을 해독하는 텍스트 효과"}],["$","meta","11",{"property":"og:url","content":"https://aicoder.kr/library/decode-text"}],["$","meta","12",{"property":"og:site_name","content":"AI Coder"}],["$","meta","13",{"property":"og:locale","content":"ko_KR"}],["$","meta","14",{"property":"og:image","content":"https://aicoder.kr/social-card.png"}],["$","meta","15",{"property":"og:image:width","content":"1200"}],["$","meta","16",{"property":"og:image:height","content":"630"}],["$","meta","17",{"property":"og:image:alt","content":"AI Coder · AI 코딩 교육과 실전 프로젝트"}],["$","meta","18",{"property":"og:type","content":"website"}],["$","meta","19",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","20",{"name":"twitter:title","content":"디코드 텍스트 · AI Coder"}],["$","meta","21",{"name":"twitter:description","content":"랜덤 글자가 왼쪽부터 제자리를 찾아가며 문장을 해독하는 텍스트 효과"}],["$","meta","22",{"name":"twitter:image","content":"https://aicoder.kr/social-card.png"}],["$","link","23",{"rel":"icon","href":"/favicon.ico?766d9da6178db116","type":"image/x-icon","sizes":"16x16"}],["$","link","24",{"rel":"icon","href":"/icon.png?96c6ddf66156e856","type":"image/png","sizes":"64x64"}],["$","link","25",{"rel":"apple-touch-icon","href":"/apple-icon.png?87c64c22e9bd6762","type":"image/png","sizes":"180x180"}],["$","$L1f","26",{}]]

예제에 포함된 파일