# Wellness Studio Template

> A complete one-page site for a yoga or movement studio, built on a saturated terracotta ground, with a full-week class timetable and an interactive 4-7-8 breath guide as its signature.

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

| Property | Value |
|----------|-------|
| Type | template |
| Tier | paid |
| Price | £5 |
| Difficulty | intermediate |
| Plugins | ScrollTrigger |
| Techniques | svg-animation, timeline-control, scroll-reveal, stagger, hover-effect, text-animation |
| Uses Lenis | Yes |

## Overview

A production-ready site for a yoga, pilates or movement studio that deliberately refuses the category default. Wellness sites almost always land on timid beige and sage; this one commits to a saturated clay ground with cream type and deep pine contrast blocks, and holds the entire design to those three colours. The signature is a breath guide: a section where an SVG ring runs the real 4-7-8 pattern, expanding and contracting on a nineteen-second timeline with synchronised inhale, hold and exhale cues and a live count, so a visitor can practise the studio's opening sequence before they ever walk in. The class timetable shows all seven days at once as an aligned grid rather than hiding six days behind day tabs, and hovering or focusing any class picks that type out across the whole week. The copy is written for a fictional Sheffield studio in a grounded, slightly dry voice, and the photography is bundled as art-directed WebP derivatives baked to a warm clay duotone.

## Features

- Complete deployable one-page site: nav, hero, philosophy, class types, breath guide, weekly timetable, teachers, membership, testimonials, visit details and footer
- Signature breath guide: an SVG ring running the real 4-7-8 pattern on a single 19-second GSAP timeline, with an expanding form, a sweep arc, a travelling position dot, phase cues and a per-second count all derived from one clock
- The guide starts and pauses on the visitor's command, pauses itself when it scrolls out of view or the tab is hidden, and picks the visitor's intention back up on return
- Full-week class timetable as an aligned seven-day grid, not day tabs, collapsing to a stacked day list on mobile from a single DOM order
- Cross-week class highlighting: hovering or focusing any class picks that type out across all seven days
- Five class types encoded as five distinct states built from only three colours
- Bundled studio and teacher photography baked to a warm clay duotone, around 330KB total
- Three-colour token block: change clay, cream and pine and the whole site reskins
- Lenis smooth scrolling wired in and fully optional
- Accessible: the breath guide renders as a complete static diagram with written timings under reduced motion, the page reads fully without JavaScript, and every hover interaction is mirrored on focus

## Use Cases

- Yoga, pilates, barre and movement studios
- Independent gyms and small fitness spaces with a class timetable
- Meditation, breathwork and mindfulness practices
- Physiotherapy, rehab and bodywork clinics that run group sessions
- Any membership business that needs a weekly schedule and price tiers on one page

## How It Works

One script initialises each section inside a single gsap.context with gsap.matchMedia, and every section is guarded so a buyer can delete any of them. The breath guide is a paused, infinitely repeating GSAP timeline whose three tweens hold the exact 4, 7 and 8 second durations. Rather than firing callbacks at phase boundaries, a single onUpdate reads tl.time() and derives everything from it: the stroke-dashoffset of the sweep arc, the cx and cy of the travelling dot from the progress angle, the current phase, and the seconds remaining, so the count can never drift out of step with the expanding form. The form is scaled with svgOrigin so the transform stays correct regardless of transform-box support, and the three phase arcs are drawn as stroke-dasharray segments in the true 4:7:8 proportions of the circumference. A ScrollTrigger toggles an in-view flag and a visibilitychange listener toggles a hidden flag; a small sync function plays only when the visitor asked for it and both flags allow it. Under reduced motion the guide is never upgraded at all, so the markup's own state, a full ring with all three arcs, the form at full size and the timings written out in the centre, is what renders. Reveal targets are hidden in CSS only after GSAP is confirmed present, 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 folder** into your project or straight onto your host.

```
wellness-studio-template/
├── index.html
└── assets/
    ├── style.css
    ├── script.js
    ├── img-manifest.json
    └── img/
```

**2. Replace the copy** in `index.html`. Every section is a plain `<section>` with a comment header, so search for the section name and edit the text in place.

**3. Change the palette** in `assets/style.css`. The whole site reskins from the first token block:

```css
:root {
    --clay: #AC5230;      /* the page ground */
    --cream: #F6EFE6;     /* type and panels */
    --pine: #1F3D34;      /* contrast bands */
}
```

Or take one of the four alternates without editing a colour at all: see [Palettes](#palettes) below.

Everything else (`--clay-deep`, `--rule-on-pine`, `--dim-on-cream` and so on) is derived from those three, with one exception: the `--clay-rgb` / `--cream-rgb` / `--pine-rgb` triples in the same block. Every translucent value on the page resolves from those, so if you change a colour, change its triple to match or the rules and dimmed type will still be mixed from the old one.

---

### Accessibility

- **Reduced motion**: handled in both the CSS media query and a `gsap.matchMedia` branch. The breath guide is never upgraded to its live mode, so it renders as a complete static diagram with all three arcs, the form at full size, and the timings written out in the centre. Nothing is hidden and nothing is unreachable.
- **No JavaScript**: reveal targets are only hidden once GSAP is confirmed present, so a failed CDN leaves a fully visible page. The schedule, prices, hours and contact details are plain markup.
- **Keyboard**: every hover interaction is mirrored on focus. Schedule entries are links, the guide controls are buttons, and there is a skip link.
- **Screen readers**: the ring carries a `<title>` and `<desc>`, and phase changes are announced once each through a polite live region rather than on every frame.
- **Touch**: the schedule highlight is a pointer enhancement only; the grid is fully legible and bookable without it.

---

### Dependencies

Loaded from CDN in `index.html`:

- GSAP 3.14.2
- ScrollTrigger 3.14.2
- Lenis 1.3.17 (optional smooth scroll)

To drop Lenis, delete its `<script>` tag. The script checks for it and carries on without it.

Fonts: Epilogue (display), Karla (body), Anonymous Pro (mono), all from Google Fonts.

## 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
- `LICENSE.txt`: standard license terms
- Lifetime updates: re-download anytime from your library

## Get the Code

This is a premium template. The standard license costs £5 one-time and covers unlimited personal and commercial projects with no attribution required. The only restrictions: no redistribution of the code itself and no competing effect libraries.

- [Buy Wellness Studio Template](https://gsapvault.com/templates/wellness-studio-template)
- [All-Access Bundle (£29 one-time, best value): every current and future effect and template](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