Templates /

Free wellness studio website template

Live demoDownload ZIPBuild without codeGitHub

Edit it by hand: it is one index.html with no build step, so you can open it in any text editor, change the words and photos, and upload it to any static host. Not a coder? Describe your business in one sentence to 8B's AI website builder and it designs a new site for you, with more pages when you need them. Designing is free; publishing with hosting is $9 a month, billed yearly. It also works inside Claude and ChatGPT.

MIT license · Made by 8B, an AI website builder · Plain text: senti.md, data: senti.json

Wellness studio website template: first screen on a phone

About this wellness studio website template

Wellness studio website template: one free HTML file for an emotional fitness studio, coach or course creator who sells a six-week course, live sessions, team workshops and a printed journal. The look is quiet and typographic: warm grey, near-black ink and giant words. AGENTS.md is included, so Claude Code, Cursor or Codex can adapt it.

At a glance, October 2026. One 87 KB index.html with its CSS and JavaScript inside, 12 sections, 7 Unsplash photos credited in CREDITS.md, TikTok Sans from Google Fonts, GSAP 3.13.0 (ScrollTrigger, SplitText); Lenis 1.3.27 smooth scroll loaded from jsDelivr.

Websites for life coaches tend to need the same four things: a free way in, a paid programme, a schedule and a way to get in touch. This page lays them out as a path, from a free live show to a six-week course, then team formats and a journal shop. Among life coach website templates it suits a workshop leader or cohort creator, and as a life coaching website template it asks for no accent colour.

Vibe coding with Claude Code, Cursor or Codex goes fastest when you hand the agent the facts only the studio has: course length, price and start date, the live slot, event dates, team prices, journal details, the founder's story and contacts. The demo invents all of them, along with the four member quotes and the claims about thirty feeling words. Keep the 24-cell word wall or check it again, and never let the agent invent a quote.

This is the right base when the offer is a course plus free content and the look should stay colourless and typographic, the kind of coaching website designs that let the words do the work. A studio that sells single classes by the slot is closer to the Pilates type. The weak spot is commerce: the journal button only counts items and the form sends nothing, so a shop and a form service must be added. The 8B builder covers the no-code route.

Good for:

Emotional fitness studio or feelings coachGroup course or cohort programme with a weekly scheduleCreator who sells a course, live shows and a printed productAny small studio that wants a quiet, typographic look with no accent colour

Turn the wellness studio website template into your site with an AI agent

With an AI coding agent

Files (PowerShell: curl.exe):

curl -LO https://raw.githubusercontent.com/8bsite/wellness-studio-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/wellness-studio-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/wellness-studio-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/wellness-studio-website-template/main/CREDITS.md

Prompt for the agent:

Read AGENTS.md, then edit index.html. Make this the site for <my studio or course: what I teach, course length, price and start date, live slot, event dates and prices, team formats and prices, the journal, founder story, hours and contacts>. Replace first the brand name, the four member quotes, the calendar, prices, photos and links. Keep the section ids and the classes AGENTS.md lists, and set --len on each giant word to its character count. Ask me for missing facts; never invent outcomes, qualifications, quotes, prices, dates or contacts.

In a terminal

npx degit 8bsite/wellness-studio-website-template my-site

Wellness studio website design and motion

Palette

#ece9e4 page ground, nav bar, button and card fills, text on black columns#1c1a18 text, hairlines, borders, black numbered columns, filled buttons#57534d secondary text: captions, footnotes, labels, form labels, FAQ answers#dcd8d1 photo frame ground behind images and the hover fill of small boxed links

Fonts

  • TikTok Sans: the only family, a variable face at 110 percent width: giant words at regular weight, headings semibold, body regular, and a footer wordmark that moves from weight 800 to 450

A warm light grey page ruled with hairlines. Three black numbered columns (1., 2., 3.) mark the steps of joining: free practice, the course, a team session. Giant words (Motivation, Fine, Together) span the width, each with an asterisk and a footnote. Heading lines step to the right, and the course and live sections pair a narrow column with a wide one. Cells, rows and fact boxes are divided by one pixel lines.

The only colour is warm grey and near-black; the seven photos keep theirs and sit in hairline frames. Boxed links grow a small asterisk on hover, and buttons fill upward from the bottom edge. The footer wordmark relaxes from heavy to regular weight as the footer scrolls into view.

