# Fitness Gym

> An eight-page gym website template for class-based gyms, functional fitness boxes, fitness-racing and boxing gyms. A live LED countdown to the next class, a player that runs a whole class in 25 seconds, a filterable timetable and a sled-push page transition on every link.

Canonical: https://gsapvault.com/templates/fitness-gym-template
Live demo: https://gsapvault.com/demos/fitness-gym-template/index.html

| Property | Value |
|----------|-------|
| Type | template |
| Tier | paid |
| Price | Not sold singly; comes with the Templates Pass or the Vault |
| Difficulty | advanced |
| Plugins | Flip |
| Techniques | page-transition, soft-navigation, directional-transition, timeline-control, scrub, touch-drag, keyboard-navigation, focus-management, flip-layout, filter, tabs, count-up, load-sequence, progressive-enhancement |
| Uses Lenis | No |

## Lighthouse, as measured

Google Lighthouse on the demo (8 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 class-based gym sells one thing before anything else: the next class. This eight-page template makes the gym's interval clock its identity. The home page opens on a full-bleed black-and-white photograph of a class mid-session, with a live countdown to the next session sitting over its lower edge, and every clock on the site, from the timetable's now line to the coaches' benchmark times, is drawn segment by segment in LED red on a rubber-black face.

Each class page has a player that runs the whole fifty minutes in about twenty-five seconds. The timer ticks, the block bar fills, the photograph cuts hard at every block and the coach's cue lands as a red caption. Visitors can scrub it, step through it with the keyboard or jump to a block. Every internal link is a sled push: the next page is driven in from the right on the sled's black front plate, joined to the old page and shoving it off the screen, slow to start and stopping hard, with lane marks streaming past and a small LED split that freezes on arrival. Back hauls the previous page in from the left in three hand-over-hand pulls.

SPLIT Athletic Club, a fictional gym in three railway arches in Leeds, is the worked example. Swap the photographs, class names, timetable and prices and the same structure suits a functional fitness box, a boxing gym that runs rounds on the clock, a run club or a personal training studio. The free-session form writes a request the visitor can copy or email; connect it to your booking system before taking real bookings.

## Features

- Eight standalone HTML pages: home, classes, three class pages, timetable, membership and coaches
- Sled-push page transition on every internal link: the new page drives in from the right on the sled's front plate, joined to the old page, with a heavy start, a hard stop, streaming lane marks and an LED split; Back is a three-pull sled pull
- One seven-segment LED renderer drawn in SVG, with unlit segments faintly visible like a real gym timer, used by every clock on the site
- Live countdown to the next class in the hero, worked out from the weekly schedule in the gym's own time zone, with a short power-on flicker
- Run the class player on each class page: fifty minutes in about twenty-five seconds, with hard photo cuts and a coach's cue for every block
- Player controls for every input: play and pause, a draggable block bar, jump-to-block buttons and a native range input with arrow, Page Up, Page Down, Home and End keys
- Seven-day timetable with class filter chips, day buttons on phones, a live LED now line in today's column and links that pre-fill the booking form
- Classes index filtered by goal (race, strength, conditioning, new to it) with five-step intensity meters
- Free first session form that pre-selects the class and time from the link and ends in a request summary to copy or email
- Membership plans, house rules and FAQ, plus a coaches start list with portraits and benchmark times in LED digits
- Black-and-white documentary photography graded as one set, with seven matched coach portraits
- Reduced motion swaps pages instantly and steps the player block by block; without JavaScript every page is complete and the player becomes an illustrated list

## Use Cases

- Functional fitness and fitness-racing gyms with a weekly class timetable
- Boxing and martial arts gyms that run rounds on the clock
- Bootcamps, run clubs and outdoor training groups taking first-session sign-ups
- Personal training and small-group studios with a team of coaches

## Questions about this template

### Which kinds of gym can use this template besides a fitness-racing gym?

It is built as a general gym website template and fitness website template. Functional fitness boxes, boxing gyms that run rounds on a timer, bootcamps, run clubs, personal training studios and martial arts gyms all fit the same structure: a timetable, class pages, coaches and a first-session offer. Rename the three class pages, replace the photographs, then edit the timetable rows and the prices.

### Does the free session form actually book a class?

No. It is an unwired static front end. It collects a name, email, optional phone number, the class and time, experience, goals and health notes, then shows a written request the visitor can copy or send from their own email app. Point the form at Formspree or Netlify Forms, or replace it with your booking system's widget, such as Glofox, TeamUp, PushPress or Mindbody, before taking real bookings.

### How do I change the timetable and the next-class countdown?

The timetable is plain HTML, one row per session with its class, day and start time, so edit, add or remove rows in timetable.html. The home page countdown reads its own short list of the same sessions inside the hero, and each class page lists its next sessions, so update those when your week changes. Times are read in UK time; change one attribute for another time zone.

### Can I change the blocks and photographs in the class player?

Yes. Each class page lists its blocks in the markup with a start and end minute, a name, the coach's cue and one photograph. Change the minutes and the bar, timer and jump buttons follow. The class length is a single attribute, so a 45 or 60 minute class works too. Use landscape photographs at about 3:2 and keep each cue short enough to read in a second.

### Are the coaches in the template real people?

No. The seven coach portraits and the photograph of the railway arches were generated for this template and show people and a building that do not exist. The training photographs are licensed stock, retouched to remove brand marks. Replace the portraits with photographs of your own team before launch, keeping the same 4:5 crop so the coaches list stays aligned.

### Can I use a different accent colour from the LED red?

Yes. The red is one token in the stylesheet, used for the LED digits, the label blocks and the buttons. Choose a colour that still reads as a light on a dark timer face, such as amber or green, and keep dark text on it at 4.5:1 contrast or better. Keep the photographs black and white so the accent stays the only colour on the page.

## 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

### The clock is the brand

Every number that matters is drawn as seven-segment LED digits in SVG: the hero countdown, the class player's timer, the timetable's now marker, the benchmark times on the coaches page and the split time in the page transition. Unlit segments stay faintly visible, as on a real gym timer, and the red is the only colour on the site. Any short time or score in the markup can be marked up to render as LED digits, with the plain text kept for screen readers.

### A countdown to the next class

The hero panel reads a week of sessions held in the page and counts down to the next one in hours, minutes and seconds, in the gym's own time zone wherever the visitor is. It names the class, start time and coach, and links to the booking form with that session already selected. It pauses when it is off screen or the tab is hidden, and without JavaScript it shows a plain line about class times instead.

### Run the class

Each class page lists its blocks in the markup: a start and end minute, a name, the coach's cue and one photograph. Play runs the fifty minutes in about twenty-five seconds; the photograph changes with a hard cut at every block and the cue lands as a red caption. Dragging the bar, the keyboard and the block buttons all move the same clock, and a native range input underneath gives screen readers the current minute and block.

### A sled between pages

Internal links fetch the next page instead of reloading it. Within a frame of the click the sled's front plate appears at the edge and the page braces against it, trembling until the next page is ready. The new page is then driven in from the right, joined to the old one and shoving it off to the left: slow to start, gathering speed, then a hard stop, while lane marks stream past and an LED split freezes on the time. Back hauls the previous page in from the left in three pulls, scroll positions are restored and the new heading takes focus.

### Timetable, filters and booking

The timetable rows are plain HTML, so the full week reads without JavaScript. Chips filter by class with a quick reflow, phones get a day picker, and today's column shows the current time as an LED line. Every session links to the free-session form with the class and time pre-selected, and the form writes a request to copy or email rather than sending anything itself.

## 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 eight 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, use any local static server (for example `python3 -m http.server` in the folder) 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 its Flip plugin load from a CDN and the font from Google Fonts. Images, styles and the script are bundled locally.

### Using It With Your Own Design

1. **Identity.** Replace "SPLIT", "Athletic Club", the address, phone number, opening hours and the fictional-club note in the header and footer of each page (they are repeated in all eight files so each page stands alone).
2. **Photographs.** Swap the files in `assets/img/` keeping the names, or change the paths. Keep them black and white: the red of the clock is meant to be the only colour on the page. Update alt text to describe what your photographs actually show.
3. **Classes.** Rename the three class pages for your own classes: a boxing gym might use `boxing.html`, `conditioning.html` and `sparring.html`. Update their links in the classes index, home lanes, footer, timetable chips and the booking form's options.
4. **Timetable and prices.** Edit the timetable rows, the countdown's session list on the home page, each class page's next sessions and the plans on the membership page (see Next Class and the LED, and Timetable).
5. **Colour and type.** Edit the colour tokens at the top of `assets/style.css` (see Palette). Change the Google Fonts link in each page if you change the typeface.
6. **Booking.** Connect the free-session form to your own service before taking real requests (see Free Session 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` | Hero photograph with the headline in chalk blocks and the live next-class clock over its lower edge; "The floor" figures; five class lanes; a compact class player; this week's benchmark workout and board; coaches strip; first-session band |
| `classes.html` | The five classes with length, intensity meter and level, filtered by goal; `?goal=race` pre-selects a filter |
| `hybrid.html`, `engine.html`, `strength.html` | Class pages, the same structure on purpose: block-title hero, facts, class player, the blocks in plain words, kit, the coaches who lead it, next sessions this week, a first-session band and previous/next class links |
| `timetable.html` | The week as a seven-column grid (one day at a time on phones), class filter chips and an LED "now" line; `?class=engine` pre-selects a class |
| `membership.html` | Free first session with its request form (`#free-session`), plans, house rules, FAQ and directions |
| `coaches.html` | The seven coaches as a start list: portrait, role, classes, one benchmark in LED digits and a line in their own words; each has an anchor (`coaches.html#dee`) |

Hooks you will meet in the markup:

- `data-page` wraps each page's header, main and footer: it is the part the sled pushes, and what the transition fetches from the next page.
- `data-led="6:41"` on any element draws its text as LED digits (digits, colons and points); the text stays readable to screen readers and shows as plain text without JavaScript.
- `data-next-class` is the home page clock; its schedule is the JSON block inside it.
- `data-player` wraps a class player; `data-length="50"` is the class length in minutes. Each block is an `<li data-block data-start="10" data-end="24" data-name="Run and ski" data-cue="Run 400 m. Ski 500 m. × 3.">` with one photograph, and the `data-done` item is the end frame.
- `data-timetable`, `data-filter="engine"` (chips) and `data-class="engine" data-start="06:00"` (rows) drive the timetable. `data-timezone="Europe/London"` sets the gym's time zone for the clocks.
- `data-class-filter`, `data-goal="race"` (chips) and `data-goals="race conditioning"` (cards) drive the classes filter.
- `data-sessions` lists a class page's next sessions; each row has `data-day="mon"` and `data-time="18:30"` and the next one is marked automatically.
- `data-free-form` and `data-request` are the booking form and its request summary.
- `data-js-only` marks controls that only work with the script (filter chips, day buttons, player controls); they are hidden without it.

### Page Transitions

Every same-origin link to a sibling `.html` page runs the sled push:

1. **Brace.** Within a frame of the click, the sled's front plate (a rubber bar about 60px wide) appears at the right edge and the page braces against it, nudged about 3.5% to the left with a small tremble. It holds there until the next page is fetched and its main photograph decoded; with the page already prefetched the brace lasts about 0.14s and the strain is barely visible.
2. **Push.** The new page is driven in from the right like a weighted sled, joined to the old page at the plate and shoving it off to the left. It starts slow and heavy (the first ninth of the distance takes a third of the 0.8s push), gathers speed, then slams to a stop with 6px of overshoot and an immediate settle. No spring, no wobble.
3. **Lane and split.** During the push a narrow lane strip runs along the bottom edge: white lane lines, a tick every metre and labelled lines at 0 M, 5 M, 10 M, 15 M and 20 M, streaming past faster than the pages so the distance is felt. A small LED split above it counts the metres and ticks the time from the click, freezes on arrival (for example "20 M 01.07") and fades within about 0.6s. It is the only clock in the transition.

**Back is a sled pull.** The previous page is hauled in from the left in three hand-over-hand pulls (a quick jerk of about 0.17s, then a pause of 0.08s, three times) while the current page leaves to the right, with the lane running the other way and the split on the right. Forward through history pushes again. Scroll positions are restored, and the arriving page's heading receives focus and is announced. With the next page prefetched (links prefetch on hover, focus and touch) a push takes about 1.07s from click to rest and a pull about 0.93s.

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 sled itself is the `leave`, `hold`, `destroy` 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 clicks, external links and same-page anchors already behave normally.
- While it is pushed off, the old page is a fixed layer showing exactly what was on screen, and its clocks and player keep running until it has gone.
- Timing lives in the constants at the top of the transition section: `BRACE` (0.14s), `PUSH` (0.8s), `PULL` and `PULL_REST` (each pull and pause), `JOLT` (overshoot in px), `LANE_SPEED` and `METRES` (the lane). The plate width is set in `.sled-bar` in the stylesheet.
- The latest click wins: if another destination is chosen while the page is still braced (for example Back before the push starts), it goes straight there without showing the page in between. A click during the push lets that push land quickly and then pushes on to the latest destination. Back or Forward mid-transition settles on the page the browser asked for. Resizing the window mid-transition finishes it quickly.

### Next Class and the LED

The home page clock counts down to the next session in the JSON list inside `data-next-class`: one `["mon", "18:30", "Hybrid", "Dee"]` entry per session, Monday to Sunday. It shows hours, minutes and seconds, names the class and coach, and its link opens the booking form with that session selected. On load the segments power up with a short irregular flicker (skipped with reduced motion). The clock pauses when it is off screen or the tab is hidden.

That list duplicates the timetable on purpose so the home page stands alone. When your week changes, update it in two places: the rows in `timetable.html` and the list in `index.html` (and the next sessions on each class page).

All clocks are drawn by one small renderer, `makeLed`, in `assets/script.js`: seven segments per digit, unlit segments at 12% of the red, lit segments with a faint bloom.

### Class Player

Each block is a list item with its minutes, name, cue and photograph (see the hooks above). Play runs the class at `PLAY_SECONDS` (25) for the whole length; at each block boundary the photograph changes with a hard cut and the cue appears as a red caption. The block bar, its labels and the jump buttons beside it are built from the list, so changing the minutes is all it takes to reshape a class.

- Mouse: drag anywhere on the bar, or click a point on it.
- Touch: a sideways swipe on the bar scrubs; a vertical swipe that starts on the bar still scrolls the page; a tap seeks.
- Keyboard: the bar is a native range input. Arrow keys move a minute, Page Up and Page Down five, Home and End jump to the ends.
- Reduced motion: no ticking playback; the button steps from block to block.
- Without JavaScript: the blocks are an illustrated list with their times and cues.

The player pauses when it scrolls off screen or the tab is hidden.

### Timetable

Rows are authored in `timetable.html`, one `<li class="tt-row">` per session, grouped by day. Each links to `membership.html?class=hybrid&time=mon-1830#free-session`, which pre-selects that session in the form. The chips filter by class with a quick reflow, today's column is marked and shows an LED line at the current time, and phones get a row of day buttons. Without JavaScript the whole week shows as a grid.

### Free Session Form

The form on `membership.html` collects a name, email, optional phone number, the class and time, experience, goals and health notes. It is an unwired static front end: submitting it shows a written request the visitor can copy or open in their own email app, and nothing is sent from the page. Before taking real bookings, either set the form's `action` to a form service such as Formspree or Netlify Forms (and remove `data-free-form` so it submits normally), or replace it with your booking system's widget (Glofox, TeamUp, PushPress, Mindbody and others). Change the address in `data-to` and the email links.

The session options are grouped by class. `?class=engine` selects "Engine, any session", and `?class=engine&time=tue-1830` selects that exact session.

### Palette

| Token | Default | Purpose |
| --- | --- | --- |
| `--chalk` | `#ECEBE6` | The page ground |
| `--paper` | `#E2E1DB` | Timetable rows, form panel and fields |
| `--rubber` | `#111111` | Dark bands, clock faces, the footer, the sled's plate and lane |
| `--ink` | `#111111` | All text on chalk |
| `--iron` | `#57574F` | Secondary text on chalk |
| `--smoke` | `#A9A9A2` | Secondary text on rubber |
| `--night` | `#000000` | The player screen and the request summary |
| `--led` | `#FF3B1F` | Lit segments, label blocks, buttons and red text on rubber |

Colours with a matching `-rgb` triple are used for translucent values; change both. Measured pairs are recorded at the top of `assets/style.css`: ink on chalk 15.8:1, iron on chalk 6.1:1, smoke on rubber 8.0:1, red on rubber and rubber on red 5.3:1. The red is never used for text on chalk (2.98:1); there it appears only as solid blocks carrying dark text. If you choose a new accent, keep at least 4.5:1 against the rubber in both directions.

Type is Pathway Extreme, one variable family: display at width 75 and weight 880 in caps, labels at width 100 and weight 700 in spaced caps, running text at width 100 and weight 400. Two local fallback faces at the top of the stylesheet (`Pathway Fallback`) are sized to it, so text wraps the same while the web font loads and the page does not jump when it arrives; retune or delete them if you change the typeface.

### Accessibility and Fallbacks

- Real links everywhere, a skip link, visible focus, labelled form controls and one `h1` per page.
- The sled, its lane and its split are `aria-hidden`. Scrolling is held while a transition runs; the arriving heading is focused and announced through a polite live region.
- The clocks are drawn in SVG with `aria-hidden`; each has a text equivalent (the countdown has a screen-reader sentence that updates once a minute).
- The player's bar is a native range input with a spoken description ("Minute 18 of 50: sleds"); block changes are announced politely. Filter chips and day buttons are buttons with `aria-pressed`.
- Reduced motion swaps pages instantly with no sled, lane or split, skips the clock's power-on flicker and the count-up figures, and steps the player block by block. The clocks still tell the time.
- Without JavaScript every page is complete: the hero clock shows a plain line about class times, the player is an illustrated list, the timetable shows the whole week, and links load pages normally.
- If the GSAP CDN is unavailable, content stays visible, links load pages normally, and the clocks, player, filters and form still work without animation. Opening from `file://` keeps everything except the transition.

### Dependencies

The demo is pinned to **GSAP 3.15.0** with the Flip plugin. Compatibility floor: **GSAP 3.12+**, with core and plugin on matching versions. No ScrollTrigger, no Lenis, no other plugins, no backend.

### Images and Credits

The download contains 31 cropped WebP derivatives in `assets/img/`, all graded to black and white with firm contrast and a little grain so the set reads as one. Third-party brand marks and printed text (sponsor banners, flags, a painted wall logo, clothing and shoe logos, plate lettering, road signs and whiteboard writing) were retouched out of the stock photographs; the edits are limited to those marks.

Training photography is licensed through [Pexels](https://www.pexels.com/license/), which permits use in website templates. The photographs show unrelated people and places, not SPLIT's members or staff.

| File | Source | Subject |
| --- | --- | --- |
| `hero.webp` | [Pexels 9958673](https://www.pexels.com/photo/9958673/), Amar Preciado | A class training in a warehouse gym, a member setting up a deadlift in the foreground |
| `hybrid-hero.webp` | [Pexels 16966331](https://www.pexels.com/photo/16966331/), Ardit Mbrati | Four athletes in weighted vests running across a hall |
| `class-hybrid.webp` | [Pexels 16966331](https://www.pexels.com/photo/16966331/), Ardit Mbrati | Crop of the same photograph for the class card |
| `engine-hero.webp` | [Pexels 6388525](https://www.pexels.com/photo/6388525/), Tima Miroshnichenko | Two members on air bikes in a hazy hall |
| `class-engine.webp` | [Pexels 6388525](https://www.pexels.com/photo/6388525/), Tima Miroshnichenko | Crop of the same photograph for the class card |
| `strength-hero.webp` | [Pexels 18187617](https://www.pexels.com/photo/18187617/), Ardit Mbrati | Overhead squat with a coach crouching alongside, an LED clock on the wall |
| `class-strength.webp` | [Pexels 4720777](https://www.pexels.com/photo/4720777/), Ketut Subiyanto | An older member braced over a loaded barbell |
| `class-foundations.webp` | [Pexels 6740297](https://www.pexels.com/photo/6740297/), Mikhail Nilov | A coach demonstrating a squat to a new member |
| `class-open-gym.webp` | [Pexels 7672092](https://www.pexels.com/photo/7672092/), cottonbro studio | Pull-ups on a wall-mounted bar against brick |
| `hybrid-warmup.webp` | [Pexels 6150627](https://www.pexels.com/photo/6150627/), AirFit | A group warming up outdoors with high knees |
| `hybrid-run.webp` | [Pexels 37858833](https://www.pexels.com/photo/37858833/), Operaciones Lima | Five runners under a road bridge |
| `hybrid-sled.webp` | [Pexels 37955628](https://www.pexels.com/photo/37955628/), CRISTIAN CAMILO ESTRADA | A woman driving a loaded sled |
| `hybrid-wallball.webp` | [Pexels 4853908](https://www.pexels.com/photo/4853908/), Ketut Subiyanto | Two members squatting with medicine balls |
| `engine-bike.webp` | [Pexels 6389076](https://www.pexels.com/photo/6389076/), Tima Miroshnichenko | A member riding an air bike by tall windows |
| `engine-row.webp` | [Pexels 16966341](https://www.pexels.com/photo/16966341/), Ardit Mbrati | Rowers pulling hard side by side |
| `engine-flush.webp` | [Pexels 4047246](https://www.pexels.com/photo/4047246/), ShotPot | A member lying on the gym floor after the last interval |
| `strength-prep.webp` | [Pexels 39219694](https://www.pexels.com/photo/39219694/), Vitaly Gariev | Two members swinging kettlebells by a window |
| `strength-squat.webp` | [Pexels 4720782](https://www.pexels.com/photo/4720782/), Ketut Subiyanto | An older member with a barbell across his shoulders |
| `strength-press.webp` | [Pexels 2261485](https://www.pexels.com/photo/2261485/), Victor Freitas | A member pressing a barbell overhead, seen from behind |
| `strength-lunge.webp` | [Pexels 16551903](https://www.pexels.com/photo/16551903/), Jonathan Vijayakumar | A member lunging with a sandbag on his shoulders |
| `class-done.webp` | [Pexels 6740312](https://www.pexels.com/photo/6740312/), Mikhail Nilov | A coach and a member high-fiving |
| `community.webp` | [Pexels 6539881](https://www.pexels.com/photo/6539881/), RDNE Stock project | Three members of different ages laughing together |

The seven coach portraits (`coach-dee.webp`, `coach-kofi.webp`, `coach-marta.webp`, `coach-tom.webp`, `coach-aisha.webp`, `coach-bev.webp`, `coach-ravi.webp`), the railway arches (`arches.webp`) and the ski erg class (`engine-ski.webp`) are **AI-generated** images of people and a building that do not exist, made for this template. Replace the portraits with photographs of your real team before launch; never present generated portraits as real staff.

To replace an image, keep its filename or update every path, its `width`/`height` and its alt text. The Vault authoring source includes `assets/img-manifest.json` with original URLs, crops and provenance; in the Vault checkout it regenerates with `bun scripts/build-template-assets.ts fitness-gym-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