Tattoo artists live on Instagram - a grid that compresses their work, buries their booking rules and belongs to someone else. This concept project is what I think an artist's own site should be instead: a dark, quiet gallery that moves like ink in water, an enquiry form that asks the right questions, and a bilingual CMS the artist runs without ever calling me. Explore the live demo (opens in a new tab)
A tattoo artist is a brand, yet most of them rent their shop window from a social network: the photos are compressed, the booking policy is three taps away, and an algorithm decides who sees what. The usual way out - a custom website - often trades one dependency for another, with the artist waiting on a developer for every new piece. So the brief I set myself had two halves: build a gallery striking enough to be worth leaving the grid for, and hand it over so completely that the artist runs it alone - content, SEO, guest spots and all.
A dark, high-contrast interface that steps back, so the tattoos are the brightest thing on every screen.
A hand-written WebGL2 shader behind the headline: fine engraved lines, bent by a real wave simulation that follows the cursor or a finger.
Built with three.js - scrolling flies the camera through the work, and each piece brings its own background colours, taken from the photo.
Style, placement, size and budget asked up front - and every piece has an “Enquire about a piece like this” button that brings its reference along.
English and Spanish with translated URLs, hreflang and a sitemap for both - ready for local clients and international guest spots.
A custom-configured Sveltia CMS with a built-in handbook: pieces, guest spots, texts, SEO and colours, all editable without a developer.
The featured work isn't laid out on a page - you move through it. Scrolling drives a camera through a three.js scene where every piece hangs on its own plane in depth. One at a time, each tattoo comes forward to full size while the next waits in the haze behind it, so the visitor looks at a single piece with nothing else competing for attention. It's the closest a screen gets to walking slowly past a wall of framed work.
The atmosphere moves with it. Every piece brings its own background colours, and the scene's fog is tinted to match, so the room seems to change light as you arrive at each tattoo. Each piece breathes very slightly and tilts towards the cursor, and the background responds to how fast you scroll. None of it is hand-tuned per photo: the artist uploads a picture in the CMS, and the gallery takes care of the rest.
At build time a script reads every photo and derives a ground and two glows, kept in a quiet band of warm greys so the tattoo stays the brightest thing on screen.
Botanical wrap Ground: #272524 Glow 1: #433e3b Glow 2: #50534a 
Sea goddess half sleeve Ground: #2e2c2a Glow 1: #494542 Glow 2: #575951 
Red floral linework Ground: #31302e Glow 1: #4c4a46 Glow 2: #595c55 
Mountain in a diamond Ground: #2a2827 Glow 1: #454140 Glow 2: #54554e Tattoo photos: Pexels. The palettes are the exact values the demo generated for them.
Everything on the front end answers one question: does it make the artwork look better?
Behind the headline sits a field of fine, engraved-looking lines. They drift slowly on their own, and a real 2D wave simulation bends them wherever the cursor or a finger moves - a trailing wake, ripples that meet and interfere, like a hand through water. Its brightness was measured, not judged by eye, so the pattern reads as texture and never pulls focus from the name.
On the home page the work isn't a grid. Scrolling moves a camera through the pieces one by one, and the background shifts to each photo's own colours as you arrive. The full archive has its own page, filtered by style.
Sections slide up over one another as you scroll, and the moving edge is tuned to travel slightly slower than your finger, so every transition feels calm rather than pushy. Lenis smooths the scroll underneath.
Artists work between cities, so the site is natively English and Spanish, and guest spots have a page of their own - upcoming and past dates, and whether books are open - that the artist updates in minutes.
Heavy visuals usually mean a slow site. Here they're engineered to cost almost nothing until they're needed.
The ripple is a few kilobytes of hand-written WebGL2, no library, so it can load above the fold. It pauses when you scroll away or switch tabs, becomes a still frame for visitors who prefer reduced motion, and falls back to a matching gradient if WebGL isn't available. three.js is kept for the gallery, where a real 3D scene earns it.
Beneath the 3D gallery is a real image grid in the HTML, so search engines, screen readers and visitors without WebGL still get every piece. Textures load a few pieces ahead of the camera, and phones render at a lower pixel ratio to save battery.
Name, email, style and the idea are required; placement, size and budget are asked right alongside, so the first reply can be a real answer rather than a list of questions.
Translated URLs, hreflang, canonical tags and a bilingual sitemap on every page. Structured data describes the studio as a TattooParlor - address, opening hours, location - and every upcoming guest spot as an Event. Titles and descriptions are editable per page and language in the CMS; empty one and the page falls back to its own wording instead of a blank tag.
Sveltia CMS runs on the artist's GitHub account and Netlify's login - no server and no monthly CMS fee. A 13-topic handbook is the first thing they see after signing in. Every editable file is validated at build time, so clearing a field can't take the site down, and the two colours they may change are adjusted automatically to stay readable.
The tattoo styles aren't typed into pages - they're a list in the CMS, with a name, an order and a search phrase for each. Add, rename or reorder a style there, and every place that depends on it updates on the next build: the line under the artist's name, the filters on the work page, the style dropdown in the enquiry form, each piece's page title, and the structured data that tells search engines what the studio does.
"knowsAbout": ["black and grey tattoo", "fine line tattoo", "floral tattoo", "dotwork tattoo"] Every piece has an “Enquire about a piece like this” button. It opens the contact form with that piece already attached as a reference - visible, linked, and removable if the client changes their mind - so the artist knows exactly what the enquiry is about.
Lighthouse performance, desktop and mobile
Largest Contentful Paint, desktop
Largest Contentful Paint, mobile
Cumulative Layout Shift
Measured with Google Lighthouse on the live demo (opens in a new tab), desktop and mobile. Accessibility and Best Practices scored 100 on both.
This is a technical and visual sandbox. It shows what happens when you step away from page builders and rented platforms: a digital space as bespoke as the art it holds - which the artist still runs entirely on their own.
Demo website · Concept project · Photos: Pexels. The artist, contact details and studio are placeholders.
Swap tattoo styles for treatments, menu sections or product lines, and the same pattern fits almost any business: one list in the CMS that drives navigation, filters, forms and search data - and enquiries that arrive already knowing what they're about.
Tell me about your work, your audience and where you want to be seen - and let's build a portfolio that stands entirely on its own.