Circuit Board

About this style

Austrian engineer Paul Eisler made one of the first printed circuit boards in the 1930s, replacing hand wiring with copper patterns etched onto a board. Layout conventions since then give boards their look: copper traces in straight runs joined by 45 degree bends, parallel buses, plated vias, gold or tin pads, solder mask (most often green) and white silkscreen labels for every part. Designers borrow the look to signal hardware, engineering and security, and it reads best when it follows the real rules.

Make a 10-second circuit board animation: copper traces route themselves at 45 degrees, current pulses travel them, a chip's pins light up, and a mark is etched in copper.

<inputs>
- Brand: Ferrovane (fictional). Mark: a rounded hexagon holding an angular F built from 45° strokes. Board legend: "FERROVANE FV-01 REV B".
- Tagline: "Designed down to the trace."
- Length: 10 seconds.
If I don't give you something, use the default and don't ask.
</inputs>

<direction>
Palette: solder mask #0D4A2F with a soft diagonal sheen (white at 0–6%); copper under the mask #1F7A4A (raised, lighter green); exposed copper #C8743A with a fine brushed grain; gold pads #D8B35A with a 1px #F3D98B highlight on their top-left edges; silkscreen #F1F1E8; drill holes #0A0F0C; chip package #16181B with laser-marked text #8D9296; LED lenses #FF8A3D lit, #5A2A14 unlit; pulses #FFF2D2 with a soft #FFC86B falloff.
Type: B612 Mono 400 for silkscreen (20–24px: designators U1, Y1, J1, R1–R8, C1–C6, D1–D4, and the board legend); Chakra Petch 600 for the wordmark (64px) and 500 for the tagline (26px), both printed as silkscreen.
Layout rules, as on a real board: a 6px routing grid. Signal traces 8px, power traces 20px, at least 10px apart; buses run at an 18px pitch to match the pins. Every segment runs at 0°, 45° or 90°, and every change of direction is a 45° bend: never a 90° corner, never an acute angle. Route with a helper that joins two grid points with one straight run and one 45° run (the diagonal leg's length is min(|dx|, |dy|)), and offset parallel traces in a bus so their bends nest at constant spacing. Top-layer traces never cross: a crossing drops through a via (a 20px gold ring around an 8px hole) to a bottom-layer trace shown faintly, at 25%, under the mask.
Board (stage pixels; the board runs off all four edges): a 64-pin QFP U1 centered at (700, 520), with a 300px body and 16 gold pins per side (8×30px at an 18px pitch); a crystal Y1 with two load capacitors above it; a 2×10 pin header J1 near the left edge (x 140–200); eight resistors R1–R8 and four LEDs D1–D4 in a row near y 860; plated mounting holes (32px rings) 96px in from each corner; the mark's copper area on the right, centered at (1460, 470) and about 280px across. Buses fan out of U1 with 45° jogs to the wider pitch, then run in parallel to J1, the resistors and the LEDs. About 60 traces: dense around the chip, open around the mark.
Routing motion: traces draw outward from their pins like an autorouter, each with a 10px bright cursor at its leading end, at about 900px/s with easeInOutSine on each trace as a whole; a bus routes as a group, traces 40ms apart. Vias pop as their trace reaches them (scale 0 → 1, 0.2s). Silkscreen prints with a quick left-to-right wipe once its parts are routed.
Pulses: 26px packets of light slide along traces at 520px/s, their positions computed from t, in bursts along the data buses out of U1. When a packet reaches a pin, the pin brightens toward #FFF2D2 for 0.25s; no pin lights more than twice a second. LEDs come on in order and stay on.
Etch: the solder mask over the mark is ablated by a bright scan line moving top to bottom over 1.2s, revealing copper in the mark's shape with a 2px darker copper edge; the copper then warms to gold over 0.8s.
Camera: a slow macro push from 1.00 to 1.06 toward the mark with 30px of drift; no tilt, no blur.
The real thing reads like a board an engineer could send to fabrication: octilinear routing, buses that bend together, real footprints, silkscreen designators and tented vias. The cheap version is a glowing cyan maze of random right-angle lines.
Banned: 90° corners, random maze patterns, crossing traces on one layer, neon cyan glow, binary digits, hologram or HUD styling, depth-of-field blur, real chip makers' logos or part numbers, anything flashing more than 3 times per second.
</direction>

<structure>
0.0–0.8s: bare board: mask, sheen, mounting holes and component pads fade up from the edges inward (0.6s); U1's body settles onto its pads (scale 1.04 → 1, 0.25s).
0.8–3.6s: routing: the data and address buses fan out of U1 toward J1 and the LEDs, then the crystal and power traces route; vias pop; bottom-layer runs appear faintly under the crossings.
3.6–4.4s: silkscreen prints: part outlines, designators, and the board legend near the bottom-left corner.
4.0–7.2s: pulses: bursts leave U1 along the data bus to J1, then along the LED lines; pins light as packets reach them; D1–D4 come on at 5.0, 5.3, 5.6 and 5.9s.
6.0–7.6s: the etch: the scan line ablates the mask over the mark, revealing copper that warms to gold by 7.6s; a last packet runs from U1 along a long trace into the mark's edge.
7.4–8.4s: the wordmark and tagline print beneath the mark with a left-to-right wipe (0.6s).
8.4–9.0s: the last pulses finish their runs and stop; the camera push eases to rest.
9.0–10.0s: hold: LEDs steady, nothing moving.
For other durations, stretch the routing and pulse phases and keep at least 1s of hold.
</structure>

<build>
One self-contained index.html, CSS and JS inline. Google Fonts via <link> are fine; await document.fonts.load() for each face before defining window.seek. No other libraries (no three.js: this style is flat). Draw in inline SVG whose attributes seek sets directly: traces as paths revealed with stroke-dashoffset, pulses as short dashes on duplicate paths with a small blur filter for their falloff, copper grain and mask sheen from feTurbulence and gradients. The stage is 1920×1080 (16:9), scaled to fit the window. Design for 60fps. window.seek(t), t in seconds, must compute every visual from t alone: no CSS transitions or animations, no setTimeout or setInterval, no state carried between frames, and randomness only from a seeded PRNG. Generate every route once at load; each pulse's position is (t − its start) × speed along its path. Without ?render in the URL, drive seek from requestAnimationFrame so it plays in a browser (loop after a 1s end hold); with ?render, don't start that loop.
</build>

<check>
Before showing me, step through one frame per second: screenshot each and look at it. Fix overlaps, clipped or cramped text, accidental edge collisions, and anything off-style or Banned. Zoom into two frames to confirm every bend is 45°, parallel traces keep their spacing through bends, no two top-layer traces touch, silkscreen never sits on a pad, and the mark reads as copper and then gold. Confirm seek(duration) and seek(duration + 1) match, so the final frame holds.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

Blueprint Technical Drawing

Made by us

A cyanotype-blue engineering sheet that drafts itself: centerlines, compass-swept gears, hatching and dimension lines a…

Art Deco Gold

Made by us

A symmetrical Art Deco reveal in black and metallic gold: a sunburst fans open, stepped pinstripe frames draw from the…

Op Art Illusion

Made by us

A black-and-white Op Art piece: crisp stripes swell into a bulging lens and slow waves, and the title exists only as a…

Japanese Ma Minimal

Made by us

A quiet Japanese minimalist piece on generated washi paper: a single sumi ensō is brushed on with dry-brush texture, sm…