@celilo/visualizer

Procedural, animated celilo brand mark. It rasterizes the celilo wordmark into an obstacle and grows design-rule-correct PCB / TRON light-cycle trace fields around the letterforms, then keeps the result "alive" with light pulses and neon-tube flicker.

Design + decisions: apps/celilo/designs/CELILO_VISUALIZER.md.

Status — Phase 2 (embeddable widget)

| Layer | What it does | |---|---| | src/core/ | geometry primitives, palettes, seeded RNG (mulberry32), ImageLike buffers | | src/gen/ | the generators — flow (celilo-mode), board/nets/components (routed board), events (paint timeline) | | src/sim/ | the TRON light-cycle simulation (runRace) | | src/render/ | pure drawing onto ImageLike buffers (no DOM) | | src/widget/ | DOM-aware: renderCeliloMark, the Animator, buildTextMask, and the CELILO_MARK_PRESET config |

core/gen/sim/render are deterministic and DOM-free; widget is the only DOM-aware layer and touches DOM globals only at call time. The full public surface is re-exported from src/index.ts.

Embedding the mark

import { renderCeliloMark } from '@celilo/visualizer';

const handle = renderCeliloMark(document.getElementById('hero')!, {
  // all optional — overrides merge over CELILO_MARK_PRESET
  text: 'celilo',
  seed: 'time',            // number (pinned) | 'time' (default) | 'random'
  pulse: { color: '#6ba3ff' },
});

handle.setOptions({ flicker: { amount: 0.5 } }); // live re-render
handle.stop();                                   // freeze the painted mark
handle.destroy();                                // tear down canvases + loops

It honors prefers-reduced-motion (paints once, no pulse) and pauses its animation loop while offscreen or in a hidden tab. The font is awaited before rasterizing so the wordmark isn't built against a fallback face.

Shipped:

• Phase 3 — the live hero is wired into the celilo-website Astro landing page (modules/celilo-website/site/src/components/HeroMark.astro): a Vite-bundled client script mounts the mark, blends its board to the site --bg, and follows the light/dark theme toggle.

Not yet built:

• Headless text rasterization for build-time static assets — tracked as ISS-0124.

Develop

bun run dev          # live demo / tuning playground (control panel + Export Config)
bun test tests/      # unit + integration suites (53 tests)
bun run typecheck    # tsc --noEmit

The demo (demo/) is a dev tool, not part of the shipped surface. Its Export Config button emits the options JSON to paste into renderCeliloMark.

Formatting follows the repo Biome style (single quotes, 2-space, width 100). Lint coverage for packages/* is being wired up — see ISS-0133.