logofx

React components for rendering SVG children through canvas shader effects.

import { Metal } from "logofx";

export function Logo() {
  return (
    <Metal>
      <svg viewBox="0 0 200 80" width="200" height="80">
        <text x="12" y="54" fontSize="52" fontWeight="800">
          SVG
        </text>
      </svg>
    </Metal>
  );
}

Metal keeps the source SVG in the DOM but visually hidden, then mounts a same-sized canvas and paints a metal/glow treatment from a signed-distance field generated from the SVG alpha mask.

Scripts

• pnpm build builds ESM, CJS, and type declarations with Bunchee.
• pnpm typecheck runs TypeScript without emitting files.

SDF Direction

The current implementation computes an alpha-mask SDF with a WebGL jump-flood pass after rasterizing the SVG. That keeps arbitrary SVG markup working because the browser still resolves layout, text, masks, paths, and groups first.

For richer built-in shaders, this should evolve behind the same internal ShaderRenderer shape:

• CPU SDF: best compatibility fallback, acceptable for static icons/logos, simplest npm dependency story.
• WebGL/WebGPU jump-flood SDF: better for large/animated SVGs, more complex setup and fallback handling.
• Geometry SDF from parsed paths: sharper and scalable, but incomplete for arbitrary SVG features unless heavily constrained.