_❯Glitch Signal Map

A Canvas 2D signal grid with a per-cell state machine, pulsing accents and glitchy recalibration — throttled to 30fps.

Canvas 2Dstate machineLCG noise30fps

1import { useState } from "react";
2import { GlitchSignalMap } from "@/components/misc/glitch-signal-map/glitch-signal-map.component";
3import { LabsDemoLayout } from "../../components/labs-experiment-frame/labs-experiment-frame.component";
4import {
5  ButtonGroupControl,
6  ControlGroup,
7  ControlPanel,
8  ResetButton,
9} from "../../components/labs-control/labs-control.component";
10import { LabsScreen } from "../../components/labs-screen/labs-screen.component";
11
12const STATES = ["paused", "running"] as const;
13type PlayState = (typeof STATES)[number];
14
15export function GlitchSignalMapDemo() {
16  const [state, setState] = useState<PlayState>("running");
17
18  return (
19    <LabsDemoLayout
20      stage={
21        <LabsScreen>
22          <GlitchSignalMap isAnimating={state === "running"} />
23        </LabsScreen>
24      }
25      controls={
26        <ControlPanel>
27          <ControlGroup title="Animation">
28            <ButtonGroupControl
29              options={STATES}
30              value={state}
31              onChange={setState}
32              formatOption={(option) => option[0].toUpperCase() + option.slice(1)}
33            />
34          </ControlGroup>
35          <ResetButton onReset={() => setState("running")} />
36        </ControlPanel>
37      }
38    />
39  );
40}