Every value of this wellness studio website design, with the type scale, spacing and the motion rules, is in its DESIGN.md file (Google's format), ready for a coding agent or Stitch.

What is on the wellness studio website page

  • Navigation
    Top bar with email and phone, a sticky bar with a boxed wordmark, six boxed links and a cart, a left rail of social icons, a phone menu overlay
  • Practise for free, wherever you are!
    A running band of four member quotes, a black column with the numeral 1, the heading "Practise for free, wherever you are!", two buttons and three free ways to practise

    The four member quotes clone into a running line that loops and pauses on hover or off screen, while on load the heading's second line steps in and the buttons rise.

  • Make it a game!
    Giant word Motivation with an asterisk, a boxed heading, text, three rules, a link, a footnote and a tall portrait

    On scroll the letters of the giant word start at jagged heights and settle into one line as the asterisk turns, and the photo drifts inside its frame against the boxed heading.

  • Fine is not a feeling.
    Giant struck word Fine, the heading "is not a feeling.", a wall of 24 feeling words and a footnote

    Pinned: every cell shows "fine" and flips in a diagonal wave to its feeling word while the strike line draws through the giant word.

  • Six weeks, one feeling a week
    Black column with the numeral 2, a stepped heading, a six-row weekly ledger, price and a Reserve a seat button

    A black arm grows out of the numeral column into the row being read, steps down the six weeks and lights each row in turn.

  • A letter from Mara
    A portrait and a short letter from the founder with a sign-off and a link

    The portrait opens from an inset clip and its image settles from a zoom as the section arrives, and the heading steps in.

  • Next on the calendar
    Host photo with a caption, and a dated table of six events with free and paid formats and a link on each row

    The six calendar rows start in a staircase of offsets and straighten into one table as the section rises.

  • Bring your team
    Giant word Together, a black column with the numeral 3, a team photo and three formats with prices

    Pinned: the photo starts full screen and shrinks into its cell while the giant word slides in, the numeral rises and the offer column with the three formats rises into place.

  • Fair questions
    Heading with a note and five questions as native details elements
  • The Feelings Journal
    Heading, lead, three photos, four product facts, price and an Add to cart button that feeds the header count

    The three photos start as a rotated pile and spread into a row while turning straight.

  • Say it to us first
    Details on the left (email, phone, studio, hours) and a form with a topic select on the right
  • Studio
    Giant wordmark, four link columns, social icons and a legal line with the Design: 8B credit

    The wordmark arrives at heavy weight and relaxes to regular weight as the footer rises.

Before you publish the wellness studio website site

  • Replace social preview image, favicon, email address, phone number, social media links and contact form (sends nothing yet) and the invented demo facts (prices, dates, addresses). AGENTS.md lists them.
  • Book a class button in the opening lead to #course now; point them to your course booking or enrolment page, or keep #course.
  • Watch live button in the opening lead to #live now; point them to your live stream or channel page, or keep #live.
  • Remind me and Book a place links in the live calendar lead to #contact now; point them to a reminder sign-up, the stream page or a ticket page for each event.
  • Reserve a seat links in the course footer and in the last calendar row lead to #contact in the course footer, #course in the calendar row now; point them to your checkout or enrolment page for the course group.
  • Plan a session button in the teams section lead to #contact now; point them to your corporate booking page or a calendar link.
  • Add to cart button in the journal section lead to no checkout: a script raises the cart count in the header and shows a line of text now; point them to your shop or payment link, or a cart script that does the real work.
  • Cart icon in the header lead to #journal now; point them to your cart or shop page.
  • Instagram, TikTok and YouTube icons in the left rail and the footer lead to the home pages https://instagram.com/, https://tiktok.com/ and https://youtube.com/ now; point them to your own profile addresses.
  • Two sections pin while they play (the words wall and the teams photo). At 375 px the teams section is about 1,330 px tall, so the formats and the button sit below the screen until the pin ends, and their rise plays out of sight.
  • The running quote band and the pinned scenes load GSAP, ScrollTrigger, SplitText and Lenis from a CDN; the page stays readable if they fail, but the motion is gone.
  • At 375 px the 24-word wall becomes 12 rows of 2 columns, about 820 px with the heading, while its pin is shorter than on desktop (1.1 screens against 1.5), so the wave runs faster, and on a screen under about 820 px tall part of it plays below the edge.

Questions about this wellness studio website template

Is this a free wellness studio website template, and can I use it for client sites?

Yes. It is one index.html under the MIT license, so a freelancer can adapt it for a client at no cost. GSAP, ScrollTrigger, SplitText and Lenis load from jsDelivr, with no build step and no CMS. Photos are Unsplash images and the font is under the Open Font License; CREDITS.md lists them.

Which parts of the demo text must a coach replace?

All of it, but check the claims first: the four member quotes, thirty feeling words, most people speaking up by week three and led by certified coaches are invented. Keep the footer line that this is training, not therapy, and adapt the emergency-number advice to your country.

Does the contact form or the Add to cart button work?

Not yet. The form checks name and email, shows a thank-you line and clears the fields without sending anything; connect Formspree or Netlify Forms with the steps in AGENTS.md. Add to cart only raises the header cart count and shows a line of text, so link it to your shop or a payment page.

How do I hand it to Claude Code, Cursor or Codex?

Put index.html and AGENTS.md in an empty folder with the curl lines at the start of AGENTS.md, then tell the agent to read AGENTS.md before editing index.html. Give it the files, not the page address, because a link comes back as a summary. Then paste the prompt from this page, filled in with your facts.

Which parts of the file break if I change them?

Keep the section ids, the data-8b-section, data-8b-motion and data-8b-part attributes and the classes AGENTS.md lists for each script. Set --len on each giant word to its character count. Keep the header comment and the 8B meta tag in the head. Keep the Design: 8B footer link unless the site owner asks to remove it.

Can I get a site like this without editing code?

Yes, with 8B's AI website builder. You describe the site in a sentence and its engine designs a new site, its own design and not this template. Designing is free; publishing with hosting and SSL, full HTML export and AI edits in chat are on Pro at $9 a month billed yearly. It also runs in Claude and ChatGPT.

Not a wellness studio website? More free templates

All 55 templates