# Pilates Studio

> A seven-page pilates studio website template for reformer, yoga, barre and dance studios and boutique fitness. Classes are colour-coded by spring, a Choose your spring picker finds the right one, and every page change slides the site sideways against four coloured springs.

Canonical: https://gsapvault.com/templates/pilates-studio-template
Live demo: https://gsapvault.com/demos/pilates-studio-template/index.html

| Property | Value |
|----------|-------|
| Type | template |
| Tier | paid |
| Price | Not sold singly; comes with the Templates Pass or the Vault |
| Difficulty | advanced |
| Plugins | ScrollTrigger |
| Techniques | page-transition, soft-navigation, directional-transition, interruptible-transitions, svg-animation, pointer-drag, touch-drag, snap, load-sequence, scrub, crossfade, filter, count-up, scroll-reveal, stagger, form-validation, keyboard-navigation, focus-management, progressive-enhancement |
| Uses Lenis | No |

## Lighthouse, as measured

Google Lighthouse on the demo (7 pages, lowest score shown), 5 October 2026. A measurement of the demo as shipped, not a promise for your page.

| Category | Score |
|----------|-------|
| Accessibility | 100 |
| Best practices | 100 |

No performance score is published: it depends on the deployment (server compression, caching, CDN, connection and device) rather than on the code, so measure it where it will live.

## Overview

A studio website has to answer two questions quickly: which class is for me, and when can I come? This seven-page template answers both with one idea taken from the reformer itself. Real reformers colour-code their springs from light to heavy, so every class here carries a spring colour, yellow to red, and the colour follows it everywhere: class pages, timetable, teachers and booking. Springhouse Pilates, a fictional reformer studio in a former bedspring works in Bristol, is the worked example; the same pages suit a yoga studio, a barre or dance studio, physio-led clinical Pilates or a boutique fitness club.

The look is warm and quiet: tungsten-lit photographs on an oat paper ground, titles in a wide, light monospace at modest sizes, and no colour at all except the four spring codes. The home hero is a reformer carriage: the photograph is pushed to the right with four coloured springs stretched across the gap from the page edge, and it settles open with a small spring when the page loads. Every internal link runs the same transition. The whole page slides sideways like the carriage, pulling the springs out of a footbar, holds on a dark field with the destination's name, then springs home carrying the new page.

Choose your spring lets visitors pull a carriage handle along a rail, or pick a colour, to see the classes, level and next times for that load. The timetable filters by spring and shows one day at a time on phones, the pricing page works out the cheapest pass for how often someone will come, and the booking page prepares a request to send to the studio. Rename the springs as your own levels, swap the photographs and times, and the site is yours.

## Features

- Seven standalone HTML pages: home, classes, timetable, pricing, teachers, studio and booking
- Spring tension page transition on every internal link: the page slides sideways against four coloured springs, holds on the destination's name, then springs home with the new page
- Back and Forward run it the other way, with scroll positions restored, focus on the new heading and the page title announced
- A click during a transition goes to the latest destination without adding a stray history entry
- Home hero built as a reformer carriage that settles open against four stretched springs on load and pulls a little further as you scroll
- Choose your spring picker: drag a carriage handle along a rail, pick a colour or use the arrow keys, and the photograph, classes, level and next three times change together
- A colour system made only of four spring codes, carried through classes, timetable, teachers and booking
- Weekly timetable of 41 classes written in plain HTML, with spring filter chips, a live count, today marked and day buttons on phones; ?spring=blue preselects a colour
- Which pass suits you: pick classes a week and compare monthly and per-class costs for every pass, with the best value marked
- Three-step booking request pre-filled from any class link, with validation and an explicitly unsent request to copy or email
- Studio page with the building's history, facilities, a four-step first visit and a drawn schematic map with no third-party embed
- Complete pages without JavaScript, instant swaps under reduced motion, and plain links from the file system or with the CDN blocked
- Nineteen bundled, graded WebP images from one consistent tungsten-lit shoot: class scenes, the studio room and building, and a matched set of five teacher portraits, all AI-generated for the template

## Use Cases

- Reformer and mat Pilates studios with a weekly timetable and an intro offer
- Yoga, barre and dance studios that grade classes by level or intensity
- Boutique fitness clubs and physio-led clinical Pilates with several teachers
- Spa and wellness clubs that take class booking requests

## Questions about this template

### Which kinds of studio can use this template besides Pilates?

