@panomapp/bg-maker

@panomapp/bg-maker is a lightweight background engine for product UIs, profile surfaces, story cards, and canvas exports. It includes a framework-agnostic core, procedural and tileable background primitives, and a curated Panom preset registry.

The package is designed for cases where the same background definition needs to work across:

• CSS-based previews
• <canvas> rendering
• color sampling
• serialized preset parameters

Highlights

• Framework-agnostic core types and runtime contracts
• Procedural scene helpers for fullscreen backgrounds
• Tileable background helpers for repeatable pattern systems
• Built-in Panom preset registry
• Optional Vue adapter export
• ESM package with typed subpath exports

Installation

npm install @panomapp/bg-maker

Package Exports

• @panomapp/bg-maker Shared types and top-level exports
• @panomapp/bg-maker/procedural Procedural scene definitions, normalization, serialization, and renderer helpers
• @panomapp/bg-maker/tileable Tileable background factory utilities
• @panomapp/bg-maker/panom Panom preset registry and convenience helpers
• @panomapp/bg-maker/vue Vue-oriented style adapter

Usage

Panom presets

import {
  PANOM_BACKGROUND_PRESETS,
  getPanomBackgroundPreviewStyle,
  normalizePanomBackgroundParams,
  drawPanomBackground
} from '@panomapp/bg-maker/panom'

const preset = 'procedural-orbit'

const params = normalizePanomBackgroundParams(preset, {
  scalePercent: 120
})

const style = getPanomBackgroundPreviewStyle(preset, {
  ...params,
  viewportWidth: 1440,
  viewportHeight: 900
})

drawPanomBackground(ctx, preset, 1440, 900, params)

Procedural backgrounds

import {
  buildProceduralOrbitScene,
  defineProceduralBackground
} from '@panomapp/bg-maker/procedural'

const scene = buildProceduralOrbitScene('demo-scene')

const background = defineProceduralBackground({
  id: 'demo-scene',
  labelKey: 'backgrounds.demo',
  scene
})

Tileable backgrounds

import { defineTileableBackground } from '@panomapp/bg-maker/tileable'

const dots = defineTileableBackground({
  id: 'dots',
  labelKey: 'backgrounds.dots',
  getStyle: () => ({
    backgroundColor: '#ffffff',
    backgroundImage:
      'radial-gradient(circle at 8px 8px, rgba(0,0,0,0.15) 0 2px, transparent 2.5px)',
    backgroundSize: '24px 24px',
    backgroundRepeat: 'repeat'
  }),
  draw: (ctx, width, height) => {
    ctx.fillStyle = '#ffffff'
    ctx.fillRect(0, 0, width, height)
  },
  sample: () => ({ r: 255, g: 255, b: 255 })
})

Vue adapter

import { toVueCssProperties } from '@panomapp/bg-maker/vue'
import { getPanomBackgroundPreviewStyle } from '@panomapp/bg-maker/panom'

const style = toVueCssProperties(
  getPanomBackgroundPreviewStyle('sugar-pop')
)

Runtime Notes

• CSS preview helpers are safe to use in standard browser UI flows.
• Canvas rendering APIs require a browser canvas context.
• Procedural raster generation is DOM-aware and avoids browser-only work when those APIs are unavailable.

Compatibility

• Node.js 18+
• ESM environments

License

MIT