Beautiful Engine · 2025
An interactive LED wiring tool that turns complex hardware setups into clear visual diagrams.
Role: Design & Dev · Client: Beautiful Engine · Location: LA
A single-file web application that helps makers and LED enthusiasts configure power supplies, controllers, and LED strips, then generates a live SVG wiring diagram with compatibility checking, bill of materials, WLED configuration output, and cost estimation. Built entirely as one self-contained HTML file with glassmorphism UI, dark/light mode, progressive sidebar unlock flow, and per-component compatibility badges rendered directly in the diagram.
LED wiring is confusing. Voltage mismatches, amperage overloads, and wrong controllers brick expensive hardware. Could one tool eliminate the guesswork?
Single-file HTML/CSS/JS with no dependencies. SVG diagram generation, real-time compatibility validation, and a progressive disclosure UI that guides users step by step from power supply to controller to strips.
Disciplines: Product Design, UX/UI, Creative Technology