Lumen
Professional Photo Editor
A VSCO-style photo editor with tone curves, HSL adjustments, local masks, and film grain. Professional-grade color grading in the browser.
Overview
A browser-based photo editor with the depth of Lightroom. Tone curves with per-channel control, HSL adjustments across 8 color ranges, three-way color grading, local adjustments via masks, and film emulation effects.
Challenge
Web-based photo editors are either too simple (Instagram filters) or too complex (Photoshop in a browser). I wanted to build something in between: professional color grading tools with a clean, focused interface.
Approach
Built a comprehensive type system (500+ lines) defining every adjustment: exposure, curves, HSL, color grading, masks. This enforces correctness and enables complex nested state.
Implemented tone curves with separate RGB, Red, Green, and Blue channels. Users can precisely control tonal response across the luminance range.
Added local adjustments via brush, radial, and linear masks with feathering. Non-destructive editing lets users target specific areas.
Created film emulation effects: grain with customizable size/roughness, halation (highlight bloom), and split-toning for shadows/highlights.
Outcome
The editor handles professional workflows: tone curves, HSL across 8 ranges, three-way color grading, local masks, and film effects. The type system made complex state manageable and bugs rare.