A little character. One console.log.
Make your console worth opening.
Give your project a signature. Make a build easier to scan.
Start with a message, make it yours, and copy the code.
Lightning Metal
Give your project a recognizable introduction.
import { defineScene } from "@servrox/console-fx";
import { emitConsole } from "@servrox/console-fx/browser";
const scene = defineScene({
"schemaVersion": 1,
"label": "CONSOLE FX",
"surface": {
"width": 840,
"height": 270,
"background": "#0c1117",
"padding": 32,
"borderRadius": 16
},
"lines": [
{
"align": "center",
"runs": [
{
"text": "CONSOLE FX",
"style": {
"color": "#e8f3f5",
"fontSize": 84,
"fontWeight": 700,
"fontFamily": "mono",
"letterSpacing": 1
},
"effects": [
{
"kind": "cinematicMetal",
"profile": "lightning-metal-v1",
"color": "#69dcff",
"depth": 7,
"glow": 0.25,
"ornaments": true
}
]
}
]
}
],
"motion": {
"durationMs": 4800,
"finish": "freeze"
}
});
emitConsole(scene, {
"target": "chromium",
"renderer": "svg",
"motion": "reduce",
"unsupported": "error",
"layout": {
"algorithm": "fit/v2",
"width": 840,
"maxHeight": 400,
"variant": "auto",
"overflow": "shrink",
"minFontSize": 12
},
"sizing": {
"mode": "container-experimental",
"maxWidth": 840,
"fillFraction": 0.95
}
});Your application decides when to print.
Automatic width · experimental in DevTools. Full native text accompanies SVG output.
Start with the job
What should your message do?
Six categories. One place to edit.
Brand & signatures
Give your project a recognizable introduction.
Debugging & diagnostics
Put failures, context and the next step together.
Runtime & environment
Show what is running and where.
Builds & releases
Make a build or release easy to scan.
Guides & onboarding
Leave developers a useful next action.
Easter eggs & celebrations
Add an optional surprise to a developer’s day.
Copy once. Or compose in code.
Standalone JavaScript needs no installation. The typed core and React adapter let your application supply the content and choose when to print.
See JavaScript, TypeScript, React and Next.js recipes →Built for browser consoles.
CSS and SVG profiles target Chromium DevTools. SVG sizing and finite motion retain their experimental limits. Plain text is an explicit alternative.
Rendering and sizing limits →