Companion UIs look simple until you pick a renderer. Each stack has a different cost curve.
Tradeoff table
| Tech | Pros | Cons |
|---|---|---|
| CSS | Easy a11y hooks, low CPU when idle, simple themes | Hard complex organic motion |
| SVG | Crisp, stylable, great for line creatures | Heavy DOM updates can jank |
| Canvas2D | Flexible particles, predictable draw loop | You own hit-testing & DPR scaling |
| WebGL | Rich shaders, silky effects | Context limits, complexity, harder debug |
Practical guidance
- One small companion in a SaaS chrome → CSS/SVG/Canvas is plenty.
- Particle flocks or shader blobs → Canvas/WebGL.
- Always pause or drop frame work when the tab is hidden.
- Cap DPR; retina × full shader fullscreen is a laptop fan simulator.
How Glim approaches it
Glim keeps a shared mind (state, mood, energy) and lets each creature render with the technique that fits its body — instead of forcing every companion through one GPU path. Product teams get a single API without committing the whole app to WebGL.
Performance checklist
- Only one RAF loop for all companions.
- Destroy instances on route change.
- Honor reduced motion.
- Measure interaction delay on low-end laptops, not just demo Macs.
Try Glim free. Offline starter + MIT creatures. No fake checkout.