Tattoo Simulator

Inspiration

Getting a tattoo is a big decision — but most people can't visualize how it will look on their actual body until it's permanent. We wanted to build a simple, fast, and fun solution that lets anyone preview tattoos in real time, using just their phone. The goal was to make tattoo planning more accessible, less risky, and a lot more creative.

What It Does

Tattoo Simulator is a one-page web app that lets you:

Browse or search for tattoo designs Choose from a curated gallery of 30+ high-quality transparent tattoos in multiple styles (minimalist, geometric, realistic, etc.) Or, describe your tattoo idea in words — the app will match it to a relevant design Preview tattoos live on your skin Use your phone or webcam to open a live camera Drag, scale, and position the tattoo in real-time Snap a picture with the overlay and download your tattoo preview No login, no backend, no loading delays — it just works.

How We Built It

Frontend: HTML, CSS, JavaScript Camera Access: navigator.mediaDevices.getUserMedia API Tattoo Search Simulation: Keyword/tag-matching logic mapped to a local tattoo gallery Overlay Controls: Vanilla JS to enable drag, pinch-to-zoom, and scaling of tattoo PNGs Responsive UI: Mobile-first design with dark/light mode toggle Assets: All tattoo images are transparent PNGs stored locally, optimized for web display Everything was generated from a single prompt in the Bolt.New 1 Shot Challenge — no edits.

Challenges We Faced

Prompt limitations: Many tools offer prompt-based generation, but image outputs were static or repetitive. We solved this by faking generation using a smart keyword-based search experience. Overlay behavior: Making the tattoo image realistically move, scale, and lock in place on live video was tough — especially on mobile devices. We had to tweak UI elements for performance and responsiveness. One-shot constraint: Designing an entire polished, interactive app experience in one prompt forced us to plan everything in detail — layout, UX, logic, and fallback strategies.

What We Learned

Sometimes, faking the “magic” (like AI search) is better than relying on it Simplicity and interactivity win — especially when you have just one shot Constraints force creativity — and good design planning is half the win

Final Result

A clean, modern, interactive app that lets anyone preview tattoos on their body — instantly. No needles, no regrets. Just imagination, camera, and good ink.

Built With

• css3
• dark/light-mode-toggle
• dom-manipulation
• html5
• javascript
• navigator.mediadevices-api
• responsive-web-design
• static
• transparent-png-assets