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.
About This Template
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.
Read the full template overview
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.
What's Included
- 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
Perfect For
- 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
Structure
One script initialises each section with a single setup and teardown path and one motion branch, and every section is guarded so a buyer can delete any of them.
The breath guide
The breath guide is a paused, infinitely repeating GSAP timeline whose three tweens hold the exact 4, 7 and 8 second durations. Everything on screen comes from one clock reading rather than from callbacks at phase boundaries: the sweep arc, the travelling dot, the current phase and the seconds remaining, so the count can never drift out of step with the expanding form. The three phase arcs sit in the true 4:7:8 proportions of the circle, and the form scales correctly whatever the browser's transform-box support.
When it plays
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.
:root.
Try them in the preview above.
Questions about this template
Is the breath guide medically accurate?
It runs the real 4-7-8 pattern, four seconds in, seven held, eight out, on a single 19-second timeline, with the ring, sweep arc, position dot, phase cues and per-second count all derived from that one clock so they cannot drift apart. It is a guide, not a clinical tool, and it makes no health claims in the shipped copy.
How do I put my own class timetable in?
It is an aligned seven-day grid in plain HTML, not day tabs or a data file, so you edit class names and times directly. The same DOM order collapses to a stacked day list on mobile, which means you maintain one timetable rather than a desktop and a mobile copy.
Can people book a class through it?
No. The timetable and membership tiers are designed and complete, but there is no booking system behind them. Point them at Mindbody, TeamUp, Momence or whatever you already run; studios almost always have a booking platform before they have a website.
Terracotta is quite a commitment. Can I change it?
Yes, from a three-colour token block: clay, cream and pine. The whole site reskins from those three values, including the five class-type states in the timetable, which are built from only those three colours precisely so a repalette does not break them.
Does the breath animation keep running in a background tab?
No. It pauses when it scrolls out of view or the tab is hidden, and picks the visitor's intention back up on return, so it never burns battery animating something nobody is looking at. It also only starts on the visitor's command rather than autoplaying.
