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:T3243,"use client"; import { useEffect, useRef, useState, type CSSProperties, type HTMLAttributes, type PointerEvent } from "react"; import { ArrowRight, Bot, Rocket, Sparkles, type LucideIcon } from "lucide-react"; type Chip = { icon: LucideIcon; label: string }; export interface SpotlightHeroProps extends HTMLAttributes { /** 제목 위 작은 알림 배지 */ badge?: string; /** 제목 첫 줄의 고정된 앞부분 */ prefix?: string; /** 차례로 바뀌는 강조 단어들 */ words?: string[]; /** 제목 둘째 줄 */ suffix?: string; description?: string; primaryLabel?: string; primaryHref?: string; secondaryLabel?: string; secondaryHref?: string; chips?: Chip[]; /** 강조 단어가 바뀌는 간격(ms) */ interval?: number; } const defaultChips: Chip[] = [ { icon: Sparkles, label: "AI 코드 리뷰" }, { icon: Rocket, label: "원클릭 배포" }, { icon: Bot, label: "24시간 AI 튜터" }, ]; const beams = [-7, -4, 4, 7]; export function SpotlightHero({ badge = "AI 실전 프로젝트 반 모집 중", prefix = "아이디어를", words = ["웹사이트로", "모바일 앱으로", "업무 자동화로"], suffix = "직접 만들어 보세요", description = "AI와 함께 기획부터 배포까지, 진짜 서비스를 만들며 배워요.", primaryLabel = "무료로 시작하기", primaryHref = "#", secondaryLabel = "커리큘럼 보기", secondaryHref = "#", chips = defaultChips, interval = 2600, className = "", style, onPointerMove, onPointerLeave, ...props }: SpotlightHeroProps) { const stageRef = useRef(null); const pointer = useRef<{ x: number; y: number } | null>(null); const wordRefs = useRef<(HTMLSpanElement | null)[]>([]); const [index, setIndex] = useState(0); const [widths, setWidths] = useState([]); const count = words.length; // 스포트라이트: 포인터가 있으면 포인터를, 없으면 리사주 곡선을 따라 천천히 떠다닙니다. // 매 프레임 목표 지점으로 조금씩 다가가며(lerp) CSS 변수만 바꿔 리렌더링 없이 움직여요. useEffect(() => { const stage = stageRef.current; if (!stage || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return; let w = stage.offsetWidth; let h = stage.offsetHeight; const observer = new ResizeObserver(() => { w = stage.offsetWidth; h = stage.offsetHeight; }); observer.observe(stage); let x = w / 2; let y = h * 0.35; let last = performance.now(); let frame = 0; const tick = (now: number) => { const target = pointer.current ?? { x: w * (0.5 + 0.32 * Math.sin(now / 2300)), y: h * (0.42 + 0.24 * Math.sin(now / 1700 + 1)) }; const ease = 1 - Math.exp(-(now - last) / 140); last = now; x += (target.x - x) * ease; y += (target.y - y) * ease; stage.style.setProperty("--spot-x", `${x}px`); stage.style.setProperty("--spot-y", `${y}px`); frame = requestAnimationFrame(tick); }; frame = requestAnimationFrame(tick); return () => { cancelAnimationFrame(frame); observer.disconnect(); }; }, []); // 강조 단어 순환 (동작 줄이기 설정이면 첫 단어에 머뭅니다) useEffect(() => { if (count < 2 || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return; const id = window.setInterval(() => setIndex(current => (current + 1) % count), interval); return () => window.clearInterval(id); }, [count, interval]); // 단어마다 실제 너비를 재 두었다가, 바뀔 때 감싼 상자의 width를 transition으로 늘이고 줄입니다. useEffect(() => { const items = wordRefs.current.slice(0, count).filter((item): item is HTMLSpanElement => item !== null); const observer = new ResizeObserver(() => setWidths(items.map(item => item.offsetWidth))); items.forEach(item => observer.observe(item)); return () => observer.disconnect(); }, [count]); function handleMove(event: PointerEvent) { const box = event.currentTarget.getBoundingClientRect(); pointer.current = { x: event.clientX - box.left, y: event.clientY - box.top }; if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) { event.currentTarget.style.setProperty("--spot-x", `${pointer.current.x}px`); event.currentTarget.style.setProperty("--spot-y", `${pointer.current.y}px`); } onPointerMove?.(event); } function handleLeave(event: PointerEvent) { pointer.current = null; onPointerLeave?.(event); } return (

{/* 배경 레이어: 위에서 내려오는 빛 → 옅은 격자 → 스포트라이트 안에서만 밝아지는 격자 → 빛 번짐 → 격자를 타고 떨어지는 빛줄기 */}

{beams.map((column, i) => ( ))}

NEW {badge}

{`${prefix} ${words.join(", ")} ${suffix}`} {prefix}{" "} {words.map((word, i) => ( { wordRefs.current[i] = element; }} data-state={i === index ? "active" : i === (index - 1 + count) % count ? "leaving" : "waiting"} className="spotlight-hero-word col-start-1 row-start-1 w-max bg-[linear-gradient(100deg,#a5b4fc,#e9d5ff_45%,#67e8f9)] bg-clip-text pb-[0.08em] whitespace-nowrap text-transparent" > {word} ))} {suffix}

