Free trampoline park website template

Live demo GitHub Download ZIP Use this template

Repository: github.com/8bsite/trampoline-park-website-template · Live demo: 8bsite.github.io/trampoline-park-website-template/ · MIT license

About this template

Hopla is a trampoline park website template for an indoor venue that sells sessions, passes and birthday parties. The demo is a Sheffield steel shed with zones, a timetable, parties, a café, a league table and prices; it also suits a soft play centre or a ninja park.

A one-page site for an indoor trampoline park with zones, sessions, birthday parties, a café, a league table, prices and booking. Cream, red and yellow fields with wobbly trampoline-bed edges and big condensed type; the page bounces as you scroll: a jumper is launched off the first screen, photo discs hop down the zone list and a red ball hops along the party route.

Good for:

Trampoline park or bounce centreIndoor play centre or soft playClimbing, ninja or adventure parkKids' party venueAny family leisure venue with sessions, passes and bookings

Free for personal and client work under the MIT license. In collections: one page website templates, github website templates, website templates with animation.

How to use the trampoline park website template

With an AI coding agent

Download the files into your project (Windows PowerShell: curl.exe):

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

Then give the agent this prompt:

Read AGENTS.md, then edit index.html. Use this template as the base for a site for <your venue: what it is (trampoline park, play centre, climbing or adventure park), city and address, activities or zones, sessions and opening hours, prices, parties, how to book>. Keep the layout, the motion and the single-file format; replace the brand name, copy, photos, prices, hours, links and contacts, and recolour it through the CSS variables if needed.

Give the agent the file, not a link. AGENTS.md says what to keep and what to replace. Step by step: templates for Claude Code.

In a terminal

npx degit 8bsite/trampoline-park-website-template my-site

No code

Download the ZIP, edit index.html and drag its folder onto Netlify Drop, or click Use this template and turn on GitHub Pages.

Trampoline park website design and motion

Palette

#f5e3cd cream page background#e2130f red headings, buttons and red bands#1b1b1b text and the dark league band#ffd750 yellow stickers and yellow bands#f4a804 amber party route and timetable shade#ffffff white outlines on headings and photo frames

Fonts

Bricolage Grotesque: headings and buttons: condensed, extra bold, uppercase, outlined in white
Playpen Sans: wordmark and stickers: rounded and hand-drawn
Rethink Sans: body text, times and labels

Each band opens with a wavy edge like a slack trampoline bed and switches colour: cream, red, yellow, black. Headings are huge and outlined in white. Photos sit in round discs or tilted white frames, sessions and passes are cut like tickets with dashed tear lines, and pill stickers sit at an angle.

Motion runs on scroll; the list of sections below says what moves in each.

What is on the page

Navigation
Fixed top bar: wordmark, Book button, Menu button opening a full-screen link overlay with contacts
Bounce at Hopla, the trampoline park in Sheffield
First screen: one giant word with a photo of a jumper in front, wordmark, two stickers, two short texts; then a red panel with heading, button and three tilted photos
Smooth scrolling throughout; wavy edges wobble and stickers slap on page-wide. As the red panel rises over the held first screen, the jumper lands on its edge, which sags and flings them off spinning.
One roof, six ways off the ground
List of six activity zones in a zig-zag: big name, one line, age sticker, round photo (demo: trampoline zones)
Tied to scroll, each round photo hops along an arc from the zone above and squashes as it lands.
The best bit is the middle
Full-width photo with a two-line statement held on screen while you scroll
The photo stays pinned and zooms out while the two heading lines rise at different speeds, tied to scroll.
One shed, five crowds
Timetable of five sessions as tickets: time, name, text, ages, photo (ground turns from morning yellow to night)
As you scroll the timetable, the ground shifts from morning yellow through amber and red to night black, and the Glow Night ticket lights up.
Birthday parties, sorted
Birthday parties: heading, text, price line, button, and a five-step route with numbered tilted photos
Tied to scroll, a red ball hops along the dashed route from photo to photo, drawing a trail; each photo bumps as it lands.
The Landing
On-site café: wide photo, round coffee photo, sticker, text, short price list
Ninja Wall League
Ranking table of six results on a dark field, with heading, text, entry link and photo (demo: ninja wall times)
Rows start in last Sunday's order and slide into this week's ranking as you scroll the table into view.
House rules, short version
Red wall of five tilted rule stickers and one photo (house rules)
Pick a pass
Five ticket-shaped passes with name, price and one line, plus two buttons
The five passes start fanned in a stack like a hand of cards and deal out into a row as you scroll.
Asked a lot
Questions and answers (native <details>) next to a heading and a phone line
A big red question mark hops down the list from question to question as you scroll, squashing on each.
Come and jump
Address, opening hours, phone, email, directions and a booking request form (placeholders)
Footer
Links, address and phone, copyright with the Design: 8B credit, a giant outlined HOPLA wordmark with three round photos
The giant outlined HOPLA drops in letter by letter, squashing on landing, while three round photos bounce into place.

What is inside

Files: index.html (126 KB, CSS and JavaScript inside), AGENTS.md, CREDITS.md, LICENSE
Motion: GSAP 3.13.0 (ScrollTrigger, SplitText, MotionPath); Lenis 1.3.27 smooth scroll, loaded from jsDelivr. With reduced motion on, the page shows a complete static version.
Fonts: Bricolage Grotesque, Playpen Sans and Rethink Sans from Google Fonts (SIL Open Font License)
Photos: 28 from Unsplash (Unsplash License), loaded from Unsplash's servers and each credited in CREDITS.md
Browsers: Chrome and Edge 111+, Safari 16.2+, Firefox 113+ (it uses color-mix(), cascade layers, small/dynamic viewport units).
Replace before publishing: Social preview image, favicon, phone number, email address and contact form (sends nothing yet), plus the invented demo facts (prices, dates, addresses). AGENTS.md lists them.
License: MIT

Good to know

One page, no CMS: texts and prices are edited in the HTML, and there is no checkout or payment built in.
Book (nav), Book a jump (first screen and prices) lead to #contact now; point them to your online booking page.
Book a party (parties) lead to #contact now; point them to your party booking page or enquiry form.
Enter this month's league (league) lead to #contact now; point them to your league entry form, or remove the link.
The form sends nothing until you connect a form service such as Formspree or Netlify Forms, or your backend.
Without motion (reduce motion or no JavaScript) the sessions section stays on the yellow morning ground; with motion it ends on the night ground. Both are complete and readable.
The footer wordmark stays split into letters (SplitText) after it lands; this is invisible but shows in the DOM.
The league note under the table describes the animation ("Rows start in last Sunday's order…"); edit or remove it with the rows.
The demo facts are invented. Photos load from Unsplash, the motion libraries from jsDelivr.

Questions about this trampoline park website template

Does the booking form send requests?

Not yet. It asks for name, email, date, number of jumpers and session and shows a thank-you, but sends nothing until you connect a form service such as Formspree or Netlify Forms.

How do I change session times and prices?

They are plain HTML text: each session ticket has a time, name, one line and an age group, and each pass a name, price and line. Edit them in index.html.