# Free dance studio website template
> Free HTML dance studio website template for adult beginner classes, with a timetable and passes. AGENTS.md for Claude Code, or no code with 8B. Made by 8B (https://8b.com/), an AI website builder. Updated October 2026.
This dance studio website template is one free HTML file for a school that runs weekly classes. It has six styles, a drawn path through a first class, a seven-day timetable, five teachers, four passes and a booking form, in bold grotesque type with hand-drawn red loops. An AI agent can adapt it.
- Page: https://8b.com/templates/twirl/
- Live demo: https://8b.com/templates/twirl/demo.html
- DESIGN.md (design tokens and motion rules): https://8b.com/templates/twirl/DESIGN.md
- Repository (GitHub template): https://github.com/8bsite/dance-studio-website-template
- Download ZIP: https://8b.com/templates/twirl/dance-studio-website-template.zip
- Template name in the repository: Twirl
- At a glance: One 105 KB index.html with its CSS and JavaScript inside, 12 sections, 26 Unsplash photos credited in CREDITS.md, Host Grotesk from Google Fonts, GSAP 3.13.0 (ScrollTrigger, MotionPath); Lenis 1.3.27 smooth scroll loaded from jsDelivr.
## Use it with an AI coding agent
Download the files into the project (Windows PowerShell: `curl.exe`):
```bash
curl -LO https://raw.githubusercontent.com/8bsite/dance-studio-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/dance-studio-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/dance-studio-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/dance-studio-website-template/main/CREDITS.md
```
Then give the agent this prompt:
```text
Read AGENTS.md, then edit index.html. Make this the site for . Replace the six styles, the timetable cards, the five teachers, the four passes and the contact details first. Keep the ids, the data-8b-section, data-8b-motion and data-8b-part attributes and the class names AGENTS.md lists. Ask me for any missing fact; never invent prices, times, bios or contacts.
```
Work on the downloaded file, not on a link. AGENTS.md lists what to keep and what to replace. Or copy the whole repository: `npx degit 8bsite/dance-studio-website-template my-site`.
### Dance studio website design prompt for any AI tool
Use this to build a dance studio site from scratch in Claude Code, Codex, Cursor, Lovable, v0 or Bolt, or to brief a designer. It writes this template's design as decisions, like prompts written for other studios. With the template itself, the short prompt above is enough.
```text
Build a one-page website for a dance studio that teaches adult beginners. Use one index.html with GSAP, ScrollTrigger and Lenis from a CDN. Sections in order: header, opening, styles, first class, timetable, teachers, showcase, quotes, passes, questions, booking, footer. Type: Host Grotesk only, weights 400 to 700; huge uppercase headings at weight 400 with tight tracking, bold names, small wide-tracked uppercase labels. Colours: #f4f5f7 page, #15161c text and dark sections, #cfe0ea pale blue, #d03e33 red, #f7d02c yellow, #19437f deep blue. Use red and yellow as flat shapes and card fills, never as text on white. Layout: no shadows, no gradients, no icon cards, no centred hero with two buttons. Crop photos into circles and arches on coloured blocks, circle one phrase per section with a hand-drawn SVG loop, and show the week as seven columns of coloured cards with level and teacher. Motion idea: things moving on a dance floor. A dot walks a drawn path through the steps of a first class, portraits spread from a fan onto a ring, passes fan out of a stack. Switch all of it off under prefers-reduced-motion. Copy: short, concrete. Ask me for class times, teachers, prices, address, hours and the trial offer; never invent them, and list each placeholder. One primary action, book a free first class, repeated in the header and the booking form. Mobile: collapse the header to a menu button under 900 px, keep tap targets at least 44 px. Done when there are no console errors, no sideways scroll at 390 px and keyboard focus is visible.
```
## About
Websites for dance studios work when a stranger can find a beginners' night in one scroll, and this page puts the timetable in the middle, with a level and a teacher on every card. The same structure suits a dance class website template for a yoga, Pilates, music or art school: the styles become subjects, the passes stay, and the free first class becomes a trial lesson.
If you vibe code the site, treat this as a dance studio website template for Claude Code and Cursor: hand the agent index.html and AGENTS.md. Replace the thirteen timetable cards, the five teachers and the four passes first. The opening ring is built for eight portraits and the styles line-up for six photos, so keep those counts. Ask the owner for real times, prices, bios and the show date, and never invent them.
Choose this base for a class business with a free trial, a weekly grid and a ticketed show. Take a [gym or training club](https://8b.com/templates/arcline/) template when coaches and memberships matter more than a free trial and a show. The honest weak spot is the pinned showcase, which holds the screen while its photo row slides sideways and can feel long on a short laptop.
## Design
- Palette: #f4f5f7 (page background, the solid header bar once scrolled, and the step numbers in the first-class path that the red dot has not reached), #15161c (text, rules, form border, icon buttons, and the black showcase and footer backgrounds), #cfe0ea (pale blue: the first-screen band, the full-screen menu, the styles circle, some timetable cards, the discs behind the quotes and the booking heading, and the fill on button hover), #d03e33 (red: hand-drawn loops, the walking dot and step numbers, four timetable cards, two teacher blocks and the Ten classes pass), #f7d02c (yellow: plus shapes, the showcase bars, the thank-you line, two timetable cards, the First class pass and the fill on white button hover), #19437f (deep blue: three timetable cards including the Friday open class, the showcase info card, one teacher block and the Unlimited pass), #1e1f36 (ink navy: the background of the main buttons), #ffffff (the timetable and pricing sections, white cards and form, photo borders in the ring, and text on dark), #575c6b (grey for lead paragraphs, small notes and the footer rule)
- Fonts: Host Grotesk (the only typeface, one variable file from weight 400 to 700: huge uppercase headings at weight 400 with tight tracking, bold names and step titles, prices at weight 400 like the headings, small uppercase labels at weight 500 with wide tracking, and the giant footer wordmark at weight 700)
Content sits on a 1440 px wrap, and most section headings are indented about 18 percent of the screen width from the left. Section headings are huge uppercase lines. Photos are cut into circles, half circles and squares on coloured blocks. Hand-drawn loops circle key words, and plus shapes and discs repeat from section to section.
Dance studio website design relies on contrast: dark showcase and footer sections break up the light ones, and pale blue, red and yellow shapes sit behind photos. Buttons fill with a circle on hover, header links draw an underline, and the pinned showcase [slides its photo row sideways](https://8b.com/templates/animated/).
## Sections and motion
- **Navigation** (navigation): fixed top bar: wordmark, four section links, Timetable link, Free first class button, menu button; full-screen menu overlay. Motion: The bar turns solid after a few pixels, slides away when you scroll down and returns when you scroll up, and the menu opens as a full-screen overlay.
- **Come alone. Leave with a crew.** (opening): first screen: the heading "Come alone. Leave with a crew.", two paragraphs, two buttons and a ring of eight student portraits with a note. Motion: On load the text slides up in turn, a ring line draws itself and the eight portraits spread from a tight fan onto the circle.
- **Six styles, one floor** (styles): six dance styles as a list beside a line-up of six photos; each photo steps forward as its name crosses the middle of the screen. Motion: Scrubbed: as each style name crosses the middle of the screen, its photo steps into the centre of the line-up and back while a red loop draws around the name and is erased.
- **Your first class, step by step** (first-class): a first class in four steps along a hand-drawn path with a red dot walking it, and a class photo. Motion: Scrubbed: a hand-drawn path draws itself while a red dot walks it and each step number fills in when the dot arrives; on phones a straight line runs beside the steps.
- **This week on the floor** (timetable): the week as seven day columns, each with one or two classes (time, style, level, teacher), and a closing line. Motion: The seven day columns step in once, one beat at a time, and a yellow plus shape turns with the scroll.
- **The people who count you in** (teachers): five teachers as photo cards on coloured blocks, each with a name, a style and a short story. Motion: Scrubbed: as each card rises, the coloured block behind its photo makes a full turn and the photo lifts into place.
- **On stage in June** (showcase): the twice-a-year show: a sideways row of six stage photos and a card with date, place and tickets. Motion: Pinned: the section holds while the photo row slides sideways, the photos bob in alternate beats and the bars on the ticket card pulse.
- **Heard after class** (voices): three student quotes with a name and how long they have danced. Motion: A red loop draws once around a phrase in each quote, and a large pale blue disc and a yellow plus turn with the scroll.
- **Pick a pass** (pricing): four passes as cards: First class (free), Drop-in, Ten classes, Unlimited. Motion: Scrubbed: the four passes start fanned on the first card and spread into their row; a loop draws once around the word Free.
- **Asked before the first class** (faq): six questions and answers in native elements beside a heading with a hand-drawn loop. Motion: The six questions step in one after another, a loop circles the heading words, and a yellow plus turns with the scroll on wide screens.
- **See you on the floor** (contact): booking: heading, studio address, hours, phone and email beside a form for the free first class. Motion: Scrubbed: a pale disc rolls in from the right edge while a yellow plus spins down beside the heading.
- **Studio** (footer): footer: four columns (Studio, Open, Explore, Say hello), a huge wordmark and the copyright line with the Design: 8B credit. Motion: The four footer columns step in once, one beat at a time.
## Good for
- dance studio or dance school for adults
- fitness, yoga or Pilates studio with a weekly timetable
- music, art or language school with classes and passes
- any local class business with styles, teachers, a free trial and a pass menu
## Questions
**Is this a free dance studio website template I can use for a client?** Yes. It is one index.html under the MIT license, so a freelancer can ship it for a studio at no cost. GSAP, ScrollTrigger, MotionPath and Lenis load from jsDelivr, there is no build step, and CREDITS.md lists the Unsplash photos and the font.
**How many sections and classes does it have?** It has twelve sections: header, opening, styles, first class, timetable, teachers, showcase, quotes, passes, questions, booking and footer. The timetable holds thirteen cards, twelve classes and a Friday open class, plus five teachers and four passes.
**How do I give the template to an AI agent?** Put index.html and AGENTS.md in a folder and tell Claude Code, Cursor or Codex to read AGENTS.md first; it lists the facts to ask the studio for and the selectors to keep. Without the file, paste the dance studio website design prompt below into any AI tool. Base44 can also [rebuild the look from the demo](https://8b.com/templates/for-base44/).
**What must I keep when I replace the demo content?** Keep the ids and the data-8b-section, data-8b-motion and data-8b-part attributes, plus the classes AGENTS.md lists for each animated section. The opening ring needs eight portraits, and the styles line-up and styles list match one to one. Update the --len value when you rename the studio.
**Does the booking form send anything?** No. With JavaScript the form checks the name and the email, then shows a thank-you line, and sends nothing. Without JavaScript it posts to the page itself, which a static host rejects. Connect it to Formspree or Netlify Forms, or point the buttons at your own booking or checkout page, as AGENTS.md describes.
**Can I get a site like this without editing code?** Not this exact file, but [8B's AI website builder](https://8b.com/) makes a new site from a sentence. You describe the studio and its engine designs the site, and designing and restyling are free. Hosting, SSL, full HTML export and AI edits in chat are on Pro at $9 a month billed yearly. It also runs inside Claude and ChatGPT.
## Before publishing
Replace: social preview image, favicon, phone number, email address and contact form (sends nothing yet), plus the invented demo facts (prices, dates, addresses).
- Free first class button in the top bar, Book a free first class in the phone menu and on the first screen, Book your free first class in the first-class section, Book it on the First class pass, Book a class buttons in the timetable and on the Drop-in pass, Buy ten, Go unlimited lead to #contact (the booking form) now; point them to your booking, shop or checkout pages, or keep #contact once the form is connected.
- Ask for tickets button in the showcase lead to #contact now; point them to your ticket page for the show.
- Timetable link in the top bar lead to #timetable now; point them to keep, or your online timetable and booking system.
- How a first class goes link on the first screen lead to #first-class now; point them to keep as is.
- Phone and email links in the contact section and the footer lead to tel:+441130000000 and mailto:hello@twirl.example now; point them to your studio phone and email.
- The showcase pins the screen while its row slides sideways, which can feel long on short laptop screens.
- On phones the first-class path is replaced by a straight line and the styles line-up shrinks into a sticky strip above the list, so check the layout at 375 px after you change the copy.
## License
Code MIT. Photos: Unsplash License (credits in CREDITS.md). Fonts: SIL Open Font License 1.1. Browsers: Chrome and Edge 108+, Safari 15.4+, Firefox 101+ (it uses cascade layers, small/dynamic viewport units).