Item Design
Item design — labels, shapes, images, and favicons for network entities
New in this cycle: Node identity — labels, shapes, favicons for network entities
Why
Sources and destinations are currently undifferentiated colored circles. This cycle explores visual identity for nodes: text labels (always-on / hover / off), alternative shapes (square, hexagon), and favicon images for known external vendors loaded via a Google favicon proxy.
Objective
Establish visual identity system for network nodes with labels, shapes, and favicons.
Scope
dev/experiments/c3.item-design/
Key Changes
- Self-contained experiment with own PIXI.Application and layout
- Destination metadata map with vendor labels and domains
- Favicon proxy via Vite dev server plugin (bypasses CORS)
- Favicon sprites overlaid on destination nodes
- Label system with three modes: off, hover, always
- Source shape toggle: circle, square, hexagon
- Color differentiation: external (pink), internal (green), sources (blue)
- Extracted
DecorationImage/FaviconImageclass hierarchy BasePlayergainsaddDecoration/removeDecoration/getDecoration- Tint-based active state exploration (draw-white-then-tint pattern)
Outcome
Visual identity system working. Favicons load and render via Google's favicon proxy. Key bug: PixiJS 8's Assets.load() silently fails on blob/query-string URLs. Fix: use new Image() + img.decode() + PIXI.Texture.from(img).
Visual record
9 captures — heroes, page slices, and full-page renders. Click to view.