{description}

{primaryLabel} {secondaryLabel}

{label}

); } export default SpotlightHero;1e:Tc364,

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/spotlight-hero\",\"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/spotlight-hero\"}]}]}"}}],["$","div",null,{"className":"library_container__grs86","children":["$","$L1c",null,{"item":{"slug":"spotlight-hero","tags":["React","Tailwind","CSS mask","requestAnimationFrame","랜딩 페이지"],"files":[{"name":"spotlight-hero.tsx","content":"$1d","language":"tsx"},{"name":"demo.tsx","content":"import { SpotlightHero } from \"@/components/ui/spotlight-hero\";\n\nexport default function Demo() {\n return ;\n}","language":"tsx"}],"level":"응용","title":"스포트라이트 히어로","author":"AI Coder 예제","license":"MIT","category":"hero","exercise":"words 배열에 나만의 강조 단어를 넣고 interval을 1800으로 줄여 보세요. 스포트라이트 색(rgba(99,102,241,…))을 브랜드 색으로 바꾸고, 격자 간격 48px을 32px로 바꿔 분위기를 비교해 보세요.","sourceUrl":"","objectives":["같은 격자를 두 겹 깔고 mask-image의 원형 그라데이션으로 스포트라이트 안만 밝게 보이게 하기","requestAnimationFrame과 lerp로 포인터를 부드럽게 따라가고, 포인터가 없을 때는 사인 곡선으로 스스로 떠다니게 하기","data-state 속성과 CSS transition으로 단어가 위로 흐려지며 바뀌는 효과 만들기","단어 너비를 ResizeObserver로 재고 width를 transition해 레이아웃이 튀지 않게 하기"],"description":"격자 위를 떠다니는 스포트라이트와 바뀌는 강조 단어로 시선을 잡는 랜딩 첫 화면","previewHtml":"$1e","dependencies":"React · Tailwind CSS · lucide-react"},"highlighted":[{"name":"spotlight-hero.tsx","lines":[[{"content":"\"use client\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[],[{"content":"import","color":"#FF7B72"},{"content":" { useEffect, useRef, useState, ","color":"#E6EDF3"},{"content":"type","color":"#FF7B72"},{"content":" CSSProperties, ","color":"#E6EDF3"},{"content":"type","color":"#FF7B72"},{"content":" HTMLAttributes, ","color":"#E6EDF3"},{"content":"type","color":"#FF7B72"},{"content":" PointerEvent } ","color":"#E6EDF3"},{"content":"from","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"react\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[{"content":"import","color":"#FF7B72"},{"content":" { ArrowRight, Bot, Rocket, Sparkles, ","color":"#E6EDF3"},{"content":"type","color":"#FF7B72"},{"content":" LucideIcon } ","color":"#E6EDF3"},{"content":"from","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"lucide-react\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[],[{"content":"type","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"Chip","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" { ","color":"#E6EDF3"},{"content":"icon","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"LucideIcon","color":"#FFA657"},{"content":"; ","color":"#E6EDF3"},{"content":"label","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":" };","color":"#E6EDF3"}],[],[{"content":"export","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"interface","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"SpotlightHeroProps","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"extends","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"HTMLAttributes","color":"#79C0FF"},{"content":"<","color":"#E6EDF3"},{"content":"HTMLElement","color":"#FFA657"},{"content":"> {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"/** 제목 위 작은 알림 배지 */","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"badge","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":"prefix","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":"words","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":"suffix","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"description","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"primaryLabel","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"primaryHref","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"secondaryLabel","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"secondaryHref","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"chips","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"Chip","color":"#FFA657"},{"content":"[];","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"/** 강조 단어가 바뀌는 간격(ms) */","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"interval","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}],[],[{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"defaultChips","color":"#79C0FF"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"Chip","color":"#FFA657"},{"content":"[] ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"}],[{"content":" { icon: Sparkles, label: ","color":"#E6EDF3"},{"content":"\"AI 코드 리뷰\"","color":"#A5D6FF"},{"content":" },","color":"#E6EDF3"}],[{"content":" { icon: Rocket, label: ","color":"#E6EDF3"},{"content":"\"원클릭 배포\"","color":"#A5D6FF"},{"content":" },","color":"#E6EDF3"}],[{"content":" { icon: Bot, label: ","color":"#E6EDF3"},{"content":"\"24시간 AI 튜터\"","color":"#A5D6FF"},{"content":" },","color":"#E6EDF3"}],[{"content":"];","color":"#E6EDF3"}],[],[{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"beams","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":"7","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":"4","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"4","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"7","color":"#79C0FF"},{"content":"];","color":"#E6EDF3"}],[],[{"content":"export","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"SpotlightHero","color":"#D2A8FF"},{"content":"({","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"badge","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"AI 실전 프로젝트 반 모집 중\"","color":"#A5D6FF"},{"content":",","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"prefix","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"아이디어를\"","color":"#A5D6FF"},{"content":",","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"words","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"},{"content":"\"웹사이트로\"","color":"#A5D6FF"},{"content":", ","color":"#E6EDF3"},{"content":"\"모바일 앱으로\"","color":"#A5D6FF"},{"content":", ","color":"#E6EDF3"},{"content":"\"업무 자동화로\"","color":"#A5D6FF"},{"content":"],","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"suffix","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"직접 만들어 보세요\"","color":"#A5D6FF"},{"content":",","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"description","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"AI와 함께 기획부터 배포까지, 진짜 서비스를 만들며 배워요.\"","color":"#A5D6FF"},{"content":",","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"primaryLabel","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"무료로 시작하기\"","color":"#A5D6FF"},{"content":",","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"primaryHref","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"#\"","color":"#A5D6FF"},{"content":",","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"secondaryLabel","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"커리큘럼 보기\"","color":"#A5D6FF"},{"content":",","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"secondaryHref","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"#\"","color":"#A5D6FF"},{"content":",","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"chips","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" defaultChips,","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"interval","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"2600","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":"style","color":"#FFA657"},{"content":",","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"onPointerMove","color":"#FFA657"},{"content":",","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"onPointerLeave","color":"#FFA657"},{"content":",","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"...","color":"#FF7B72"},{"content":"props","color":"#FFA657"}],[{"content":"}","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"SpotlightHeroProps","color":"#FFA657"},{"content":") {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"stageRef","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useRef","color":"#D2A8FF"},{"content":"<","color":"#E6EDF3"},{"content":"HTMLElement","color":"#FFA657"},{"content":">(","color":"#E6EDF3"},{"content":"null","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"pointer","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useRef","color":"#D2A8FF"},{"content":"<{ ","color":"#E6EDF3"},{"content":"x","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":"; ","color":"#E6EDF3"},{"content":"y","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":" } ","color":"#E6EDF3"},{"content":"|","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"null","color":"#79C0FF"},{"content":">(","color":"#E6EDF3"},{"content":"null","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"wordRefs","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useRef","color":"#D2A8FF"},{"content":"<(","color":"#E6EDF3"},{"content":"HTMLSpanElement","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"|","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"null","color":"#79C0FF"},{"content":")[]>([]);","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"},{"content":"index","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"setIndex","color":"#79C0FF"},{"content":"] ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useState","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"},{"content":"widths","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"setWidths","color":"#79C0FF"},{"content":"] ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useState","color":"#D2A8FF"},{"content":"<","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":"[]>([]);","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"count","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" words.","color":"#E6EDF3"},{"content":"length","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"// 스포트라이트: 포인터가 있으면 포인터를, 없으면 리사주 곡선을 따라 천천히 떠다닙니다.","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"// 매 프레임 목표 지점으로 조금씩 다가가며(lerp) CSS 변수만 바꿔 리렌더링 없이 움직여요.","color":"#8B949E"}],[{"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":"stage","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" stageRef.current;","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"!","color":"#FF7B72"},{"content":"stage ","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":"let","color":"#FF7B72"},{"content":" w ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" stage.offsetWidth;","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"let","color":"#FF7B72"},{"content":" h ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" stage.offsetHeight;","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"observer","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"new","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"ResizeObserver","color":"#D2A8FF"},{"content":"(() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":" w ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" stage.offsetWidth;","color":"#E6EDF3"}],[{"content":" h ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" stage.offsetHeight;","color":"#E6EDF3"}],[{"content":" });","color":"#E6EDF3"}],[{"content":" observer.","color":"#E6EDF3"},{"content":"observe","color":"#D2A8FF"},{"content":"(stage);","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"let","color":"#FF7B72"},{"content":" x ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" w ","color":"#E6EDF3"},{"content":"/","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"2","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"let","color":"#FF7B72"},{"content":" y ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" h ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0.35","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"let","color":"#FF7B72"},{"content":" last ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" performance.","color":"#E6EDF3"},{"content":"now","color":"#D2A8FF"},{"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":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"target","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" pointer.current ","color":"#E6EDF3"},{"content":"??","color":"#FF7B72"},{"content":" { x: w ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"0.5","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0.32","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" Math.","color":"#E6EDF3"},{"content":"sin","color":"#D2A8FF"},{"content":"(now ","color":"#E6EDF3"},{"content":"/","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"2300","color":"#79C0FF"},{"content":")), y: h ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"0.42","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0.24","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" Math.","color":"#E6EDF3"},{"content":"sin","color":"#D2A8FF"},{"content":"(now ","color":"#E6EDF3"},{"content":"/","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1700","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":"ease","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" Math.","color":"#E6EDF3"},{"content":"exp","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":"(now ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" last) ","color":"#E6EDF3"},{"content":"/","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"140","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":" last ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" now;","color":"#E6EDF3"}],[{"content":" x ","color":"#E6EDF3"},{"content":"+=","color":"#FF7B72"},{"content":" (target.x ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" x) ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" ease;","color":"#E6EDF3"}],[{"content":" y ","color":"#E6EDF3"},{"content":"+=","color":"#FF7B72"},{"content":" (target.y ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" y) ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" ease;","color":"#E6EDF3"}],[{"content":" stage.style.","color":"#E6EDF3"},{"content":"setProperty","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"--spot-x\"","color":"#A5D6FF"},{"content":", ","color":"#E6EDF3"},{"content":"`${","color":"#A5D6FF"},{"content":"x","color":"#E6EDF3"},{"content":"}px`","color":"#A5D6FF"},{"content":");","color":"#E6EDF3"}],[{"content":" stage.style.","color":"#E6EDF3"},{"content":"setProperty","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"--spot-y\"","color":"#A5D6FF"},{"content":", ","color":"#E6EDF3"},{"content":"`${","color":"#A5D6FF"},{"content":"y","color":"#E6EDF3"},{"content":"}px`","color":"#A5D6FF"},{"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":" ","color":"#E6EDF3"},{"content":"cancelAnimationFrame","color":"#D2A8FF"},{"content":"(frame);","color":"#E6EDF3"}],[{"content":" observer.","color":"#E6EDF3"},{"content":"disconnect","color":"#D2A8FF"},{"content":"();","color":"#E6EDF3"}],[{"content":" };","color":"#E6EDF3"}],[{"content":" }, []);","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"// 강조 단어 순환 (동작 줄이기 설정이면 첫 단어에 머뭅니다)","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"useEffect","color":"#D2A8FF"},{"content":"(() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (count ","color":"#E6EDF3"},{"content":"<","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"2","color":"#79C0FF"},{"content":" ","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":"id","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" window.","color":"#E6EDF3"},{"content":"setInterval","color":"#D2A8FF"},{"content":"(() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"setIndex","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"current","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" (current ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":") ","color":"#E6EDF3"},{"content":"%","color":"#FF7B72"},{"content":" count), interval);","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" () ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" window.","color":"#E6EDF3"},{"content":"clearInterval","color":"#D2A8FF"},{"content":"(id);","color":"#E6EDF3"}],[{"content":" }, [count, interval]);","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"// 단어마다 실제 너비를 재 두었다가, 바뀔 때 감싼 상자의 width를 transition으로 늘이고 줄입니다.","color":"#8B949E"}],[{"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":"items","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" wordRefs.current.","color":"#E6EDF3"},{"content":"slice","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":", count).","color":"#E6EDF3"},{"content":"filter","color":"#D2A8FF"},{"content":"((","color":"#E6EDF3"},{"content":"item","color":"#FFA657"},{"content":")","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"item","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"is","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"HTMLSpanElement","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" item ","color":"#E6EDF3"},{"content":"!==","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"null","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"observer","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"new","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"ResizeObserver","color":"#D2A8FF"},{"content":"(() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"setWidths","color":"#D2A8FF"},{"content":"(items.","color":"#E6EDF3"},{"content":"map","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"item","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" item.offsetWidth)));","color":"#E6EDF3"}],[{"content":" items.","color":"#E6EDF3"},{"content":"forEach","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"item","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" observer.","color":"#E6EDF3"},{"content":"observe","color":"#D2A8FF"},{"content":"(item));","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" () ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" observer.","color":"#E6EDF3"},{"content":"disconnect","color":"#D2A8FF"},{"content":"();","color":"#E6EDF3"}],[{"content":" }, [count]);","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"handleMove","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"event","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"PointerEvent","color":"#FFA657"},{"content":"<","color":"#E6EDF3"},{"content":"HTMLElement","color":"#FFA657"},{"content":">) {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"box","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" event.currentTarget.","color":"#E6EDF3"},{"content":"getBoundingClientRect","color":"#D2A8FF"},{"content":"();","color":"#E6EDF3"}],[{"content":" pointer.current ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" { x: event.clientX ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" box.left, y: event.clientY ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" box.top };","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","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":" event.currentTarget.style.","color":"#E6EDF3"},{"content":"setProperty","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"--spot-x\"","color":"#A5D6FF"},{"content":", ","color":"#E6EDF3"},{"content":"`${","color":"#A5D6FF"},{"content":"pointer","color":"#E6EDF3"},{"content":".","color":"#A5D6FF"},{"content":"current","color":"#E6EDF3"},{"content":".","color":"#A5D6FF"},{"content":"x","color":"#E6EDF3"},{"content":"}px`","color":"#A5D6FF"},{"content":");","color":"#E6EDF3"}],[{"content":" event.currentTarget.style.","color":"#E6EDF3"},{"content":"setProperty","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"--spot-y\"","color":"#A5D6FF"},{"content":", ","color":"#E6EDF3"},{"content":"`${","color":"#A5D6FF"},{"content":"pointer","color":"#E6EDF3"},{"content":".","color":"#A5D6FF"},{"content":"current","color":"#E6EDF3"},{"content":".","color":"#A5D6FF"},{"content":"y","color":"#E6EDF3"},{"content":"}px`","color":"#A5D6FF"},{"content":");","color":"#E6EDF3"}],[{"content":" }","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"onPointerMove","color":"#D2A8FF"},{"content":"?.(event);","color":"#E6EDF3"}],[{"content":" }","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"handleLeave","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"event","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"PointerEvent","color":"#FFA657"},{"content":"<","color":"#E6EDF3"},{"content":"HTMLElement","color":"#FFA657"},{"content":">) {","color":"#E6EDF3"}],[{"content":" pointer.current ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"null","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"onPointerLeave","color":"#D2A8FF"},{"content":"?.(event);","color":"#E6EDF3"}],[{"content":" }","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"section","color":"#7EE787"}],[{"content":" ","color":"#E6EDF3"},{"content":"ref","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"stageRef","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"{...","color":"#FF7B72"},{"content":"props","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"onPointerMove","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"handleMove","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"onPointerLeave","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"handleLeave","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"style","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"{ ","color":"#E6EDF3"},{"content":"\"--spot-x\"","color":"#A5D6FF"},{"content":": ","color":"#E6EDF3"},{"content":"\"50%\"","color":"#A5D6FF"},{"content":", ","color":"#E6EDF3"},{"content":"\"--spot-y\"","color":"#A5D6FF"},{"content":": ","color":"#E6EDF3"},{"content":"\"35%\"","color":"#A5D6FF"},{"content":", ","color":"#E6EDF3"},{"content":"...","color":"#FF7B72"},{"content":"style } ","color":"#E6EDF3"},{"content":"as","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"CSSProperties","color":"#FFA657"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`relative isolate flex items-center justify-center overflow-hidden bg-[#05060f] px-5 py-5 text-center text-white sm:px-8 sm:py-20 ${","color":"#A5D6FF"},{"content":"className","color":"#E6EDF3"},{"content":"}`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"}],[{"content":" >","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"/* 배경 레이어: 위에서 내려오는 빛 → 옅은 격자 → 스포트라이트 안에서만 밝아지는 격자 → 빛 번짐 → 격자를 타고 떨어지는 빛줄기 */","color":"#8B949E"},{"content":"}","color":"#FF7B72"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"aria-hidden","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"pointer-events-none absolute inset-0 -z-10\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"absolute inset-0 bg-[radial-gradient(ellipse_70%_55%_at_50%_-12%,rgba(99,102,241,.38),transparent_70%)]\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"spotlight-hero-grid spotlight-hero-grid-faint absolute inset-0\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"spotlight-hero-grid spotlight-hero-grid-lit absolute inset-0\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"spotlight-hero-dots absolute inset-0\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"spotlight-hero-glow absolute inset-0\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"beams.","color":"#E6EDF3"},{"content":"map","color":"#D2A8FF"},{"content":"((","color":"#E6EDF3"},{"content":"column","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"i","color":"#FFA657"},{"content":") ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"key","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"column","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"spotlight-hero-beam absolute top-0 h-full w-[9px]\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"style","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"{ left: ","color":"#E6EDF3"},{"content":"`calc(50% + ${","color":"#A5D6FF"},{"content":"column","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"*","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"48","color":"#79C0FF"},{"content":" ","color":"#A5D6FF"},{"content":"-","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"4","color":"#79C0FF"},{"content":"}px)`","color":"#A5D6FF"},{"content":", animationDelay: ","color":"#E6EDF3"},{"content":"`${","color":"#A5D6FF"},{"content":"i","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"*","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"-","color":"#FF7B72"},{"content":"1.7","color":"#79C0FF"},{"content":"}s`","color":"#A5D6FF"},{"content":" }","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" />","color":"#E6EDF3"}],[{"content":" ))","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"absolute inset-x-0 bottom-0 h-1/3 bg-gradient-to-t from-[#05060f] to-transparent\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"relative flex max-w-3xl flex-col items-center\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"p","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] py-1 pr-3.5 pl-1 text-xs text-indigo-100/80 backdrop-blur-sm\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"rounded-full bg-indigo-400/20 px-2 py-0.5 text-[11px] font-semibold text-indigo-200\"","color":"#A5D6FF"},{"content":">NEW","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"badge","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"}],[],[{"content":" <","color":"#E6EDF3"},{"content":"h1","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"mt-3.5 text-[clamp(1.75rem,7vw,4.25rem)] leading-[1.15] font-bold tracking-[-0.035em] break-keep sm:mt-6\"","color":"#A5D6FF"},{"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":"`${","color":"#A5D6FF"},{"content":"prefix","color":"#E6EDF3"},{"content":"} ${","color":"#A5D6FF"},{"content":"words","color":"#E6EDF3"},{"content":".","color":"#A5D6FF"},{"content":"join","color":"#D2A8FF"},{"content":"(","color":"#A5D6FF"},{"content":"\", \"","color":"#A5D6FF"},{"content":")","color":"#A5D6FF"},{"content":"} ${","color":"#A5D6FF"},{"content":"suffix","color":"#E6EDF3"},{"content":"}`","color":"#A5D6FF"},{"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":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"spotlight-hero-ink\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"prefix","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"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-grid grid-cols-[minmax(0,1fr)] justify-items-center transition-[width] duration-700 ease-[cubic-bezier(.2,.8,.2,1)]\"","color":"#A5D6FF"}],[{"content":" ","color":"#E6EDF3"},{"content":"style","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"{ width: widths[index] ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"`${","color":"#A5D6FF"},{"content":"widths","color":"#E6EDF3"},{"content":"[","color":"#A5D6FF"},{"content":"index","color":"#E6EDF3"},{"content":"]","color":"#A5D6FF"},{"content":"}px`","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"undefined","color":"#79C0FF"},{"content":" }","color":"#E6EDF3"},{"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":"i","color":"#FFA657"},{"content":") ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"}],[{"content":" ","color":"#E6EDF3"},{"content":"key","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"word","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"ref","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"element","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":" wordRefs.current[i] ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" element;","color":"#E6EDF3"}],[{"content":" }","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"data-state","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"i ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" index ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"active\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" i ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" (index ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" count) ","color":"#E6EDF3"},{"content":"%","color":"#FF7B72"},{"content":" count ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"leaving\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"waiting\"","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"spotlight-hero-word col-start-1 row-start-1 w-max bg-[linear-gradient(100deg,#a5b4fc,#e9d5ff_45%,#67e8f9)] bg-clip-text pb-[0.08em] whitespace-nowrap text-transparent\"","color":"#A5D6FF"}],[{"content":" >","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"word","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ))","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":"\"spotlight-hero-ink block\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"suffix","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"","color":"#E6EDF3"}],[{"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-3 max-w-md text-sm leading-relaxed text-balance break-keep text-slate-300/80 sm:mt-5 sm:max-w-lg sm:text-base\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"description","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"","color":"#E6EDF3"}],[],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"mt-5 flex flex-wrap items-center justify-center gap-2.5 sm:mt-8 sm:gap-3\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"a","color":"#7EE787"}],[{"content":" ","color":"#E6EDF3"},{"content":"href","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"primaryHref","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"group inline-flex items-center gap-2 rounded-full bg-white px-5 py-2.5 text-sm font-semibold text-neutral-950 shadow-[0_0_0_1px_rgba(255,255,255,.15),0_10px_32px_-6px_rgba(129,140,248,.75)] transition duration-300 hover:-translate-y-0.5 hover:shadow-[0_0_0_1px_rgba(255,255,255,.2),0_14px_40px_-6px_rgba(129,140,248,.95)] focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-indigo-300 sm:px-6 sm:py-3\"","color":"#A5D6FF"}],[{"content":" >","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"primaryLabel","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" <","color":"#E6EDF3"},{"content":"ArrowRight","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"aria-hidden","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"size-4 transition-transform duration-300 group-hover:translate-x-1\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"a","color":"#7EE787"}],[{"content":" ","color":"#E6EDF3"},{"content":"href","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"secondaryHref","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"inline-flex items-center rounded-full border border-white/15 bg-white/[0.04] px-5 py-2.5 text-sm font-medium text-white/90 backdrop-blur-sm transition duration-300 hover:border-white/30 hover:bg-white/10 focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-indigo-300 sm:px-6 sm:py-3\"","color":"#A5D6FF"}],[{"content":" >","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"secondaryLabel","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[],[{"content":" <","color":"#E6EDF3"},{"content":"ul","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"mt-4 flex flex-wrap justify-center gap-2 sm:mt-10\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"chips.","color":"#E6EDF3"},{"content":"map","color":"#D2A8FF"},{"content":"(({ ","color":"#E6EDF3"},{"content":"icon","color":"#FFA657"},{"content":": ","color":"#E6EDF3"},{"content":"Icon","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"label","color":"#FFA657"},{"content":" }, ","color":"#E6EDF3"},{"content":"i","color":"#FFA657"},{"content":") ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"li","color":"#7EE787"}],[{"content":" ","color":"#E6EDF3"},{"content":"key","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"label","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"spotlight-hero-chip inline-flex items-center gap-1.5 rounded-full border border-white/10 bg-white/[0.05] px-3 py-1.5 text-xs text-slate-200/85 backdrop-blur-md\"","color":"#A5D6FF"}],[{"content":" ","color":"#E6EDF3"},{"content":"style","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"{ animationDelay: ","color":"#E6EDF3"},{"content":"`${","color":"#A5D6FF"},{"content":"i","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"*","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"-","color":"#FF7B72"},{"content":"1.4","color":"#79C0FF"},{"content":"}s`","color":"#A5D6FF"},{"content":" }","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" >","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"Icon","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"aria-hidden","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"size-3.5 text-indigo-300\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"label","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ))","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[],[{"content":" <","color":"#E6EDF3"},{"content":"style","color":"#7EE787"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"`","color":"#A5D6FF"}],[{"content":" .spotlight-hero-grid {","color":"#A5D6FF"}],[{"content":" background-image: linear-gradient(to right, var(--line) 1px, transparent 1px), linear-gradient(to bottom, var(--line) 1px, transparent 1px);","color":"#A5D6FF"}],[{"content":" background-size: 48px 48px;","color":"#A5D6FF"}],[{"content":" background-position: calc(50% + 24px) 0;","color":"#A5D6FF"}],[{"content":" }","color":"#A5D6FF"}],[{"content":" .spotlight-hero-grid-faint {","color":"#A5D6FF"}],[{"content":" --line: rgba(255, 255, 255, .05);","color":"#A5D6FF"}],[{"content":" mask-image: radial-gradient(ellipse 75% 65% at 50% 40%, #000 30%, transparent 85%);","color":"#A5D6FF"}],[{"content":" }","color":"#A5D6FF"}],[{"content":" /* 같은 격자를 밝은 색으로 한 번 더 깔고, 스포트라이트 원 안만 보이도록 마스크로 오려 냅니다. */","color":"#A5D6FF"}],[{"content":" .spotlight-hero-grid-lit {","color":"#A5D6FF"}],[{"content":" --line: rgba(165, 180, 252, .5);","color":"#A5D6FF"}],[{"content":" mask-image: radial-gradient(250px circle at var(--spot-x) var(--spot-y), #000, transparent 75%);","color":"#A5D6FF"}],[{"content":" }","color":"#A5D6FF"}],[{"content":" /* 격자 교차점마다 작은 점을 찍어 스포트라이트 안에서 반짝이게 합니다. */","color":"#A5D6FF"}],[{"content":" .spotlight-hero-dots {","color":"#A5D6FF"}],[{"content":" background-image: radial-gradient(circle, #c7d2fe 1.2px, transparent 2px);","color":"#A5D6FF"}],[{"content":" background-size: 48px 48px;","color":"#A5D6FF"}],[{"content":" background-position: calc(50% + .5px) calc(-24px + .5px);","color":"#A5D6FF"}],[{"content":" mask-image: radial-gradient(170px circle at var(--spot-x) var(--spot-y), #000, transparent 80%);","color":"#A5D6FF"}],[{"content":" }","color":"#A5D6FF"}],[{"content":" .spotlight-hero-glow {","color":"#A5D6FF"}],[{"content":" background: radial-gradient(460px circle at var(--spot-x) var(--spot-y), rgba(99, 102, 241, .26), transparent 65%),","color":"#A5D6FF"}],[{"content":" radial-gradient(140px circle at var(--spot-x) var(--spot-y), rgba(199, 210, 254, .08), transparent 70%);","color":"#A5D6FF"}],[{"content":" }","color":"#A5D6FF"}],[{"content":" .spotlight-hero-beam { mask-image: linear-gradient(transparent, #000 15%, #000 60%, transparent); }","color":"#A5D6FF"}],[{"content":" .spotlight-hero-beam::after {","color":"#A5D6FF"}],[{"content":" content: \"\"; position: absolute; left: 4px; top: -30%; width: 1px; height: 22%;","color":"#A5D6FF"}],[{"content":" background: linear-gradient(transparent, rgba(129, 140, 248, .8) 75%, #fff);","color":"#A5D6FF"}],[{"content":" box-shadow: 0 0 8px 1px rgba(129, 140, 248, .55);","color":"#A5D6FF"}],[{"content":" animation: spotlight-hero-drop 7s cubic-bezier(.4, 0, .6, 1) infinite;","color":"#A5D6FF"}],[{"content":" animation-delay: inherit;","color":"#A5D6FF"}],[{"content":" }","color":"#A5D6FF"}],[{"content":" .spotlight-hero-ink { background: linear-gradient(180deg, #fff 30%, rgba(224, 231, 255, .62)); -webkit-background-clip: text; background-clip: text; color: transparent; }","color":"#A5D6FF"}],[{"content":" .spotlight-hero-word { transition: transform .7s cubic-bezier(.2, .8, .2, 1), opacity .5s ease, filter .6s ease; }","color":"#A5D6FF"}],[{"content":" .spotlight-hero-word[data-state=\"waiting\"] { transform: translateY(.6em); opacity: 0; filter: blur(10px); }","color":"#A5D6FF"}],[{"content":" .spotlight-hero-word[data-state=\"leaving\"] { transform: translateY(-.6em); opacity: 0; filter: blur(10px); }","color":"#A5D6FF"}],[{"content":" .spotlight-hero-chip { animation: spotlight-hero-float 5.5s ease-in-out infinite; }","color":"#A5D6FF"}],[{"content":" @keyframes spotlight-hero-drop { 0%, 20% { top: -30%; } 100% { top: 110%; } }","color":"#A5D6FF"}],[{"content":" @keyframes spotlight-hero-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }","color":"#A5D6FF"}],[{"content":" @media (prefers-reduced-motion: reduce) {","color":"#A5D6FF"}],[{"content":" .spotlight-hero-beam::after, .spotlight-hero-chip { animation: none; }","color":"#A5D6FF"}],[{"content":" .spotlight-hero-word { transition: none; }","color":"#A5D6FF"}],[{"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":"#FFA657"},{"content":"default","color":"#FF7B72"},{"content":" ","color":"#FFA657"},{"content":"SpotlightHero;","color":"#E6EDF3"}]]},{"name":"demo.tsx","lines":[[{"content":"import","color":"#FF7B72"},{"content":" { SpotlightHero } ","color":"#E6EDF3"},{"content":"from","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"@/components/ui/spotlight-hero\"","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":"SpotlightHero","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"min-h-screen\"","color":"#A5D6FF"},{"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/spotlight-hero"}],["$","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/spotlight-hero"}],["$","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",{}]]

예제에 포함된 파일