# Nail Studio Template
> A complete one-page site for a boutique nail studio, built on a butter ground with one lacquer red, and a live shade try-on that paints a photographed hand coat by coat as its signature.
Canonical: https://gsapvault.com/templates/nail-studio-template
Live demo: https://gsapvault.com/demos/nail-studio-template/index.html
| Property | Value |
|----------|-------|
| Type | template |
| Tier | paid |
| Price | £5 |
| Difficulty | advanced |
| Plugins | ScrollTrigger |
| Techniques | scroll-reveal, stagger, text-animation, click-toggle, svg-filters, timeline-control |
| Uses Lenis | Yes |
## Overview
A production-ready site for a one-chair nail studio that refuses the category's defaults outright: no blush pink, no gold gradients, no script lettering. It runs on a butter ground with near-black type and a single lacquer red, and every other colour on the page comes from the shade library itself.
The signature is a live try-on. Choosing one of fifteen shades paints it onto a photographed hand nail by nail with a staggered polish sweep, repeated once per coat that the shade actually needs, and a finish control swaps between creme, glitter and chrome over the colour. The paint is an SVG overlay in exact register with the photograph, so it sits on the nails at every width.
The page is structured around colour selection rather than around a hero and a services list: the shade library is the spine, and a plain appointment enquiry form is deliberately kept secondary. Copy is written for a fictional Margate studio in a dry, unsentimental voice, and the photography is bundled as art-directed WebP derivatives.
## Features
- Complete deployable one-page site: nav, try-on hero, shade library, finishes, prices, the studio, appointments and footer
- Signature live try-on: pick a shade and it is painted onto a photographed hand, nail by nail, in a staggered polish sweep
- Coats are content, not decoration: a one-coat black is painted once and a chalky green three times, each pass laying down more opacity over the last
- Finish control swaps creme, glitter and chrome over the chosen colour, with glitter generated from an SVG turbulence filter rather than a repeating tile
- Shades declare which finishes they are mixed in, so an unavailable finish disables itself and releases back to creme with a written note
- Exact register by construction: every layer of a nail is the same rectangle inside the same rotated group and the same clip path, so nothing can drift when the stage is resized
- The chosen shade retints the wordmark drop, the readout and the finish chips through a single CSS custom property
- Sticky hand alongside the library on every screen size, so a shade is never chosen with the result out of view
- Bundled studio photography baked to a warm, low-saturation grade so the shades are the only strong colour on the page, around 155KB total
- Three-colour token block: change butter, ink and lacquer and the whole site reskins
- Lenis smooth scrolling wired in and fully optional
- Accessible: two native radio groups mean the browser owns keyboard support, the library reads as a static grid with an unretouched photograph when JavaScript is unavailable, and reduced motion gets an instant retint with no sweep
## Use Cases
- Nail studios, nail bars and single-chair beauty rooms
- Any business whose product is a colour or a finish: paint, tile, textiles, hair colour, framing
- Small studios that want a product library rather than a services list as the page's spine
- Tattoo studios and piercing rooms working from a catalogue of designs
- Independent salons that need an enquiry form rather than a booking platform
## 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, and every section is guarded so a buyer can delete any of them. The try-on's whole data model is two native radio groups, fifteen shades and three finishes, which is why it degrades to a readable static library and why arrow keys, grouping and checked state come from the browser.
### The shade try-on
The try-on repaints the nails in the photograph rather than drawing shapes over them: a build step finds each nail by one threshold on redness, then bakes a small bitmap whose alpha is the nail's outline and whose RGB is that nail's own luminance stored as a signed offset around mid-grey. At runtime one SVG filter lays the shade down flat and adds that offset to it, so the shade lands exactly while the photograph's gloss, curvature and free edge ride on top.
### Adding, not multiplying
Adding rather than multiplying is the point: multiplying darkens the base colour wherever the nail is shaded, which turns the pale shades grey and washes the dark ones out, whereas adding leaves a cream cream in the shadow and a near-black black in the specular. Shifting the photograph's own hue and saturation would keep texture but could never reach the neutral shades, which need lightness changes a hue rotation does not make. Red polish is what makes the mapping exact: it sits far enough from skin that one comparison separates them, where a nude nail overlaps skin wherever it is shaded.
### Painting a shade
The overlay's viewBox matches the photograph's aspect exactly and is told to behave like object-fit: cover, so it stays in register at every width. Painting a shade builds one timeline: a clip rectangle sweeps from cuticle to tip across the nails in turn at the opacity the coat count calls for, that pass is committed before the sweep winds back so nothing flickers, and the colour then deepens to full in place. Sweeping once per coat was tried and read as the animation repeating rather than as depth being built. Every JavaScript hook is a data attribute or a single plain class, and every masked reveal tweens the same transform property its CSS start state sets.
## 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 server. There is no build step and no dependencies to install.
2. Open `index.html` and replace the copy, prices, hours and address with your own.
3. Edit the shade library (see [The shade library](#the-shade-library) below) — this is the main thing you will change.
4. Swap the photography (see [Photography](#photography)).
5. Change three colours in `assets/style.css` to reskin the whole site (see [Palette](#palette)).
Files:
```
nail-studio-template/
├── index.html # the whole site
├── assets/
│ ├── style.css
│ ├── script.js # readable source, what index.html loads
│ ├── img-manifest.json # source photos + baked grade
│ └── img/ # bundled optimised WebP
├── README.md
└── LICENSE.txt # your licence, keep it
```
#### Optional: minify before you go live
`assets/script.js` is the readable source and is what `index.html` loads. It is around 18KB, which is fine to ship as-is. If you would rather serve it minified, produce it yourself once your edits are done:
```bash
bunx terser assets/script.js -c -m -o assets/script.min.js
```
Then point the last `
```
Lenis is optional — delete its `