Skip to content

brenychstudio/print-border-studio

Repository files navigation

Print Border Studio

Print Border Studio is a local-first studio tool for preparing museum-style fine-art print layouts with exact paper geometry, live border preview, print-ready export, and an integrated AR Review workflow.

The project was built as a premium product prototype for artists, collectors, photographers, and studios who need a clean way to prepare framed print variants before production.


Product idea

Most print-preparation workflows are either too technical, too generic, or disconnected from how a final artwork will be presented.

Print Border Studio focuses on one clear workflow:

  1. Upload artwork.
  2. Select paper size and orientation.
  3. Define museum-style borders.
  4. Preview exact print geometry.
  5. Export print-ready files.
  6. Review the prepared print as a framed AR-ready object.

The goal is not to be a general image editor.
The goal is to provide a focused, precise, premium tool for preparing artwork as a physical print object.


Current status

Version: V1
Status: Working product prototype / internal studio tool
Production readiness: Prototype-ready, not yet full SaaS backend production

The V1 release includes the complete local preparation workflow, print geometry logic, export flow, AR Review mode, hosted handoff prototype, and QR/mobile review surface.


Core features

Print Prep

  • Artwork upload and queue
  • Multiple image handling
  • Paper size selection
  • Portrait / landscape / auto orientation
  • Museum-style border controls
  • Balanced, Museum, and Custom layout modes
  • Exact visible border geometry
  • Paper tone options
  • Live preview
  • Source image diagnostics
  • Effective DPI feedback
  • Export PNG
  • Export all as ZIP

Geometry engine

  • No-crop print layout logic
  • Correct visible margins
  • Aspect-ratio-safe artwork fitting
  • Custom border control without image distortion
  • Consistent geometry across:
    • live preview
    • export
    • AR Review

AR Review

  • Dedicated Print Prep / AR Review workspace mode
  • One active print handoff
  • Interactive framed preview
  • Mouse rotation
  • Mouse-wheel zoom
  • Auto-return behavior
  • Paper tone passthrough
  • Correct border geometry passthrough
  • Framed print preview based on the active setup

Hosted handoff prototype

  • Temporary mobile review session
  • QR code generation
  • Mobile handoff link
  • Regenerate handoff action
  • Session lifecycle states
  • Mobile review route
  • AR launch layer foundation

Technical stack

  • React
  • TypeScript
  • Vite
  • Tailwind CSS
  • Three.js / WebGL-based framed preview layer
  • Local browser state
  • Canvas export pipeline
  • QR-based handoff prototype
  • Cloudflare Pages deployment target

Architecture

The project is structured around a single studio workflow with two modes:

  • Print Prep
  • AR Review

The important architectural decision is that AR Review is not a separate external app.
It receives the exact current print setup from Print Prep through a shared state bridge.

The current active print setup includes:

  • artwork source
  • paper size
  • orientation
  • border mode
  • effective margins
  • paper tone
  • frame preset
  • AR review payload
  • hosted handoff session metadata

Important product decisions

Local-first workflow

The core preparation workflow runs locally in the browser.
This keeps the tool fast, private, and suitable for studio use.

Exact geometry over decoration

The key product value is not visual effects.
The key value is that the preview, export, and AR Review represent the same physical print geometry.

AR as review layer

The AR Review mode is designed as a decision-support layer, not as a separate technical dashboard.
The goal is to help the user understand how the prepared print behaves as a framed object.


Known limitations in V1

  • The hosted handoff flow is prototype-level.
  • Persistent backend session storage is not yet implemented.
  • Local QR/mobile testing requires a LAN-accessible dev host or deployed public URL.
  • AR launch behavior depends on device/browser support.
  • Full production storage and cleanup lifecycle are planned for a future hardening pass.

Development

Install dependencies:

npm install

Run local development server:

npm run dev

Run local development server for LAN/mobile testing:

npm run dev -- --host 0.0.0.0 --force

Build:

npm run build

Preview production build:

npm run preview
Deployment

The project is intended to be deployed on Cloudflare Pages.

Recommended settings:

Build command: npm run build
Build output directory: dist
Root directory: /
V1 project signal

Print Border Studio is best understood as:

product prototype
internal creative tool
reusable print-preparation system
premium front-end product interface
AR-enabled workflow experiment

It demonstrates the ability to design and build a focused creative tool with real product logic, visual polish, geometry correctness, and an extended review workflow.

Credits

Design and development — Brenych Studio