Crisp Text at Any Scale
for PIXI.js
High-quality MSDF text rendering with advanced visual effects — gradients, shadows, strokes, 3D extrusion, and texture fills — all in a single draw call.
npm install funky-pixi-text pixi.jsEverything You Need for Beautiful Text
MSDF Rendering
Crisp glyphs at any zoom level from a single texture atlas
Single Draw Call
All glyphs batched into one PIXI mesh for maximum performance
Visual Effects
Gradients, shadows, strokes, 3D extrusion, and texture fills
Layout Engine
Multi-line, word wrap, kerning, letter spacing, alignment, auto-scale
Adaptive Performance
Six presets from ultra_low to ultra with GPU auto-detection
Familiar PIXI API
Text extends PIXI.Container — use setStyle(), setColor() and more
Effects Showcase
Combine multiple visual effects on any text instance — all rendered in a single shader pass.
Gradient Fills
Linear and radial gradients with multi-stop color control
Drop Shadow
Configurable angle, distance, blur, and opacity
Stroke
Outline with adjustable width, color, and smoothing
3D Extrusion
Faux-3D depth with customizable steps, angle, and side color
Texture Fill
Fill glyphs with tiled images using blend modes
Auto-Scale Layout
Shrink text to fit within maxWidth/maxHeight boundaries
Get Started in Minutes
Install the package and render your first text in just a few lines of code.
import { Application, Assets } from "pixi.js";
import { Text, FontLoader } from "funky-pixi-text";
const app = new Application({ backgroundColor: 0x222222, resizeTo: window });
document.body.appendChild(app.view as HTMLCanvasElement);
// Load an MSDF font (atlas .png + bmfont .json)
await Assets.load({
src: "fonts/Roboto-Black.json",
loadParser: FontLoader.name,
});
const label = new Text("Hello MSDF!", {
fontName: "Roboto-Black",
fontSize: 96,
color: 0xffffff,
align: "center",
anchorX: 0.5,
anchorY: 0.5,
});
label.position.set(app.screen.width / 2, app.screen.height / 2);
app.stage.addChild(label);