A 3×5 type system you can hack pixel by pixel.

NPM / TYPESCRIPT / REACT

Pixels,
in your code.

One dependency gives any frontend the exact static and animated renderer behind the studio, without a browser, canvas, or duplicated rules.

npm install pxfaceView on npm

01 / CORE

Render anywhere.

The root package is pure TypeScript with no runtime dependencies. Get deterministic SVG and a serializable scene in Node, the browser, a worker, or a build script.

import { renderWordmark } from "pxface";

const { svg, scene } = renderWordmark({
  text: "HELLO\nTHERE",
  effect: "wave",
  effectAmount: 1.1,
  pixelGap: 0,
  padding: 20,
  ratio: "fit",
  pixelOverrides: {
    "l0-c0-r0-x0": {
      color: "#FF4E1A",
      offsetY: -1,
      opacity: 0.7,
    },
  },
});

document.querySelector("#mark").innerHTML = svg;
console.log(scene.output);

02 / REACT

Drop into React.

The optional adapter has no hooks, effects, browser globals, or client directive. It renders during SSR and inside React Server Components.

import { Pxface } from "pxface/react";

export function Logo() {
  return (
    <Pxface
      text="HELLO"
      effect="weave"
      depth={1}
      className="logo"
    />
  );
}

03 / LOOPS

Sample exact time.

Normalized time is an explicit renderer input. Fixed-step frames are deterministic, seamless, and share one stable viewBox.

import { renderWordmarkAnimation } from "pxface";

const loop = renderWordmarkAnimation(
  { text: "MOVE", effect: "assemble", seed: 42 },
  { duration: 3, frameRate: 12 },
);

loop.svg;            // self-contained animated SVG
loop.frames[0].svg;  // exact editable static frame

04 / REACT MOTION

Ship one SVG.

The animated adapter emits a self-contained looping SVG with no client JavaScript and a static reduced-motion fallback.

import { AnimatedPxface } from "pxface/react";

export function Loop() {
  return (
    <AnimatedPxface
      text="MOVE"
      effect="relay"
      duration={3}
      frameRate={12}
    />
  );
}

ONE RENDER CONTRACT

Small interface.
Every pixel exposed.

Editable SVG

Pixels stay as named rectangles or circles, grouped by layer, line, and character for CSS, Figma, or custom tooling.

Typed options

Spacing, colors, depth, shape, effects, pixel overrides, padding, ratio, transparency, seed, and scale share versioned defaults.

Exact scene

Read stable pixel IDs, resolved transforms, layout coordinates, viewBox, and final dimensions. For live Canvas or WebGL playback, createWordmarkTimeline returns scenes without eagerly serializing every SVG frame.

Zero duplication

The studio, npm package, React adapter, hosted endpoint, static assets, and animation frames all cross the same renderer seam.

Choose the right surface.

Use pxface when rendering or sampling animation inside your own code. Use the hosted API when an agent, automation, or non-JavaScript tool needs static or animated SVG and PNG. Use the Studio for browser-exported GIF, WebM, and MP4. Use the font files for normal typing in design and desktop apps.

OPEN SOURCE

Hack the renderer.

Package code is MIT. The glyph matrices are CC0 with no attribution required. The PXFACE name and logo remain reserved.