/* global React */
/* Background circuit schematic — a public CD4060 timer / LED-flasher
reference design, traced into vector form with all text labels
stripped. Recolored copper via CSS, rendered very faint, and tiled
vertically to fill the page band. */
// All elements stroke="currentColor" fill="none" so the parent's
// `color: var(--copper)` controls the tint.
// Animated "current flow" path. Computes its own length on mount so
// the pulse moves at a constant physical speed regardless of route
// length — that's what makes two routes sharing an initial segment
// look like one pulse that splits at the junction.
function FlowPath({ d, speed = 110, delay = 0 }) {
const ref = React.useRef(null);
React.useEffect(() => {
const path = ref.current;
if (!path) return;
const length = path.getTotalLength();
const dashLen = 26;
const gapLen = length + 60;
const cycle = dashLen + gapLen;
const durationMs = (cycle / speed) * 1000;
path.style.strokeDasharray = `${dashLen} ${gapLen}`;
const animation = path.animate(
[
{ strokeDashoffset: 0 },
{ strokeDashoffset: -cycle },
],
{
duration: durationMs,
iterations: Infinity,
delay: delay * 1000,
easing: 'linear',
},
);
return () => animation.cancel();
}, [d, speed, delay]);
return ;
}
// Schematic primitives ------------------------------------------------------
// Horizontal resistor, body 24 wide, 40 total with leads.
// dir='v' rotates to vertical orientation.
function R({ x, y, dir = 'h' }) {
const t = dir === 'v' ? `translate(${x},${y}) rotate(90)` : `translate(${x},${y})`;
return (
);
}
// Potentiometer — resistor with arrow tap from above.
function Pot({ x, y, dir = 'h' }) {
const t = dir === 'v' ? `translate(${x},${y}) rotate(90)` : `translate(${x},${y})`;
return (
);
}
// Ceramic (non-polarized) capacitor — two parallel plates.
function CapC({ x, y, dir = 'h' }) {
const t = dir === 'v' ? `translate(${x},${y}) rotate(90)` : `translate(${x},${y})`;
return (
);
}
// Electrolytic capacitor — flat plate + curved plate.
function CapE({ x, y, dir = 'h' }) {
const t = dir === 'v' ? `translate(${x},${y}) rotate(90)` : `translate(${x},${y})`;
return (
);
}
// Diode — anode on the (untransformed) left, cathode on the right.
// dir rotates: 'right' default, 'down' 90, 'left' 180, 'up' 270.
const ROT = { right: 0, down: 90, left: 180, up: 270 };
function Diode({ x, y, dir = 'right' }) {
return (
);
}
// Zener diode — like diode but with bent cathode bar.
function Zener({ x, y, dir = 'right' }) {
return (
);
}
// LED — diode with two outward light arrows.
function LED({ x, y, dir = 'right' }) {
return (
);
}
// NPN transistor — base on left, collector up, emitter down with arrow OUT.
function NPN({ x, y }) {
return (
);
}
// PNP transistor — base on left, emitter arrow points IN toward base.
function PNP({ x, y }) {
return (
);
}
// IC chip — rectangle with notch and pin marks.
function IC({ x, y, w = 70, h = 130, pins = 8 }) {
const half = pins / 2;
const pinSpacing = (h - 20) / (half - 1);
const pinYs = Array.from({ length: half }, (_, i) => 10 + i * pinSpacing);
return (
{pinYs.map((py, i) => (
))}
);
}
// Transformer — two coils with three humps each, parallel core lines.
function Transformer({ x, y }) {
return (
{/* Primary coil humps face right */}
{/* Secondary coil humps face left */}
{/* Core */}
{/* Primary leads (left side) */}
{/* Secondary leads (right side) */}
);
}
// Bridge rectifier — square outline with 4 diode marks inside, AC on
// top/bottom corners, DC on left/right corners.
function Bridge({ x, y, size = 50 }) {
const s = size;
const m = s / 2;
return (
{/* outer diamond */}
{/* 4 small diode triangles inside, oriented toward + output (right) */}
{/* top-left arm: anode top, cathode toward right (output) */}
{/* top-right arm */}
{/* bottom-right arm */}
{/* bottom-left arm */}
);
}
// Ground symbol — stacked horizontal lines.
function Ground({ x, y }) {
return (
);
}
// SPST switch — two terminals, one open contact lever.
function SwitchSym({ x, y }) {
return (
);
}
// Single schematic instance ------------------------------------------------
function Schematic() {
return (
<>
{/* === Rails === */}
{/* top rail */}
{/* ground rail */}
{/* === Left: transformer + bridge + C1 + ground === */}
{/* AC primary leads continue off the left edge (no source drawn) */}
{/* secondary into bridge AC corners (top and bottom of diamond) */}
{/* DC outputs: + on right of diamond → up to top rail; − on left → down to ground */}
{/* C1 electrolytic, vertical, across DC */}
{/* === VD5 freewheel on top rail (cathode toward left) === */}
{/* === R1 horizontal, R2 vertical, V1 NPN === */}
{/* small bus to R1 */}
{/* R2 vertical between rails */}
{/* base from R1 path */}
{/* collector up to top rail */}
{/* emitter down to ground rail */}
{/* === C2 across top rail to IC supply === */}
{/* === IC1 (CD4060) center === */}
{/* VDD (pin 16) — top-left pin → C2 / top rail */}
{/* Vss (pin 8) — bottom-left → ground */}
{/* pin 10 → RP1 tap */}
{/* pin 11 → R3/R4 network bottom */}
{/* pin 12 (reset) → right-side wire down to V2 area */}
{/* pin Q14 (pin 3) → V2 base */}
{/* pin 9 */}
{/* === RP1 + R3 timing network for CD4060 === */}
{/* === C3 across timing network === */}
{/* === R4 bottom + VD6 + VD7 toward ground === */}
{/* === R5 vertical, right of IC, to ground rail === */}
{/* === Right block: VD8, V2, R6, V3, VZ, R8, R7, LED, S1 === */}
{/* base */}
{/* collector to top rail */}
{/* emitter to ground side network */}
{/* R6 1k */}
{/* R8 horizontal */}
{/* R7 vertical */}
{/* small vertical bus joins on right */}
{/* === Inter-tile connectors === */}
{/* Vertical stubs at the top and bottom edges, placed
symmetrically around the viewBox center (380) so they survive
a horizontal mirror transform and still meet edge-to-edge
between any pair of variant tiles. */}
{/* === Current flow routes === */}
{/* Both routes start at the V+ rail entry and share the rail
segment from x=210 to x=345 — pulses coincide there, then
split at the V1 collector junction. */}
{/* Route A1: V+ → V1 → ground rail */}
{/* Route A2: V+ → IC supply → through IC body → ground rail */}
);
}
// Second schematic — a 3-stage discrete NPN amplifier chain with input
// pot and output LED. Deliberately different topology from the CD4060
// one above so adjacent tiles don't read as repeats.
function SchematicB() {
return (
<>
{/* === Rails === */}
{/* === Power bypass electrolytic === */}
{/* === Input pot === */}
{/* === Stage 1: R1 + Q1, coupling C1 to next stage === */}
{/* === Stage 2: R2 base bias, R3 collector pull-up, Q2 === */}
{/* === Stage 3: R4 base bias, output Q3 with LED on collector === */}
{/* === Two small ceramic decoupling caps near rails === */}
{/* === Inter-tile connectors — same symmetric set as Schematic A === */}
{/* === Current flow routes === */}
{/* Both start at left rail entry, share x=60→170, then split at
the pot junction: one drops down through Q1's stage, the other
continues right to the Q3 output stage. */}
{/* Route B1: V+ → pot → Q1 → ground rail */}
{/* Route B2: V+ → far right → R5/LED/Q3 → ground rail */}
);
}
// Background layer ---------------------------------------------------------
function CircuitBg() {
// Four variants cycle: original A, original B, A mirrored, B mirrored.
// With ~3-4 visible tiles in the band, the same schematic never
// appears twice. Connector stubs are at horizontally symmetric
// x-positions so the mirror flip still aligns edge-to-edge.
const TILES = 8;
const VARIANTS = [
{ use: 'A', flip: false },
{ use: 'B', flip: false },
{ use: 'A', flip: true },
{ use: 'B', flip: true },
];
return (