FreeBuild sheet 08 of 08 · Real business · private build
Scroll, and a needle draws the logo.
How we built a premium site for a real tattoo studio near Paris: every step in plain words, and every instruction exactly as we wrote it. The studio's name, logo, people and photos are left out; the pictures here are drawings made for this sheet.
The idea is what the page is about. The moment is the one thing built for this business alone. The job is what it does for the owner.
The page opens on the studio's own film, playing full screen from the first second: the wall, the station, the needle at work. As you scroll, a needle draws the studio's logo stroke by stroke. Every photo and video after that arrives in its own way, and no two sections in a row use the same entrance.
A phone shows one of the studio's posts. The tattoo's lines lift off the screen in 3D, land on skin and settle into the finished piece, while a swirl of black and gold ink sweeps past.
Each step says what we did and why. Open Details under a step for the tools and the numbers behind it.
Before any design, read everything the studio has published itself, signed out, so every fact on the page is theirs.
The studio had no website and took bookings only by private message. Its account gave us the address, the hours, the night sessions, the artists, the styles, a price list for piercing and the owner's own videos. Anything we could not find was marked as missing, never guessed.
Watch premium tattoo-studio sites in full, show them, and build only what was picked: a video playing from the first second, then simple sections where every photo arrives in its own way.
Twelve premium tattoo sites were watched from start to finish, plus one design studio's site for a scroll effect. The picks: a full video hero, rounded portfolio cards that appear as you scroll, and one "wow" section in the middle. One site was dropped because it looked machine-made. We took one element from each source and combined them, never one site copied.
Write every section down before any code: what it shows, how its photo or video arrives, and a sample line. No two neighbouring sections use the same entrance.
Fifteen instructions were locked when the plan was approved, and three more after the first review (they are printed below). Each one was closed later with proof: a file, a measured number or a screenshot. One could not be finished by a machine and is marked as blocked, not quietly replaced.
Pick the reel that shows the studio, its sign and a needle at work, cut three of its moments into a 4-second loop that never jumps, and paint a still of it first so the page shows something at once.
From a 12-second reel: 1.0 to 2.5 s, 5.5 to 8.0 s and 8.5 to 9.5 s, joined with 0.3-second crossfades, and the end crossfaded back into the start so the loop has no seam. The first half-second (a light flare) and the last seconds (a customer's bare back) were left out. The film is never enlarged past its own pixels. After the first review the hero became full screen at every width.
Trace the studio's logo into lines, then let a needle draw it stroke by stroke as the visitor scrolls; the round badge closes last, and the logo is whole only at the end.
The wordmark was traced from the studio's own poster into a vector shape and checked against it (overlap 0.965 out of 1). Nineteen hand-placed strokes, in writing order, uncover it over the first 70% of a pinned hero; the needle sits at the tip of the line being drawn. The badge closes with a ring wipe from 70 to 100%. While it paints, the wordmark fades in and zooms from 112% to 100% with a shadow that settles. At rest the needle works the first stroke back and forth, so the screen moves before anyone touches it. With motion turned off, the whole logo simply shows.
Use a real clip of ink spreading in water as a mask: one tattoo photo dissolves into black ink, and the next one forms out of it. The photos themselves are never changed.
Twenty frames of a free stock ink-in-water clip were saved as small grey images; the page turns each one into a see-through mask (bright = ink). The same frames drive three things: the full-screen portfolio viewer (1.3 s per change, swipe or arrow keys), the night-session photo that appears through a spreading ink blot (0.9 s), and a black-and-gold ink swirl in the wow section.
A phone shows one of the studio's posts; as you scroll, the tattoo's lines lift off the screen in 3D, land on a photo of the stencil on skin and settle into the finished piece, with one giant word behind.
Built with layered CSS 3D (perspective and rotation), no 3D library. The giant word behind it thickens from thin to heavy as you scroll. When the swirl has passed, the big letters fill in solid and the hand drops to 40% so both read. With motion off, the finished piece shows beside the phone, still.
One card per artist; as you scroll, each card slides over the one before, which shrinks back slightly and dims. Photos arrive soft and settle sharp.
The stacking idea comes from an open-source component by Daniel Petho (MIT licence), rewritten in plain JavaScript. The blur-to-sharp entrance is our own. The owner's short video sits in the first card.
Rounded cards that grow into place as they reach the screen, four style buttons on top, and a tap that opens the piece full screen.
Each card starts at 88% size with a tight rounded crop and opens to full. The style buttons show or hide cards by their tags. Video cards play only while they are on screen, and only load when first seen.
Four steps, from sending the idea to the session itself. Each lights up as you reach it, and the picture beside it changes with it.
The picture beside the steps is pinned and changes for each step; the step number counts up as it arrives. Where no photo of a moment exists (a private message, a deposit), a simple type card stands in rather than a stock photo.
Copy the studio's own published price list line by line, spelling included, and say "on quote" where they give no price.
Every line came from the studio's own price list for piercing, read from their post. Tattoos are priced on quote, so the page says so instead of inventing a number.
Cut a short piece of the owner's own video, play it muted when it is on screen, and add a button to hear it. Captions stay readable on a phone.
The source video was watched in full first. A 12.9-second piece plays muted while in view, with its own Pause. The owner's own burned-in captions stay; an English line sits in a band underneath. Browsers only allow sound after a tap, so the sound button unmutes and restarts the clip from the start.
One question per screen: placement, size, style, budget, photo, then first name and how to reply. The last screen shows the finished message and opens the studio's private messages.
The answers become one pre-written message, copied for the visitor, and the studio's message inbox opens. Tapping "book with this artist" or "night session" elsewhere on the page adds that line to the message. In the private demo the confirmation is labelled as a demo.
Pick four open-source fonts, one per job, and make each one move: titles that swing and bounce when you scroll back up, and paragraphs whose words light up as you read.
A blackletter for display, small capitals for labels, a plain sans-serif for reading and a mono for details, all free under the Open Font License and served from the site itself. The swinging titles are our own. The word-by-word light-up comes from an open-source component by Dillion Verma (MIT licence), rewritten in plain JavaScript; unlit words still pass contrast.
Write the legal pages in the studio's language, then test every page on phones and desktops with motion on, motion off and video refused, and fix what breaks.
Four legal pages in French; no cookies and no outside requests, measured. Tested in WebKit at 375 and 390 px phone widths and on desktop, with autoplay refused (as in Low Power Mode), no 3D and returning to the tab five times: 0 errors. Lighthouse on a phone: speed 96, accessibility 100, layout shift 0. Every line passed copy_check.
This site used no image or video model: every photo and film of the studio on it is the studio's own. So instead of prompts, here are the instructions the build followed, copied from our plan, and two pieces of the code itself. Two effects started from open-source components, credited in the steps; their code is not reprinted here.
Plan lock, element 2
Our own words, written into the plan before the build and checked against it after. Square brackets replace the studio's names and file codes.
Logo EARNED by the scroll: pinned hero, needle draws the brush wordmark stroke by stroke with scroll, [the round] badge completes LAST, whole only at 100%, then breathes; name, place, booking buttons readable from frame one
Plan lock, element 3
Our own words, written into the plan before the build and checked against it after. Square brackets replace the studio's names and file codes.
Every photo/video entrance designed, none repeated by neighbours: needle builds logo, line opens, cards scale in, out of the screen, ink bleed, side slide + count, focus pull, stencil peel
Plan lock, elements 4 and 5
Our own words, written into the plan before the build and checked against it after. Square brackets replace the studio's names and file codes.
Portfolio as [a design studio's] rounded cards with style filters, opening to a full-screen viewer Ink-in-water dissolve between portfolio pieces in the viewer (real [stock] ink clip as a mask, licence on file; their photos unaltered)
Plan lock, element 6
Our own words, written into the plan before the build and checked against it after. Square brackets replace the studio's names and file codes.
WOW section [« our ink »]: tattoo lines lift off a phone showing their real post, land on their stencil photo, settle into the finished piece; [the giant word] behind; black-and-gold ink swirl; [the studio's own line]
Plan lock, elements 7 to 11
Our own words, written into the plan before the build and checked against it after. Square brackets replace the studio's names and file codes.
[The team]: one portrait per artist, residents and guests, gallery + book button per artist Styles + night sessions until 5 a.m. with a night-session path [How it works] (5 steps), [Aftercare] (salon's own sheet), FAQ in French [Project request]: one question per screen, ending in a pre-written Instagram DM / WhatsApp message; marked needs the owner's OK Address in text, Maps on tap; hours only when the owner gives them
Plan lock, elements 14 and 15
Our own words, written into the plan before the build and checked against it after. Square brackets replace the studio's names and file codes.
Type board: Grenze Gotisch, Marcellus SC, Schibsted Grotesk, Martian Mono + their wordmark, each moving Budget: <=2.5 MB, poster = LCP, reduced-motion + no-WebGL + pause, >=90 / 100 on a phone, $0 planned ($0.30 cap)
Feedback, then plan lock element 16
Our own words, written into the plan before the build and checked against it after. Square brackets replace the studio's names and file codes.
"I'm not a huge fan of the hero part. The small video size, like the screen on the side, I don't like it. I thought it would be like the full size of the screen... I thought like it would appear like a fade in and a zoom in just like that with shadow" Hero film FULL SCREEN at every width (cover-filled, no side panel, never letterboxed); wordmark fades in + zooms in 1.12->1 with a settling drop shadow WHILE it paints (two easings); round badge kept beside the wordmark with its clock-like turn and its own shadow
Plan lock, elements 17 and 18
Our own words, written into the plan before the build and checked against it after. Square brackets replace the studio's names and file codes.
[The wow section's] end state: after the swirl the big letters fill in and read clearly, the hand stays at ~40% opacity, the copy is never clipped at the right edge (checked ~1900 px) [How it works]: steps appear one by one as you scroll, tied to the image (the [session] photo re-frames per step)
ffmpeg filter, from our build script
Copied from the build, character for character.
[0:v]trim=1.0:2.5,setpts=PTS-STARTPTS,fps=30,settb=1/30[a];[0:v]trim=5.5:8.0,setpts=PTS-STARTPTS,fps=30,settb=1/30[b];[0:v]trim=8.5:9.5,setpts=PTS-STARTPTS,fps=30,settb=1/30[c];[0:v]trim=1.0:1.3,setpts=PTS-STARTPTS,fps=30,settb=1/30[a2];[a][b]xfade=transition=fade:duration=0.3:offset=1.2[ab];[ab][c]xfade=transition=fade:duration=0.3:offset=3.4[abc];[abc][a2]xfade=transition=fade:duration=0.3:offset=4.1,trim=0:4.1,setpts=PTS-STARTPTS,format=yuv420p[o]
JavaScript, from the site
Copied from the build, character for character.
for (let k = 0; k < p.length; k += 4) { p[k + 3] = p[k]; p[k] = p[k + 1] = p[k + 2] = 255; }
The times come from the build's own progress log, written every half hour.
BUILD LOG
TATTOO STUDIO · ONE LINE PER STAGE
One line per stage, in the order they ran. No picture or film was generated: the studio's own posts carried the site.
Reading the studio's facts and watching the reference sites.
14 Oct 2026, 19:45 to 20:35, from the progress log.
The first build, from the approved plan to the private demo going live.
14 Oct 2026, 21:41 to 15 Oct, 02:47, from the progress log, including two full audits.
Two rounds of changes after review: the full-screen hero, the stacking team cards, the moving type and the owner's video.
15 Oct 2026, 06:21 to 09:45, from the progress log.
The studio already had what a premium site needs: a film of the studio at work, a strong logo, real tattoos and the owner on camera. The work was choosing, cutting and timing it, and building a request form that brings back a complete booking.
Every sheet is free and open like this one, whether you sign up or not.
This one was built for a real tattoo studio. For your business we build the same kind of site: one that brings in the booking, the order or the call.
See the websites