@wallsnap/core

Framework-free maths for true-to-scale wall-art previews: scene geometry, viewport layout, procedural SVG frame materials, drag clamping. No DOM, no React, no dependencies — the same geometry drives both the browser preview (@wallsnap/react) and the server compositor (@wallsnap/render).

Install

pnpm add @wallsnap/core

Usage

import { computeSceneGeometry } from '@wallsnap/core';

// Lay a framed 40×30 cm print out on a wall photo, cm-accurate.
const geometry = computeSceneGeometry(
  wall, // WallGeometrySource: image size + real-world wall dimensions
  frame, // FrameGeometrySource | null: border/mat widths in mm
  { widthCm: 40, heightCm: 30 }, // paper dimensions as hung
  { x: 0, y: 0 }, // displacement from the wall anchor, clamped
);

geometry.pixelsPerCm; // wall-image pixels per real-world cm
geometry.frameLeft; // outer frame rectangle …
geometry.artLeft; // … artwork rectangle, inset by border + mat

Also exported: computeSceneLayout (viewport fitting), frameMaterialSvg / frameMaterialCssUrl (procedural wood/metal/gold frame textures), beginDrag / dragOffset (drag sessions with clamping), shared types.

Custom room photos

import { wallFromUserPhoto } from '@wallsnap/core';

const room = wallFromUserPhoto({
  imagePath: roomObjectUrl,
  imageWidth: 4032,
  imageHeight: 3024,
  wallHeightCm: 240,
  anchor: {
    anchorX: 0.5,
    anchorY: 0.42,
    maxWidthCm: 180,
    maxHeightCm: 120,
  },
});

The real wall width is derived from the photo aspect ratio. Omit anchor for an eye-level default, or convert a user-drawn normalized rectangle into its center (anchorX/anchorY) and physical width/height (maxWidthCm/maxHeightCm).

License

MIT — see LICENSE.