It is built as a general studio website template. Yoga, barre and dance studios, boutique fitness clubs, physio-led clinical Pilates and spa or wellness clubs can keep the structure: classes graded by level, a weekly timetable, passes and a booking request. Rename the four springs as your own levels, swap the photographs and class copy, and the colour coding carries through every page.

### Can I rename the springs or use my own level system?

Yes. The four spring colours are tokens at the top of the stylesheet, and every class, timetable row and teacher carries a data-spring value of yellow, green, blue or red. Relabel them as beginner, improver, intermediate and advanced, or as intensity names, and recolour the tokens if you like. The picker, filter chips, teacher dots and transition springs all follow the same four values.

### Will the booking form take real bookings?

No. The booking page is an unwired static front end. It collects the class and time, name, email, an optional phone number, whether it is a first reformer class, grip socks and any injuries, then writes an unsent request the visitor can copy or open in their email app. Connect it to your booking system, such as Momence, Mindbody, Glofox, TeamUp or Bsport, or to Formspree, Netlify Forms or your CRM before taking real requests.

### How do I change the timetable and class times?

Each class is one list item in timetable.html, grouped by day, with its time, class, teacher, spaces left and a booking link. Edit, add or remove items and the spring filter, live count, day buttons and empty-day messages update on their own. The next times in the spring picker and the six classes on the home page are short lists you edit the same way.

### Can I add a page and keep the spring transition?

Yes. Copy any page, keep its data-page wrapper and give it its own data-hold-kicker and data-hold-title, the words the transition shows on the dark field. Links to it then slide and spring like the rest. The transition needs the folder served over HTTP or HTTPS by any static host; opened straight from the file system, links simply load pages normally.

### Can I use my own hero photograph?

Yes. Replace hero.webp and the portrait phone crop hero-phone.webp. On desktop the photograph is the carriage, so only its left part shows beside the springs at first and it pulls a little further right as you scroll; keep the people and the action in the left two thirds of a wide image. On phones the 4:5 crop sits beside a short set of springs.

### Are the teachers and photographs real?

No. The studio, teachers and quotes are fictional, and every image was AI-generated for this template as one consistent shoot: the class scenes, the room, the building and the five teacher portraits. Replace them with photographs of your own studio and teachers before you launch, and never present generated people as real staff or members.

## Vibe-Code Ready Setup

This template includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested.

