Code Examples

const t = new Text("PIXI MSDF", {
  fontName: "Roboto-Black",
  fontSize: 64,
  color: 0xff8800,
  anchorX: 0.5,
  anchorY: 0.5,
});

// Fixed-width paragraph that wraps
const paragraph = new Text(
  "The quick brown fox jumps over the lazy dog.",
  {
    fontName: "Roboto-Black",
    fontSize: 32,
    wordWrap: true,
    maxWidth: 400,
    align: "justify",
    lineHeight: 40,
  },
);

// Shrink to fit a fixed box (no wrap)
const fit = new Text("LongHeadline", {
  fontName: "Roboto-Black",
  fontSize: 200,
  autoScale: true,
  maxWidth: 300,
  maxHeight: 80,
});

// Combine: wrap AND shrink so the wrapped block also fits a height
const fitAndWrap = new Text("A multi-line block that must fit.", {
  fontName: "Roboto-Black",
  fontSize: 80,
  wordWrap: true,
  autoScale: true,
  maxWidth: 300,
  maxHeight: 200,
});

// Linear gradient (top → bottom)
new Text("GRADIENT", {
  fontName: "Tourney",
  fontSize: 96,
  color: {
    type: "linear",
    angle: 90,
    colors: [0xff0066, 0xffff00, 0x00ccff],
    stops:  [0.0,     0.5,     1.0],
  },
});

// Radial / circular gradient
new Text("SUN", {
  fontName: "Tourney",
  fontSize: 96,
  color: {
    type: "circular",
    colors: [0xffffff, 0xffaa00, 0xff0000],
    center: { x: 0.5, y: 0.5 },
    radius: 0.7,
  },
});

new Text("Outlined", {
  fontName: "Roboto-Black",
  fontSize: 72,
  color: 0xffffff,
  stroke: { color: 0x000000, width: 3, smoothing: 1 },
});

new Text("Shadowed", {
  fontName: "Roboto-Black",
  fontSize: 72,
  color: 0xffffff,
  dropShadow: {
    color: 0x000000,
    angle: 45,
    distance: 6,
    blur: 8,
    alpha: 0.6,
  },
});

new Text("3D!", {
  fontName: "Tourney",
  fontSize: 160,
  color: 0xffcc00,
  extrude: {
    depth: 24,
    steps: 16,
    angle: 60,
    sideColor: 0x885500,
  },
});

import { Assets } from "pixi.js";

await Assets.load({ alias: "wood", src: "/images/wood.jpg" });

new Text("WOODEN", {
  fontName: "Roboto-Black",
  fontSize: 120,
  color: 0xffffff,
  fillTexture: {
    assetId: "wood",
    uvScale: [2, 2],
    rotation: 0.1,
    mix: 1,
    blendMode: "overlay",
  },
});

label.setText("New string");

label.setColor(0x00ff88);
label.setSmoothing(0.05);
label.setKerning(true, 1.2);

label.setStyle({
  fontSize: 80,
  align: "center",
  dropShadow: { color: 0x000000, angle: 90, distance: 4, blur: 6 },
});

// Bounds (includes shadow/stroke/extrude padding)
const bounds = label.getTextBounds();
console.log(bounds.width, bounds.height);

// Clean up
label.destroy();

import {
  setDefaultPreset,
  getPreset,
  getDefaultPerformanceConfig,
} from "funky-pixi-text";

setDefaultPreset("desktop");
const cfg = getDefaultPerformanceConfig();

import {
  setGlobalPerformanceConfig,
  mergePerformanceConfig,
  getPreset,
  Text,
} from "funky-pixi-text";

// Globally
setGlobalPerformanceConfig(
  mergePerformanceConfig(getPreset("mobile_mid"), {
    maxShadowBlurRadius: 6,
    enableExtrusion: false,
  }),
);

// Or per instance
new Text("Fast", {
  fontName: "Roboto-Black",
  fontSize: 48,
  performanceConfig: getPreset("mobile_low"),
});

import {
  detectPerformancePreset,
  detectPerformancePresetAsync,
  detectWebGLCapabilities,
} from "funky-pixi-text";

const preset = detectPerformancePreset();           // sync, heuristic
const detected = await detectPerformancePresetAsync(); // async, GPU benchmark
const caps = detectWebGLCapabilities();

import { PerformanceMonitor, Text } from "funky-pixi-text";
import { Ticker } from "pixi.js";

Text.enableAutoConfigUpdate();

const monitor = new PerformanceMonitor({
  targetFPS: 60,
  autoAdjust: true,
  autoUpdateGlobalConfig: true,
  checkMemoryPressure: true,
  checkThermalState: true,
  checkBatteryState: true,
  respectReducedMotion: true,
  onPerformanceChange: (preset, fps) => {
    console.log(`Switched to '${preset}' at ${fps.toFixed(1)} fps`);
  },
});

Ticker.shared.add(() => monitor.update());