Free wellness studio website template
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
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:
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.mdPrompt 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-siteWellness 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 linksFonts
- 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
- NavigationTop 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 weekBlack 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 MaraA 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 calendarHost 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 teamGiant 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 questionsHeading with a note and five questions as native details elements
- The Feelings JournalHeading, 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 firstDetails on the left (email, phone, studio, hours) and a form with a topic select on the right
- StudioGiant 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
#coursenow; point them to your course booking or enrolment page, or keep #course. - Watch live button in the opening lead to
#livenow; 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
#contactnow; 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 rownow; point them to your checkout or enrolment page for the course group. - Plan a session button in the teams section lead to
#contactnow; 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 textnow; point them to your shop or payment link, or a cart script that does the real work. - Cart icon in the header lead to
#journalnow; 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.