[How AI-assisted setup works](https://gsapvault.com/vibe-coding)

## How It Works

### One transition for the whole site

Internal links fetch the next page and swap it in instead of reloading. The current page slides sideways off a dark field like a reformer carriage, stretching four coloured springs from a footbar at the screen edge. The destination's name holds on the field, springs humming, while the next page and its main images load, then the carriage springs home with the new page and one small overshoot. With the page prefetched on hover or focus, the whole move takes about 1.2 seconds.

### Back, Forward and changes of mind

Going back reverses the direction: the carriage leaves to the left and the springs anchor on the right. Scroll positions are restored, focus moves to the arriving page's main heading and its title is announced to screen readers. Clicking another link mid-transition sends the carriage straight to the newest destination, and a link back to the page you are leaving simply lets it spring home.

### Choose your spring

A native radio group drives the picker, so arrow keys, Home and End and screen readers all work. Dragging the carriage handle stretches a large coil drawn in the chosen colour, with more turns for heavier springs, and letting go snaps it to the nearest spring with a short settle before the class photograph, level, description and next three times crossfade in. On touch screens only a sideways drag moves the handle, so a vertical swipe still scrolls the page.

### Timetable, passes and booking

The week is ordinary HTML that the script reads. Spring chips fold away the other classes with a short reflow and update a live count, and phones show one day at a time with today selected. The pass chooser recalculates costs for one to four classes a week and marks the best value in that frequency's spring colour. Class links carry the class, day and time into the booking page, which builds a request to copy or email.

### Calm by default

Motion is slow and decelerating; only the springs spring. Nothing is pinned, and only the hero responds to scrolling. Reduced motion swaps pages instantly and shows every section still. Without JavaScript, opened from the file system or with the animation library blocked, every page is complete and links load normally.

## Documentation

How this template works and how it goes into a page. The reference you use once you own the files (worked examples, events, the programmatic API, the class list) ships with the download.

### Quick Start

Upload the folder to any static host and open `index.html`. Keep the seven HTML files beside `assets/` so relative links keep working. There is no build step, framework or package to install.

Serve the files over HTTP or HTTPS to see the page transitions. While editing, run any local static server in the folder (for example `python3 -m http.server`) and open `http://localhost:8000/index.html`. Opening a file straight from disk works too, but links then load pages normally without the transition.

GSAP and ScrollTrigger load from a CDN and the fonts from Google Fonts. Images, styles and the script are bundled locally.

### Using It With Your Own Design

1. **Identity.** Replace "Springhouse", the address, phone number, email address, opening hours and the fictional-studio note. The header and footer are repeated in each of the seven files so every page stands alone.
2. **Levels.** The four springs (yellow, green, blue and red, light to heavy) are your level system. Rename them in the copy (beginner to advanced, or gentle to intense) and, if you like, recolour the four `--spring-*` tokens. Every class, timetable row, teacher and option carries a `data-spring` value, and the dots, coils and rules follow it.
3. **Photographs.** Swap the files in `assets/img/` keeping the names, or change the paths. Update alt text and captions to describe what your photographs actually show. The hero needs a wide image with the action in its left two thirds (see Home Hero).
4. **Classes and times.** Edit the class sections in `classes.html`, the week in `timetable.html`, the six highlights on the home page, the next times in the spring picker and the options in the booking form's time list.
5. **Prices.** The passes and the intro offer are plain text in `pricing.html`; the chooser reads its prices from `data-dropin`, `data-pack`, `data-pack-size` and `data-unlimited` on its wrapper, and the static table beside it is written out for visitors without JavaScript.
6. **Booking.** Connect the booking page to your own service before taking real requests (see Booking Form).

Everything visual lives in `assets/style.css`; everything interactive lives in `assets/script.js`, organised as one function per feature that returns early when its markup is absent. `assets/page-router.js` is the small page router underneath the transition (link handling, fetching, history, scroll and focus); you should not need to edit it. Delete a section from the HTML and the rest keeps working.

### Pages and Configuration

| File | Content |
| --- | --- |
| `index.html` | Carriage hero, the method, Choose your spring, the room, six classes this week, teachers strip, intro offer band |
| `classes.html` | Page head, Choose your spring without photographs, the four springs, then seven classes in four spring chapters, each with "Find a time" into the filtered timetable |
| `timetable.html` | The week of 41 classes with spring filter chips, a live count, today marked and day buttons on phones; `?spring=blue` preselects a colour |
| `pricing.html` | Intro offer, drop-in, ten-class pack and unlimited, the pass chooser, booking policies and a payment FAQ |
| `teachers.html` | Five teachers (`id="hester"` and so on) with portrait, springs, a line in their own words, biography and the classes they teach |
| `studio.html` | The building and its history, the room, facilities, your first visit in four steps, getting here with a drawn map, and an FAQ |
| `book.html` | Three-step booking request with a review step and an unsent request to copy or email |

Hooks you will meet in the markup:

- `data-page` wraps each page's header, main and footer. Its `data-hold-kicker` (the small line) and `data-hold-title` (the large title) are what the transition shows on the dark field while that page loads.
- `data-spring="yellow|green|blue|red"` sets the spring colour of anything inside it: dots, coils, chapter rules, chips.
- `data-hero`, `data-carriage` and `data-hero-springs`: the home hero's carriage photograph and its four coils.
- `data-picker`, `data-rail`, `data-handle`, `data-spring-options` and `data-panel="blue"`: the spring picker. Each panel's `data-times` list holds that spring's sessions as `<li data-day="2" data-time="18:00">` (Monday is 1).
- `data-timetable`, `data-filter-chip`, `data-tt-day="mon"`, `data-day-tab` and `data-slot`: the timetable.
- `data-chooser` and `data-result="dropin|pack|unlimited"`: the pass chooser.
- `data-booking`, `data-step`, `data-next`, `data-back` and `data-draft`: the booking request.
- `data-reveal` and `data-reveal-group` give a gentle rise on scroll; `data-hero-fade` marks a page's opening block.

### Page Transitions

Every same-origin link to a sibling `.html` page runs the spring tension transition:

1. **Out.** The page wrapper is the reformer carriage. It slides sideways off a tungsten field, decelerating as if against rising tension, while four coloured springs stretch from a footbar at the screen edge to an end plate on the carriage. The springs keep the same number of coils, so their pitch opens as they stretch.
2. **Hold.** The destination's kicker and title rise on the field and the springs hum, taut, while the next page is fetched, its hero image decoded and the page swapped in off screen.
3. **In.** The carriage springs home carrying the new page, passing its resting point once by a few pixels and settling, while the springs close to nothing.

Back and Forward run it the other way: the carriage leaves to the left and the springs anchor on the right. Scroll positions are restored, the arriving page's heading is focused and its title announced through a polite live region.

On the home page the transition's springs sit in the same band as the hero's springs, so leaving home draws one continuous line of springs: from the screen edge into the carriage's end plate, then on through the page itself.

Notes for editing:

- Pages are fetched, not reloaded, so scripts inside a fetched page do not run. Put new behaviour in `assets/script.js` as another init function called from `initPage`. Every page loads `assets/page-router.js` before `assets/script.js`; keep that order on a new page.
- The transition itself is the `leave`, `hold` and `enter` functions passed to `PageRouter.create` at the end of `assets/script.js`; the header comment of `assets/page-router.js` lists everything they receive.
- Any sibling HTML file with a `data-page` wrapper joins the transition automatically. Add `data-native-navigation` to a link or container to opt out; downloads, new-tab and modified clicks, external links and same-page anchors already behave normally.
- Timing lives in `pullOut` (0.45s), `showTitle`, `springHome` (0.55s) and a minimum 0.2s hold. With the next page prefetched (links prefetch on hover, focus and touch) one transition measures about 1.2 seconds; on a slow connection the springs hold until the page is ready.
- The page does not take clicks while the carriage moves. The latest destination wins: Back or Forward chosen before the new page is in place drops the old destination without a history entry and swaps the new title onto the field with the carriage still out; after the swap, the arriving page finishes quickly and the next transition starts. Resizing the window mid-transition finishes it quickly.

### Home Hero

The photograph is the carriage, pushed to the right of a gap of oat paper. Four coils run from a footbar at the page edge to an end plate on the photograph's left edge; the H1 and the intro pill sit in the gap above them.

- On first load the carriage settles from nearly closed to its resting offset with a small spring, stretching the coils. The closed offset is the stylesheet's start state on `[data-carriage]` (15vw on desktop, 10vw on phones).
- Scrolling pulls the carriage a further 5vw to the right, scrubbed, then the hero scrolls away normally. Nothing is pinned.
- The carriage is wider than the visible frame (`--overhang`), so it never shows an edge while it moves. Only the left part of a wide photograph shows at rest: keep the subject in the left two thirds. Phones use a separate 4:5 crop, `hero-phone.webp`, inset beside a short set of springs.
- Reduced motion and no JavaScript show the static open layout.

### Choose Your Spring

A native radio group with four options drives everything, so arrow keys, Home and End and screen readers work. Above it, a rail carries a carriage handle and one large coil.

- Click or tap a colour, or use the keys: the handle springs to that spring's stop and the coil is redrawn in its colour, with more turns for heavier springs.
- Drag the handle: the coil stretches with it and changes colour as the handle passes each spring. Letting go snaps to the nearest stop with a short settle. On touch, only a sideways drag moves the handle; a vertical swipe that starts on it still scrolls the page.
- On settle, that spring's panel crossfades in: photograph, classes, level, who it is for and the next three times from now, with Today and Tomorrow where they apply. A polite live region announces the change.
- `?spring=red` in the address preselects a spring.
- Without JavaScript the rail is hidden and the four panels show as a plain list, each with its first three times.

On `classes.html` the same picker appears without photographs, because each class photograph follows further down the page.

### Timetable

The week is authored in HTML so it is complete without JavaScript: one `<section data-tt-day>` per day and one `<li data-slot data-spring>` per class, with its time, name, teacher, spaces and a Book link carrying `?class=&day=&time=` to the booking page.

- Spring chips are buttons with `aria-pressed`. Choosing one folds the other classes away with a short reflow and updates the live count; days with no class in that colour say so.
- Under 960px, day buttons show one day at a time, starting with today. Today's column is marked at every width.

### Which Pass Suits You

Choose one to four classes a week and the monthly and per-class cost of drop-in, the ten-class pack and unlimited update with a short count, using 52 weeks over 12 months. The best value gains a rule in that frequency's spring colour (one a week yellow, four a week red) and a live region reads out the answer. Without JavaScript a static table shows the same figures.

### Booking Form

`book.html` is an **unwired static front end**. Fields are named `class`, `slot`, `name`, `email`, `phone`, `first`, `socks` and `notes`. With JavaScript it becomes three steps with validation per step, a review and a "Prepare my request" button that writes an unsent request the visitor can copy or open in their email app. Without JavaScript the steps show as one form with a visible note to email the studio.

- `?class=foundations&day=wed&time=18:45` pre-selects a class and a time; every Book link on the site uses this. `?class=intro` keeps every time on offer for the intro classes.
- Choosing a class narrows the time list to that class's sessions. The times are this week's example timetable; replace them with your own, or drop the step and link to your booking system's class page.

To take real requests, connect the form to your booking platform (Momence, Mindbody, Glofox, TeamUp, Bsport) or to Formspree, Netlify Forms or your CRM: change `method="dialog"` to the method your service needs, replace the `submit` handler in `initBooking` with your delivery code, and update the notices. Only say a booking was made after your service confirms it.

### Palette

| Token | Default | Purpose |
| --- | --- | --- |
| `--oat` | `#EEE7DC` | Page ground |
| `--oat-deep` | `#E3D9CA` | Alternate bands, photo mats, form fields |
| `--ink` | `#1E1A16` | Text, pills, handle, footbar and end plates |
| `--ink-soft` | `#5A5148` | Secondary text (6.3:1 on oat, 5.6:1 on oat-deep) |
| `--tungsten` | `#2A1F18` | Intro band, footer and the transition field |
| `--spring-yellow` | `#D9A930` | Light spring |
| `--spring-green` | `#4C8A5E` | Light to medium |
| `--spring-blue` | `#3C64A8` | Medium |
| `--spring-red` | `#C4462F` | Heavy |

The spring colours are marks only: dots, coils, rules and chips, never page grounds and never text on oat. Each dot carries a thin ink ring so the yellow one still reads on the light ground, and every mark sits beside its name in text. Measured contrast pairs are recorded at the top of `assets/style.css`.

Type is Martian Mono, set wide and light in capitals for titles, labels, times and prices, with Hanken Grotesk for running text. Titles stay small (the H1 tops out at 3.4rem); the scale comes from the photographs and the space.

### Accessibility and Fallbacks

- Real links everywhere, a skip link, visible focus, labelled form controls and one `h1` per page.
- The transition layers are `aria-hidden`. The arriving page's heading (or the heading of a linked section) receives focus and the page title is announced.
- The picker is a radio group with a live status; filter chips and day buttons are buttons with `aria-pressed`; the FAQs are native disclosures.
- Reduced motion swaps pages instantly, opens the hero without the settle and removes reveals and stretches.
- No JavaScript, an unavailable GSAP CDN or opening from `file://`: links load pages normally and all content is visible.

### Dependencies

The demo is pinned to **GSAP 3.15.0** with ScrollTrigger. Compatibility floor: **GSAP 3.12+**, with core and plugin on matching versions. No Lenis, no other plugins, no backend. Fonts: Martian Mono and Hanken Grotesk from Google Fonts.

### Images and Credits

The download contains nineteen cropped, graded WebP derivatives in `assets/img/`.

Every image is **AI-generated** for this template as one shoot in one fictional room: the studio scenes `hero.webp`, `hero-phone.webp`, `room.webp`, `mat.webp`, `mat-portrait.webp`, `barre.webp`, `foundations.webp`, `signature-reformer.webp`, `reformer-flow.webp`, `strong.webp`, `jump.webp`, `springs.webp` and `first-visit.webp`; the exterior `building.webp`; and the five teacher portraits `teacher-hester.webp`, `teacher-kwame.webp`, `teacher-lin.webp`, `teacher-imran.webp` and `teacher-orla.webp`. The people, the room and the building do not exist. Replace the portraits with photographs of your real teachers, and the scenes with your own studio, before launch; never present generated people as real staff or members.

To replace an image, keep its filename or update every path, its `width`/`height`, alt text and caption. The Vault authoring source includes `assets/img-manifest.json` with original URLs, crops and grades; in the Vault checkout it regenerates with `bun scripts/build-template-assets.ts pilates-studio-template --force`. The manifest and source files are authoring inputs; your site only needs the files in `assets/img/`.

## What You Get

- `index.html`: working demo page
- `assets/script.js`: commented, readable source
- `assets/style.css`: effect styles
- `README.md`: full documentation with examples and framework integration notes
- `START-HERE-AI.md`: product-specific copy-paste prompt for AI-assisted setup
- `LICENSE.txt`: standard license terms
- Lifetime updates: re-download anytime from your library

## Get the Code

This is a premium template, not sold individually: it comes with the Templates Pass or the Vault. The standard licence covers unlimited personal and commercial projects with no attribution required for our code. Bundled third-party assets retain their own licences and attribution requirements. The only restrictions: no redistribution of the code itself and no competing effect libraries.

- [Templates Pass (£50 one-time): every current and future premium template](https://gsapvault.com/pricing)
- [The Vault (£99 one-time, best value): every collection in the Vault library, plus future items added to those collections](https://gsapvault.com/effects)

---

From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt