# Free water park website template

> Free HTML water park website template with ride sheets, ticket prices and a swim school, no libraries. AGENTS.md for Claude Code, or no code with 8B. Made by 8B (https://8b.com/), an AI website builder. Updated November 2026.

Water park website template: a free one-page site for a water park or leisure pool with four full-screen ride sheets, day and season prices, a Friday night session and a swim school. A giant orange wordmark on black shrinks into the header. It is one HTML file with no animation libraries that Claude Code can edit.

- Page: https://8b.com/templates/cannonball/
- Live demo: https://8b.com/templates/cannonball/demo.html
- DESIGN.md (design tokens and motion rules): https://8b.com/templates/cannonball/DESIGN.md
- Repository (GitHub template): https://github.com/8bsite/water-park-website-template
- Download ZIP: https://8b.com/templates/cannonball/water-park-website-template.zip
- Template name in the repository: Cannonball
- At a glance: One 111 KB index.html with its CSS and JavaScript inside, 12 sections, 29 Unsplash photos credited in CREDITS.md, Kalnia and Reddit Sans from Google Fonts, no JavaScript libraries: CSS scroll-driven animations and a small inline motion script with built-in smooth wheel scrolling, no script loaded from a CDN.

## 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/water-park-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/water-park-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/water-park-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/water-park-website-template/main/CREDITS.md
```

Then give the agent this prompt:

```text
Read AGENTS.md, then edit index.html. Make it the site for <my water park: name, address, opening hours and late nights, rides with heights and lengths, zones, day and season prices, swim school classes with ages, party packages, lifeguard and water facts>. Replace the name, copy, photos and contacts first. Keep the section ids, the classes AGENTS.md lists, four evening hours, lanes and lifeguards, and set each --len to its line's character count; add no animation library. Ask for any missing fact; never invent prices, heights, hours or safety claims.
```

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/water-park-website-template my-site`.

### Water park website design prompt for any AI tool

Paste this into Claude Code, Codex, Cursor, Lovable, v0 or Bolt to build a water park or leisure pool site from scratch, or brief a designer. It is this template's design written as decisions; with the template itself, the short prompt above is enough.

```text
Build a one-page website for <my water park: name, town, rides, zones, prices>, for families plus an over-18s Friday session. Sections in order: opening, rides, zones, season band, After Dark, prices, swim school, questions, lifeguards, visit, footer. Type: Reddit Sans from weight 400 to 800, with display lines very heavy and tightly spaced; Kalnia at weight 300 for short serif lines that end in a dash. Colours: #0a0a0b black, #ffffff white, #ff4400 orange as the only warm accent, #006bb8 pool blue, #0b1e3a dusk navy for the evening section, #f1f2f4 for the ticket card and the form panel. Opening: a full-bleed underwater photo over a giant orange wordmark on a black strap that shrinks into the header logo as you scroll. Rides: four full-screen photo sheets that stack. Zones: a huge all-lowercase heading that pool-blue water rises through. Do not use a purple gradient, soft shadows, three icon cards or a centred hero with two buttons. Motion: CSS scroll-driven animations with a little inline script and no animation library; with reduced motion or without support show the finished static layout. Copy: short and concrete. Ask me for prices, height limits, opening hours, ride specs, address, lifeguard and water facts; never invent them, and leave marked placeholders. One primary action, buy a wristband, in the header, the opening and the zones. Mobile: check at 390 px, tap targets of at least 44 px, a full-screen menu. Acceptance: no console errors, visible keyboard focus, and a list of every placeholder left.
```

## About

A water park website has to settle rides, heights, prices and opening hours before a family sets off. This template shows four named rides with their specs and height limits, three zones, a day ticket and a season band with prices, different hours for Fridays and weekends, and a party enquiry. It fits a leisure pool or a lido with slides, and works as an amusement park template for any venue selling day tickets and a season pass.

Give Claude Code, Cursor or Codex the facts only the park has: ticket and season prices, height limits, the ride list, opening hours, the Friday session and the swim school classes. The demo invents all of them, including the lifeguards. Replace the name, then set --len on the opening and footer wordmarks to its character count, the ® included. This is the light build: about 27 KB gzipped with no script from a CDN, against 73 KB for the GSAP version.

This is the right base for one venue that sells tickets at its gate or through a single shop, with rides as the draw. A [lido or swim club](https://8b.com/templates/splosh/) that sells timed sessions fits a pool template better. Weak spots: the ticket buttons jump to a section instead of a checkout, there is no live queue or capacity, and the party form sends nothing until connected. Without code, 8B's builder is the other route.

## Design

- Palette: #ffffff (the page ground and the white zones, prices, questions and visit sections, input fields, and text on black, blue and navy), #0a0a0b (black grounds of the opening, rides, season band, lifeguards and footer, the wordmark strap and button text), #ff4400 (the one warm accent: the opening and footer wordmarks, button fills, the header logo tab text, the season strap, After Dark times, lane numbers, rope lines and focus rings), #006bb8 (pool blue: the water that floods the zones heading and the swim school ground), #66666d (secondary text on light grounds), #f1f2f4 (quiet fills of the ticket card and the party form), #a3a3ab (secondary text on black and navy grounds), #0b1e3a (dusk navy where After Dark begins, darkening to black as it scrolls), #e2e3e7 (hairlines on light grounds), #29292e (hairlines on the black footer)
- Fonts: Reddit Sans (wordmark, headings, body, buttons and capital labels, from weight 400 to 800; display lines run very heavy and tight, and the zones heading is set all lowercase), Kalnia (light weight 300 serif lines such as the tagline and the Fridays line, usually ending in a dash; never used for body text)

Black and white grounds alternate with pool blue and dusk navy bands. The first screen is a full-bleed underwater photo over a giant wordmark strap, followed by a framed photo with floating cards. Rides are four full-height sheets, zones are three rows under a huge lowercase heading, the season band is one long orange strap and swim school is four lanes split by rope lines. Buttons and ticket tabs are pills; the header buttons and form fields are square.

As swimming pool website design goes, this one is loud: heavy type set tight with one lowercase heading, a light serif line ending in a dash, and buttons whose black fill rises like water on hover. Orange is the only warm colour; the photos run from underwater to dusk.

## Sections and motion

- **Navigation** (navigation): top bar: four small black social tags, the Cannonball logo tab (appears after the first section), a Tickets button and a menu button; full-screen menu overlay. Motion: The logo tab stays hidden until you reach the end of the opening, where the wordmark lands on it, and the menu button opens a full-screen overlay at every width that Escape closes.
- **One wristband, unlimited drops.** (opening): two screens: a full-bleed underwater photo with headline, lead, buttons and a serif tagline over a giant orange wordmark strap, then a black screen with a framed photo, a statement and five floating photo cards (four on phones). Motion: On load the photo eases in, the wordmark lifts and the copy rises; tied to scroll, the orange wordmark then shrinks and lands on the header's logo tab while the framed photo settles and five cards rise past the statement at different speeds.
- **The big four** (rides): four full-screen ride sheets that stack as you scroll, each with a photo, name, zone, spec and one line. Motion: Four full-screen sheets stack with CSS sticky, each photo settling from larger to its frame while the sheet it covers shrinks, rounds its corners and darkens.
- **what's in the water** (zones): a huge lowercase heading that pool-blue water rises through, a lead, three zone rows with ride lists and a closing serif line with two links. Motion: Pool-blue water rises through the giant lowercase heading, arriving tilted and settling level, until white letters sit on blue; each zone row rises and its hairline spreads.
- **One band. Every slide, all season.** (wristband): black section: heading and text above one long orange strap holding six perks and three photos that travels sideways while the stage is held. Motion: The stage holds while one long orange strap arrives tilted, levels out and travels sideways past six perks and three photos.
- **After Dark** (after-dark): Friday night session: head with a serif line, text and button beside four hours (19:00 to 22:30), each with a photo, title and sentence. Motion: From 900 px wide the ground darkens from dusk navy to black as each hour's photo drops in over the last and the coming hours light up in turn; below that each photo drops in as it arrives.
- **Pick your band** (passes): one ticket card with a Day ticket / Season band tab switch, price, what is included and two actions beside a tall photo. Motion: The Day ticket and Season band tabs switch by click or arrow keys, and the card rises while its photo settles.
- **Swim school** (swim-school): pool-blue section with heading, lead and a Book a trial button above four swimming lanes, each with a number, photo, class name, ages and sentence. Motion: Each of the four lane blocks swims from the start wall to the far wall at its own pace, and its number circle fills orange when it arrives.
- **Before you jump** (faq): six questions in native details elements beside a lifeguard photo and a Still unsure? block with the desk number. Motion: The questions open and close natively, and the icon's two orange lines close into one by CSS.
- **Forty lifeguards. Eyes on every lane.** (lifeguards): black section: heading and text above four lifeguard portraits with name, role and note; an orange frame walks the row. Motion: An orange frame walks along the four portraits, and each person turns from grey to colour as it reaches them while the name rises.
- **Find the deep end** (visit): Find the deep end: aerial photo, where, when and talk-to-us blocks, and a party booking form. Motion: The heading, address blocks and party form rise as they arrive, and the aerial photo settles.
- **Footer** (footer): black footer: giant orange wordmark, serif line, two link lists, opening hours and legal line

## Good for

- water park or waterslide park
- leisure centre, lido or indoor swimming pool with a swim school
- trampoline park, adventure park or other family attraction with day tickets and a season pass
- any venue with rides or zones, a pass with two prices and evening events

## Questions

**Is this water park template free to use for a client's venue?** Yes. The code is MIT licensed, so a water park, leisure centre or freelancer can use it at no cost. The 29 demo photos keep the Unsplash License and the two fonts the Open Font License, all listed in CREDITS.md. Put your own photography in before launch.

**Do the ticket buttons and the party form work?** Not as shipped. Tickets, Buy online and Book a trial only scroll to the prices or visit section, and the party form posts to # and sends nothing. Point the buttons at your ticket shop and connect Formspree or Netlify Forms, or remove the form.

**Which parts break if I turn it into one of the amusement park website templates for my venue?** Keep the section ids, the data-8b-section, data-8b-motion, data-8b-items and data-8b-part attributes, the classes AGENTS.md lists, the gate script and the inline kit. Rides can grow or shrink; After Dark hours, swim lanes and lifeguards stay at four, and --len needs the new character count. Renaming rides, zones and perks is safe.

**How do I use this water park website template for Claude Code, Cursor or Codex?** Download index.html and AGENTS.md with the curl lines at the start of AGENTS.md, open the folder in the agent and paste the prompt on this page. If you vibe code from scratch, start from the water park website design prompt below. [Claude Code reads the rules](https://8b.com/templates/for-claude-code/) in AGENTS.md.

**Can I get a site like this without editing code?** Yes, in a different way. [8B's AI website builder](https://8b.com/) designs a new site from a sentence describing your park; it will not be this template. Designing and restyling are 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 inside Claude and ChatGPT.

**Does it need GSAP, and what happens in Firefox, with reduced motion or with scripts off?** No libraries: the scenes are CSS scroll-driven animations plus a short inline script. In Firefox today the opening still plays its load-in, but nothing moves with the scroll: rides still stack, the strap wraps into panels. Reduced motion turns the load-in off too. Without JavaScript the menu button does nothing and the Season band tab stays hidden.

## Before publishing

Replace: social preview image, favicon, social media links, email address, phone number and contact form (sends nothing yet), plus the invented demo facts (prices, dates, addresses).

- Tickets button in the nav, Get a wristband button on the first screen, the buy a band link under Zones lead to #passes now; point them to your online ticket shop, or keep #passes if tickets are bought at the gate.
- Plan your visit link on the first screen and the plan the trip link under Zones lead to #visit now; point them to keep #visit, or a page with directions and opening times.
- Book a Friday button in the After Dark section lead to #visit now; point them to your booking page for the evening session.
- Buy online button in the Pick your band card (the same for the Day ticket and Season band tabs) lead to #visit now; point them to your ticket or membership checkout, one link per tab if the shops differ.
- Call the desk link in the Pick your band card, and the phone links in the FAQ and the visit block lead to a tel: link to the placeholder number now; point them to your real desk number.
- Book a trial button in the Swim school section lead to #visit now; point them to your swim school booking page.
- Ask for a date button of the party form in the visit block lead to the form posts to #; nothing receives it now; point them to a form service or your own form handler.
- Scroll-driven animation needs a browser that supports it (Chrome and Edge, recent Safari); a gate script switches the scroll scenes on only then. In Firefox today nothing moves with the scroll (the opening load-in and its two slow loops still play); with reduced motion on, those stop too: the wordmark stays on its strap, the rides still stack as sticky sheets, the strap wraps into a block of panels, After Dark lists four hours with photos, the swimmers sit at the far wall and nothing is revealed on scroll.
- After Dark has CSS timing rules for exactly four hours, and the swim lanes and the lifeguard frame have scroll ranges written for four items; other counts need their scene CSS rewritten. The ride sheets take any count.
- Orange text on black is used for small labels (the After Dark times, lifeguard roles); on white grounds orange appears only as thin lines, never as text, so check contrast if you change the accent or move it onto text.
- Rides stack as full-height sheets with minimum height 560px, and the After Dark stage needs about 640px of height; on very short screens the opening and these stages run taller than the screen.

## License

Code MIT. Photos: Unsplash License (credits in CREDITS.md). Fonts: SIL Open Font License 1.1. Browsers: Chrome and Edge 111+, Safari 16.2+, Firefox 113+ (it uses color-mix(), cascade layers, small/dynamic viewport units).