# Tattoo Studio Template > A complete one-page site for a tattoo studio, built around a flash-sheet picker: choose a design off the sheet and watch its linework ink itself stroke by stroke with DrawSVG, black lines first, red packed in last. Canonical: https://gsapvault.com/templates/tattoo-studio-template Live demo: https://gsapvault.com/demos/tattoo-studio-template/index.html | Property | Value | |----------|-------| | Type | template | | Tier | paid | | Price | £5 | | Difficulty | intermediate | | Plugins | ScrollTrigger, DrawSVG | | Techniques | svg-line-draw, scroll-reveal, stagger, click-toggle, keyboard-navigation | | Uses Lenis | Yes | ## Overview A production-ready one-pager for a tattoo studio, art-directed like the studio's own wall: a dried-blood brick ground, flash sheets as bone-paper panels pinned to it, black linework and tattoo red on the paper, one aged gold for the small lettering, and a blackletter display face doing the sign-writing. Photography ships as six bundled WebP derivatives baked to one high-contrast black and white grade. The signature is the flash-sheet picker. The flash section is a real sheet of six hand-drawn designs - serpent, dagger, rose, swallow, panther, sacred heart, all inline SVG linework, no image files - and picking one inks it into the detail panel stroke by stroke with DrawSVGPlugin, each line taking time proportional to its real length, the red packed in last the way a tattooer would actually work. The panel prices the piece by size, names its artist and suggests placement, so the interaction is also the menu. Around it the page stays disciplined: a hero where the sheet's rose draws itself at wall size, three resident artists with graded photography, the studio section with rates, a genuinely useful aftercare card written the way studios actually talk, and a booking section with a deposit policy that reads real. Swap the names, prices and photos, point the booking link at your inbox, and deploy it as static files - there is no build step. ## Features - Complete deployable one-page site: nav, hero with self-inking wall art, flash-sheet picker, three artists, studio and rates, aftercare card, booking, footer - Signature flash picker: six hand-drawn SVG flash designs that ink themselves stroke by stroke on selection, with stroke duration scaled to each line's measured length - The picker is a real tablist: buttons with aria-selected, roving tabindex, and full arrow-key, Home and End navigation - selection follows focus - Every design's detail panel is real content: artist, placement advice, healing time, and three sizes with prices - Six flash artworks authored as clean inline SVG linework - recolour them with two CSS variables, or swap in your own paths and the inking still works - Bundled studio photography baked to one high-contrast black and white grade, about 160KB for the whole set - An aftercare section written as the card studios actually hand over: four real stages, honest instructions, a free touch-up policy - Blackletter display type (Pirata One) used at disciplined sizes for the sign-writing, with Libre Franklin doing the reading and Cousine pricing the work - Five-colour token block with RGB triples and a measured contrast table in the stylesheet header - a reskin is a five-value edit - Degrades completely: with JavaScript off every design renders fully drawn and all six panels read stacked like a pinned-up sheet - Reduced motion keeps the picker fully working - designs appear instantly complete instead of drawing, via both the CSS media query and the matchMedia branch - Lenis smooth scrolling wired in and fully optional ## Use Cases - Tattoo studios, private studios and guest-spot artists - Piercing and body-art studios with a flat-priced menu - Any business selling a priced set of designs: sign painters, letterpress printers, illustrators selling prints - Barbers, nail artists and anyone whose services suit a pick-a-piece menu - Learning DrawSVG: a real, content-driven example of stroke-by-stroke SVG drawing tied to a picker ## How It Works ### Structure One script initialises each section inside a single gsap.context with gsap.matchMedia, keyed only on reduced motion so exactly one branch runs on every device. Every querySelector is guarded, so any section - the artists, the aftercare card, the whole flash sheet - can be deleted and the rest keeps working. Reveal start states are double-gated behind a has-js class and the motion media query, so a blocked CDN or a reduced-motion preference both leave a complete static page. ### The flash sheet The sheet is a real tablist: each design is a button carrying aria-selected and a roving tabindex, with arrow keys, Home and End moving both focus and selection. The six designs are hand-authored inline SVG - stroke-only paths, round caps, one shared stroke width - so they are also the source of truth for the animation: there are no sprite sheets and no image requests. ### The inking Selecting a design builds one timeline: every stroke path is set to drawSVG '0% 0%' and then drawn to '0% 100%' in document order, each taking time proportional to its getTotalLength(), so a long coil takes visibly longer than a whisker tick - the linework goes on the way a tattooer would run it. Red accents are authored last in the markup so the red goes in after the black, and the one filled element (the dagger's blood drop) fades in at the end. Selecting the same design again re-inks it. ### Accessibility and reduced motion Under reduced motion the picker keeps working - it is a control, not decoration - but designs appear fully drawn instantly: the reduce branch never touches drawSVG, and the CSS media query kills the reveal start states. Lenis is not created at all when reduced motion is on. Focus rings flip colour by surface, because the gold that reads on brick fails completely on bone paper. ### Without JavaScript SVG strokes render fully drawn by default - the script prepares the undrawn state, CSS never hides a stroke - so with JavaScript off the whole sheet reads as printed flash, and all six detail panels stack in order like pages on a clipboard. The hero, artists, studio, aftercare and booking sections are plain readable markup throughout. ## Integration Preview How this effect integrates into a page. The full documentation (examples, events, programmatic API, customization guide) ships with the download. ### Quick Start 1. Copy the whole folder to your web host (or open `index.html` locally). 2. Replace the studio name, address, hours and prices - search `index.html` for "Gallows Hill", "Fossgate" and the `£` amounts. 3. Point the two booking links at your own inbox: search for `mailto:bookings@gallowshill.tattoo`. 4. Swap the photos in `assets/img/` for your own (details below). The page keeps working as you cut it down: every section (`#flash`, `#artists`, `#studio`, `#aftercare`, `#book`) can be deleted wholesale and the script skips what it can't find. ### Accessibility - **Keyboard**: the flash sheet is a tablist with roving tabindex and arrow-key/Home/End support; every interactive element is a real `