@sixsocks/console-art

A tiny package that drops a little madness into your dev console — a Six Socks Studio branded, animated SVG wordmark rendered straight into browser devtools, with an ASCII fallback for Safari.

It uses the same trick Shopify ships in their Editions site: an SVG is encoded as a base64 data URI and painted as the background-image of a console.log, sized with a padding hack. Safari ignores background styling in the console, so there it prints an ANSI-shadow ASCII wordmark instead.

Install

npm install @sixsocks/console-art

Use

Call it once, as early as possible in your client entry point:

import { logConsoleArt } from "@sixsocks/console-art";

logConsoleArt();

That's it. Open devtools and you'll see the art.

Options

logConsoleArt({
  message: "Six Socks Studio — we're hiring · [email protected]",
  once: true,             // print at most once per page load (default)
  onlyInProduction: false // also show in dev (default)
});

| Option | Type | Default | Description | | ------------------ | --------- | -------------- | ------------------------------------------------------------------ | | message | string | signature line | Tagline printed under the art. | | once | boolean | true | Guards against double calls (e.g. React StrictMode double-mount). | | onlyInProduction | boolean | false | When true, only renders in production builds. |

Notes

• Browser only. No-ops during SSR / in Node (guards on window).
• Respects prefers-reduced-motion — the spin animation is stripped for users who ask for reduced motion.
• Adaptive palette — the SVG follows light/dark via prefers-color-scheme.
• Zero dependencies, ships ESM + CJS + types.

License

MIT © Six Socks Studio