Skip to content
Founding Lifetime: every Pro skillfirst 100 members · $199 onceUpgrade
Lookbk
Sign In
Open live demo

The page this skill built from examples/kestrel, working in your browser. Opens in a new tab. Also: Patchbay.

12-second example rendered by this skill from examples/kestrel · 1280×720

What you get

  • A self-contained index.html hero and an embed.html to paste into an existing site
  • Your mask, copper, silkscreen and pulse colors, fonts, logo, chip label, part code and board marking
  • 17 documented effect settings: seed, loop length, grid density, chip size, chips, passives, fan-out, pulses, stitching vias, colors, inspection light, keep-out brackets, labels
  • Dark or light boards, left, right or centered layouts, with the board above the copy on phones
  • An SVG still picture for reduced motion and failures, so the hero is never blank
  • Contrast and layout checks at 390, 768, 1024 and 1440 px
  • A frame-perfect MP4 that loops seamlessly (1080p by default, portrait sizes too) and a poster
  • Open-source licenses for every part it builds on

Good fit

  • Hardware, IoT and edge computing companies can show a main chip etched with their product name, wired by copper traces to smaller chips and vias.
  • Developer tools and hardware CI services can choose a dark mask with glowing pulses or a light amber flex board with solid ones.
  • Teams that want a technical look without a script library get a plain 2D canvas hero and a seamless loop for launch posts.

Not for

  • Showing your real schematic or board layout: the routing is generated, not imported
  • Soft lifestyle or consumer brands: the look is technical by design
  • Full landing pages below the hero (see the Landing Pages series)

About this skill

A hero section that is a printed circuit board. Your copy sits in a silkscreen keep-out zone while, beside it, copper traces route themselves from a main chip with your name etched on it to smaller chips, vias and off the board's edge, then light pulses run along the buses in bursts and a status LED blinks. A small router built into the page lays clean 45-degree paths that never cross. Your agent sets the mask, copper, silkscreen and pulse colors, fonts, logo, chip label and board text, checks contrast at four widths and records a seamless 1080p loop.

Example request

Build a Circuit Trace hero for Kestrel Labs' KE-7 edge AI module: black-green mask, gold pads, mint pulses, chip label KE-7, headline 'Sensor to signal in 4 ms.', and record a 12-second loop.

Similar Skills

View all
web
Confetti Launch HeroClaude CodeCodexCursor+3 more agents
web
Firefly Meadow HeroClaude CodeCodexCursor+3 more agents

Details

Output
Animated hero section · page + embed + 1080p video
Needs
Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video
Series
Motion Heroes · 50 skills
Updated
Oct 26, 2026
Checked
Oct 26, 2026: its own commands ran and passed. That is a working check, not a security audit.

Generates with

2D canvas (no libraries)Built-in octilinear A* trace routerMotion Heroes kitHeadless Chrome checks and frame-stepped recorderffmpeg
Good forProduct launchBrandDeveloper toolsWeb design

Installed it? Tell others how it went. Reviews come from people who installed this skill.

Write a review

FAQ

Can it show my real schematic or board layout?

No. The routing is generated by a small router built into the page, not imported from your design files. A seed from 1 to 9999 decides where the parts go, and the layout is the same on every visit at the same window size. The chip label, part code and board text are yours.

How long can the chip label and board text be?

The main chip label takes up to 12 characters (default MCU-01), the part code under it up to 24 and the board marking up to 48. Keep the label short, since it is etched large. The silkscreen must reach 3:1 on the mask, or the build suggests a color that does.

What do visitors see on phones or with reduced motion?

On a phone the board comes first, then the words and the main button, and the navigation pill is hidden. With reduced motion visitors get one still frame of the live hero at 7.5 seconds. If the browser has no canvas or blocks the script, an SVG still picture shows instead.

Which agents is Circuit Trace Hero written for?

Any agent that reads SKILL.md folders, including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode.

Do I own what I make with it?

Yes. Everything your agent makes with this skill is yours, including for client and commercial work.

What if it doesn’t work for me?

Email support@lookbk.dev within 7 days of buying and we’ll fix it or refund you.

Credits and licensesWritten by Lookbk

Lookbk wrote this package: the Motion Heroes kit, the board, the trace router, the still picture and the examples. No third-party code is included. Written by Lookbk, no third-party code.

Credits and licenses for the open-source software and fonts it uses are in NOTICE.md inside the download.