Tattooverlay

Tattooverlay is a specialized Progressive Web App (PWA) designed for artists and tattooists. It transforms a smartphone into a portable stencil projector by leveraging the device’s camera to create a real-time tracing interface.

Why I built it

Tracing digital designs onto physical surfaces (like skin or paper) can be cumbersome. Tattooverlay solves this by providing a “digital light box” experience that allows for precise positioning and tracing without specialized hardware.

Key Features

• Real-time Camera Overlay: Position digital images directly over the live camera view.
• Image Manipulation: Adjust opacity, edge detection, rotation, and mirroring for perfect alignment.
• Tracing Lock: A dedicated lock feature to prevent accidental UI interactions while tracing.
• PWA Ready: Installable on mobile devices for a native, full-screen experience.
• Custom Uploads: Support for both pre-loaded “Sample Flash” and custom user designs.

Technical Details

• Built with React and TypeScript for a robust, type-safe frontend.
• Utilizes WebRTC for high-performance camera access.
• Designed as a PWA to ensure it works offline and feels like a native app.

---