Wellness Studio Template 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. 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
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.