1import { Index, onCleanup, onMount } from "solid-js";2import { createSignal } from "solid-js";34const RUNE_COUNT = 9;5const RUNES = Array.from(6 { length: RUNE_COUNT },7 () => String.fromCodePoint(0xe000 + Math.floor(Math.random() * 256)),8);910export function LockRuneCanvas() {11 const [glowIdx, setGlowIdx] = createSignal(-1);1213 onMount(() => {14 let timer: ReturnType<typeof setTimeout>;1516 function scheduleNext() {17 timer = setTimeout(18 () => {19 setGlowIdx(Math.floor(Math.random() * RUNE_COUNT));20 timer = setTimeout(21 () => {22 setGlowIdx(-1);23 scheduleNext();24 },25 2000 + Math.random() * 1500,26 );27 },28 1500 + Math.random() * 3000,29 );30 }3132 scheduleNext();33 onCleanup(() => clearTimeout(timer));34 });3536 return (37 <div class="peach-lock-rune-string" aria-hidden="true">38 <Index each={RUNES}>39 {(char, idx) => (40 <span classList={{ "is-glowing": glowIdx() === idx }}>41 {char()}42 </span>43 )}44 </Index>45 </div>46 );47}