# Layerize - Complete Technical & Product Documentation

> Full technical context, architecture overview, model details, workflows, and reference documentation for Layerize (https://layerize.app), an on-device AI system for monocular depth estimation, multi-layer image segmentation, video depth layering, and layered Photoshop (PSD) export.

---

## 1. Product Overview & Core Proposition

Layerize is a web application that enables digital artists, motion designers, photographers, and visual creators to split any 2D raster image or video clip into discrete, depth-separated 3D layers.

### Primary Differentiators
1. **100% Client-Side Privacy**: Unlike cloud-based vision models that transmit sensitive media to remote servers, Layerize runs monocular depth estimation, pixel mask extraction, and PSD generation entirely inside the user's browser via WebAssembly (WASM), WebGPU, and ONNX Runtime Web.
2. **Zero Software Installation**: No desktop software, GPU CUDA configuration, or Photoshop plugins required. Functions on standard modern web browsers (Chrome, Edge, Safari, Firefox, Brave, Arc).
3. **Native PSD & ZIP Delivery**: Exports fully structured Adobe Photoshop `.psd` files with intact alpha transparency and layer hierarchy, as well as standalone transparent PNG `.zip` archives.

---

## 2. Technical Architecture & Technology Stack

Layerize combines web-native technologies to deliver near-native desktop performance inside the browser sandbox:

### 2.1 Machine Learning Engines
- **Depth Estimation**: Model: `onnx-community/depth-anything-v2-small` quantized for browser inference.
  - Generates dense relative monocular depth maps where pixel luminance represents proximity to the camera plane.
  - Executed using Hugging Face's `Transformers.js` and Microsoft's `onnxruntime-web`.
  - Hardware Acceleration: Automatically prefers WebGPU if supported by browser/GPU hardware, falling back to WebAssembly (WASM) with SIMD and multi-threading.
- **Segment Anything Model (SAM)**:
  - Meta AI's Segment Anything Model (SAM) running locally via ONNX Runtime Web.
  - Allows zero-shot point-and-click prompt-guided object extraction directly in the viewport.

### 2.2 Image Processing & Layer Extraction
- **WASM Pixel Processor (`depth_postprocess`)**:
  - High-performance Rust engine compiled to WebAssembly (`wasm32-unknown-unknown`).
  - Evaluates continuous depth histograms, calculates adaptive depth thresholds, and isolates segmented regions into distinct pixel buffers.
  - Applies edge-smoothing and alpha blending algorithms to minimize fringing artifacts between adjacent depth planes.

### 2.3 Video Processing Pipeline
- **Video Depth Engine (`video-depth-engine.ts`)**:
  - Leverages the browser-native `WebCodecs API` (`VideoDecoder`) for hardware-accelerated frame extraction.
  - Passes individual frames through the depth estimation pipeline.
  - Uses `webm-muxer` to re-encode separated video layers into lightweight WebM video streams.

### 2.4 File Exporters
- **PSD Engine**: Implemented using `ag-psd`. Formats isolated pixel channels into an Adobe Photoshop 3.0 specification file (.psd) with transparent layer masks and alpha channels.
- **ZIP Engine**: Implemented using `jszip`. Packs isolated high-resolution PNGs into a compressed ZIP file with metadata.

### 2.5 Hosting & Authentication Infrastructure
- **Hosting**: Firebase Hosting (Google Cloud Global CDN).
- **Authentication**: Firebase Authentication (Google OAuth and Email/Password).
- **Payment & Subscriptions**: Integrated with Razorpay and AppSumo redemption API for lifetime licenses.

---

## 3. Tool Suite & Route Directory

Layerize provides a suite of specialized design tools accessible through in-app navigation:

| Tool Name | Route URL | Description | Input Formats | Primary Output |
| :--- | :--- | :--- | :--- | :--- |
| **Image Depth Layerize** | `https://layerize.app/#/` | Splits 2D images into depth layers based on camera distance. | JPG, PNG, WebP | Layered PSD, PNG ZIP |
| **Video Depth Layerize** | `https://layerize.app/#/video-layerize` | Splits video clips into animated foreground/background layers for 2.5D parallax. | MP4, WebM, MOV | Multi-layer WebM |
| **SAM Magic Extract** | `https://layerize.app/#/` | Interactive point-based click segmentation for instant object cutouts. | JPG, PNG, WebP | Isolated Layer, PNG |
| **AI Background Removal** | `https://layerize.app/#/remove-background` | Automatic high-precision subject cutout with transparent background. | JPG, PNG, WebP | Transparent PNG |
| **AI Background Generator**| `https://layerize.app/#/generate-background`| Text-guided inpainting background generation behind segmented subject. | JPG, PNG, WebP | Composite Image |
| **AI Image Enhancer** | `https://layerize.app/#/image-enhancer` | Neural upscaling and high-frequency edge restoration. | JPG, PNG, WebP | Upscaled Image |
| **Video BG Removal** | `https://layerize.app/#/video-bg-removal` | Video subject extraction and green-screen background removal. | MP4, WebM | Transparent Video |
| **AppSumo License Activation**| `https://layerize.app/appsumo` | Claim portal for AppSumo lifetime code redemption. | Activation Code | Lifetime Account |

---

## 4. User Workflow Walkthroughs

### Workflow A: Image Depth Layering to PSD
1. **Upload**: User drags and drops or browses an image (JPG, PNG, WebP) onto the canvas.
2. **Model Initialization**: On the first execution, Depth Anything V2 Small (~30MB) is fetched from cache or downloaded and compiled onto the GPU (WebGPU) or CPU (WASM SIMD).
3. **Layer Configuration**: User selects the desired layer split count (from 2 up to 100 layers).
4. **Depth Processing**: The model creates an 8-bit depth map. The Rust WASM engine segments the image into layered planes from closest (foreground) to furthest (background).
5. **Interactive Layer Editing**:
   - Preview individual layers in an interactive 3D perspective viewer.
   - Toggle layer visibility, reorder stack order, or merge selected adjacent layers.
   - Use **SAM Magic Extract** to isolate specific subjects from any layer.
   - Use **Remove BG** on specific layers.
6. **Export**: Export as a native multi-layer Adobe Photoshop file (`.psd`) or download a `.zip` archive of individual transparent PNGs.

### Workflow B: Video Depth Layering
1. User uploads a video clip (up to 4K resolution).
2. The browser's `VideoDecoder` hardware decoder extracts frames in real-time.
3. Depth Anything V2 produces sequential depth maps with temporal consistency checks.
4. Frames are separated into foreground and background channels.
5. The `webm-muxer` produces an exported WebM container with synchronized transparent layer tracks for direct import into After Effects or Premiere Pro.

---

## 5. Pricing, Plans & Limits

Layerize provides flexible tiers for casual creators, pro designers, and studios:

| Feature / Limit | Free Tier | Pro Subscription | Lifetime Deal (LTD) |
| :--- | :--- | :--- | :--- |
| **Max Depth Layers** | Up to 2 Layers | Up to 100 Layers | Up to 100 Layers |
| **PSD Export** | Included (Full Res) | Included (Full Res) | Included (Full Res) |
| **ZIP Export (PNGs)** | No | Included (Batch PNGs) | Included (Batch PNGs) |
| **Video Depth Layering** | Preview Only | Full Export | Full Export |
| **SAM Magic Extract** | 5 credits/day | Unlimited | Unlimited |
| **AI Background Removal**| Included (Standard) | Unlimited (High-Res) | Unlimited (High-Res) |
| **Processing Location** | 100% On-Device | 100% On-Device | 100% On-Device |
| **Commercial License** | Personal Use | Commercial License | Commercial License |
| **Support** | Community | Priority Email | Priority Email |

---

## 6. Competitive Comparison Matrix

| Capability | Layerize | Adobe Photoshop (Manual) | Cloud AI API Services |
| :--- | :--- | :--- | :--- |
| **Speed per Image** | **2–5 Seconds** | 15–45 Minutes (Pen Tool) | 10–30 Seconds (Network Queue) |
| **Privacy / Data Security**| **100% Local / Zero Upload**| Local Desktop | Uploaded to third-party cloud |
| **Installation Required** | **None (Browser)** | 4GB+ Desktop App | None (API / Web) |
| **Depth Understanding** | **True Monocular 3D Depth** | 2D Edge Detection only | Varies |
| **Multi-Plane Splitting** | **1-Click (up to 100 planes)**| Requires manual slicing | Rare (mostly 1-layer cutouts) |
| **Hardware Requirements** | Any modern GPU/CPU | High RAM & CPU | Minimal (Server handles it) |
| **Native PSD Export** | **Built-in** | Native | Rarely supported |

---

## 7. Frequently Asked Questions (FAQ)

### Q1: Is user data uploaded to any server during depth estimation or layer extraction?
**A**: No. The core value proposition of Layerize is 100% on-device processing. The neural network weights (`depth-anything-v2-small` and `sam-vit-b`) execute locally inside the user's browser using WebAssembly and WebGPU. Images and video frames never leave the user's machine.

### Q2: What browsers and operating systems are supported?
**A**: Any modern browser supporting WebAssembly and modern canvas APIs:
- Google Chrome 113+ (WebGPU supported)
- Microsoft Edge 113+ (WebGPU supported)
- Safari 17+ (macOS / iOS)
- Mozilla Firefox 120+
- Arc, Brave, Opera, Vivaldi

### Q3: What image resolutions can Layerize process?
**A**: Layerize processes images at their original input resolution. The depth estimation runs at an optimized neural inference resolution (e.g. 518x518 or 1024x1024) and the resulting depth map is upsampled to the source image's exact dimensions, ensuring the exported PSD contains 100% full-resolution layers without downsampling.

### Q4: How does Layerize handle edge halos and fringing?
**A**: Layerize includes an edge post-processing pass implemented in WebAssembly that calculates localized alpha transparency transitions across depth boundary gradients, preventing harsh pixelation and minimizing background color bleed.

### Q5: Can Layerize exports be used commercially?
**A**: Yes. Users on Pro and Lifetime Deal (LTD) plans receive a full commercial license for all exported PSDs and PNG layers.

---

## 8. Blog Content & Educational Guides

Layerize maintains an active technical blog (https://layerize.app/blog/) covering modern graphic design, visual effects, and 3D depth workflows:

1. **Welcome to the Layerize Blog** (`/blog/welcome-to-the-layerize-blog/`): Introduction to monocular depth estimation for 2D design workflows.
2. **Accelerating Ecommerce & Product Ad Design** (`/blog/accelerating-ecommerce-and-product-ad-design/`): Automating multi-layer product cutouts for banner ads and seasonal campaigns.
3. **Creating 2.5D Parallax & Social Media Visuals** (`/blog/creating-2-5d-parallax-and-social-media-visuals/`): Converting still photos into motion graphics with multi-plane camera movement.
4. **Cyberpunk & Brutalist Event Poster Design** (`/blog/cyberpunk-and-brutalist-event-poster-design/`): Interweaving oversized brutalist typography behind real-world subjects.
5. **Depth-Based Color Grading in Cinematic Photography** (`/blog/depth-based-color-grading-cinematic-photography/`): Applying separate LUTs and atmospheric haze to foreground and background planes.
6. **Hollywood Movie Teaser Poster Design Techniques** (`/blog/hollywood-movie-teaser-poster-design-techniques/`): Creating high-impact movie key art with atmospheric depth separation.
7. **Post-Capture Lens Blur & Optical Bokeh Photography** (`/blog/post-capture-lens-blur-optical-bokeh-photography/`): Simulating f/1.4 shallow depth of field using depth gradient masks.
8. **Rush-Deadline Playbook for Layerize Design Workflow** (`/blog/rush-deadline-playbook-layerize-design-workflow/`): Strategies for agency designers facing tight turnaround times.
9. **Surreal Composite Photography Without Masking Fatigue** (`/blog/surreal-composite-photography-without-masking-fatigue/`): Rapid prototyping of surreal photomontages with zero manual pen tooling.
10. **Swiss-Style Typography in Nature Poster Design** (`/blog/swiss-style-typography-in-nature-poster-design/`): Integrating minimalist typography behind organic natural foliage.
11. **Text Behind Subject: Graphic Design Playbook** (`/blog/text-behind-subject-layerize-graphic-design/`): Step-by-step masterclass on placing magazine-style headlines behind subjects.

---

## 9. Contact & Support
- **Support & Inquiries**: support@layerize.app
- **Official Website**: https://layerize.app
- **Documentation**: https://layerize.app/llms.txt
- **Security Policy**: https://layerize.app/.well-known/security.txt
- **Credits**: https://layerize.app/humans.txt