# Free bowling alley website template

> Free HTML bowling alley website template for bowling centres and party venues with leagues and glow nights. AGENTS.md for Claude Code, or no code with 8B. Made by 8B (https://8b.com/), an AI website builder. Updated October 2026.

Bowling alley website template: one free HTML file for a venue with a kitchen and bar, three leagues, Friday glow nights, a weekly leaderboard and four party packages. The look is loud, with a near-black ground and yellow, orange, lilac and sky-blue panels. AGENTS.md is included, so Claude Code, Cursor or Codex can adapt it.

- Page: https://8b.com/templates/pinfall/
- Live demo: https://8b.com/templates/pinfall/demo.html
- DESIGN.md (design tokens and motion rules): https://8b.com/templates/pinfall/DESIGN.md
- Repository (GitHub template): https://github.com/8bsite/bowling-alley-website-template
- Download ZIP: https://8b.com/templates/pinfall/bowling-alley-website-template.zip
- Template name in the repository: Pinfall Lanes
- At a glance: One 81 KB index.html with its CSS and JavaScript inside, 11 sections, 14 Unsplash photos credited in CREDITS.md, Bricolage Grotesque and Radio Canada Big from Google Fonts, GSAP 3.13.0 (ScrollTrigger); 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/bowling-alley-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/bowling-alley-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/bowling-alley-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/bowling-alley-website-template/main/CREDITS.md
```

Then give the agent this prompt:

```text
Read AGENTS.md, then edit index.html. Make this the site for <my venue: name, lane count and game prices, kitchen and bar hours, league nights and captains, menu with prices, party packages, beginners' hour, address and how guests book>. Replace the venue name, leaderboard, menu and every price first. Keep the ids, the data-8b-section, data-8b-motion and data-8b-part attributes, the classes AGENTS.md lists and the footer wordmark's len value set to the new name's character count. Ask me for missing facts and never invent prices, hours, scores, league names 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/bowling-alley-website-template my-site`.

### Bowling alley website design prompt for any AI tool

Use this to build a bowling alley 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. With the template itself, the short prompt above is enough.

```text
Build a one-page website for a bowling alley with a kitchen and bar, leagues, Friday glow nights, a weekly leaderboard and party packages, for groups choosing an evening out. Sections in order: navigation, facilities tiles for lanes, kitchen and bar, league portraits, lane-side menu, glow night, leaderboard, party packages, beginners' lessons, questions, contact, footer. Type: Bricolage Grotesque in capitals at weight 800 for headings, names, prices and scores with a line height near 0.9, and Radio Canada Big for body text, buttons and labels. Colours: #15130c near-black ground, #ffd23f yellow panels and buttons, #fffdf5 cream text, #b9a2f5 lilac, #8ccbe6 sky blue, #f28a2e orange panels, #c8381f red for hover sweeps. Layout: large rounded colour panels on the dark ground, portrait cards edge to edge, party panels in a sideways row. No purple gradient, no three icon cards, no centred hero with two buttons, no clip-art pins. Motion: one idea, things land oversized and turn flat like a thrown ball; the glow section dims from yellow to black; respect prefers-reduced-motion by turning every animation off. Copy: short and loud, from the venue's real facts. Ask me for lane count, game prices, hours, league nights, menu prices and party packages; never invent them, leave visible placeholders. One primary action, Book a lane, in the header and repeated down the page, jumping to the enquiry form. Mobile: check at 390 px, stack tiles in one column, tap targets of at least 44 px. Acceptance: no console errors, keyboard focus visible, list every placeholder.
```

## About

People searching for bowling alley websites usually need the same pieces, and this page puts them in one scroll: lanes with a price, a lane-side menu, league nights, a Friday glow session, a weekly leaderboard, party packages and a beginners' hour. A bowling club website template buyer can keep the leagues and the leaderboard and cut the rest. Arcades and trampoline parks can reuse the menu and party sections.

Vibe coding this bowling alley website template for Claude Code or Cursor goes fastest when the agent gets the facts only the venue has: lane count, game prices, kitchen and bar hours, league nights, menu prices, party packages and the booking route. The demo invents all of them. It also prints two sets of opening hours that disagree, so make them match. Keep the ids and the data-8b-section, data-8b-motion and data-8b-part attributes.

This is the right base for a venue that sells an evening: lanes, food, drinks, leagues and parties on one loud page. A venue run on weekly skating sessions suits the [weekly-session](https://8b.com/templates/spinway/) template better, and a quiet restaurant wants less motion. The weak spot is booking: every Book a lane button jumps to the form, and there is no lane calendar or payment. Owners who would rather not edit code can try the 8B builder.

## Design

- Palette: #15130c (page ground, header bar, default button fill, text on the yellow and sky-blue panels, and the black the glow section dims to), #ffd23f (menu and questions panels, contact form, top leaderboard row, yellow buttons, footer wordmark and links, the two balls, focus rings), #c8381f (the red sweep that fills buttons on hover, the Book now stamp, the Bar tile word), #fffdf5 (cream text on the dark ground, the league pills and the text of the party price pills, the stamp label), #b9a2f5 (Lanes tile word, Office socials panel, Call tile, the glow heading at night), #8ccbe6 (beginners' hour panel and the Lane takeover party panel), #f28a2e (Kitchen tile word, Kids' parties panel, Email tile, the warm edge of the balls), #8a55e0 (purple colour band over the first portrait and one of the two glow pools), #23a26b (green colour band over the second portrait), #3d7be0 (blue colour band over the third portrait and the second glow pool), #211e15 (surfaces of the three tiles, the leaderboard and the footer panel), #3d3828 (hairline borders of the tiles and the leaderboard)
- Fonts: Bricolage Grotesque (headings, names, prices, ranks and scores, footer wordmark and links, stamp label: only weight 800 at 75% width loads, set in capitals with a line height of about 0.9), Radio Canada Big (body text at weight 400, uppercase lead lines at 500, buttons and small labels at 600, pills at 700)

A fixed header bar with a two-line wordmark, two buttons and a menu icon sits over a near-black page. The first screen pairs a large two-line heading with a lead and button on the right, above three tiles for lanes, kitchen and bar. Portrait cards then run edge to edge, followed by large rounded colour panels, a sideways row of party panels, and a contact mosaic of two coloured tiles, a form and a photo.

This bowling alley website design pairs one condensed face in capitals with a plain body sans. Headings lift out of a clip with a slight tilt, the tile words and the Book now stamp land oversized and press flat, and the questions panel adds two brush scribbles that draw themselves.

## Sections and motion

- **Navigation** (navigation): two-line wordmark, a Gift cards button, a Book a lane button and a menu icon; the menu opens a full-screen overlay with five links. Motion: The bar tightens after 40 px of scroll, slides out of view when you scroll down past 120 px and returns on scroll up.
- **Under one roof** (facilities): big "Under one roof" headline, a lead line with a button, and three tiles for lanes, kitchen and bar. Motion: On load the lead and button lift in, the heading lifts out of a clip with a slight tilt, and each tile word lands oversized and turned before pressing flat.
- **Meet the leagues** (leagues): three league captains as duotone portrait cards with colour washes that sweep through them. Motion: Colour bands slide sideways behind each greyscale portrait as you scroll, one card a beat behind the last, and settle on purple, green and blue.
- **Lane-side kitchen** (menu): a round photo stage where four dish photos roll in one after another, beside the menu in four groups. Motion: The burger photo sits in a sticky round stage, and the fries, shake and cocktail photos roll in over it from the left, turning as they travel, as each later menu group scrolls up.
- **Lights out at nine** (glow): "Lights out at nine": the yellow ground dims to black, the heading turns neon and colour pools fade in. Motion: As the section scrolls in, one value runs the ground from yellow to black, the heading turns lilac with a purple glow, two colour pools fade in and the photo regains its colour.
- **Wall of fame** (leaderboard): wall of fame: the six best games of the week, sorted by sliding rows past each other. Motion: Rows start in the order the games were bowled, given by data-day, then slide past each other into rank order with a small sideways nudge.
- **Throw a party at the lanes** (parties): four party packages as panels that ride in from the right while the section is held. Motion: The section holds the screen while the intro and the four panels move left, then releases; without the scene the panels wrap into a grid.
- **Never bowled? Good.** (lessons): a beginners' hour: a photo, three numbered tips and a booking button. Motion: Only the heading lifts out of a clip on arrival.
- **Before you roll up** (faq): six questions and answers (native <details>) on a panel with two balls and two brush scribbles. Motion: Two yellow balls roll in from opposite edges, turning as they travel, and two brush scribbles draw themselves.
- **Grab a lane** (contact): "Grab a lane" with email and phone tiles, an enquiry form and a photo with the address and opening hours. Motion: The heading lifts out of a clip on arrival.
- **Footer** (footer): the wordmark across the width, a Book now stamp, five links and the credit line. Motion: The wordmark splits into letters that stand up one after another as the footer arrives, and the Book now stamp lands oversized and turns flat.

## Good for

- bowling alley or bowling lounge
- arcade, mini golf, trampoline park or other entertainment venue
- bar and kitchen with games, leagues or party packages
- any venue that wants a loud, colourful look with a menu, events and bookings

## Questions

**Is this free, and what licence does it use?** Yes. Anyone looking for a bowling template free download gets one index.html, a [whole venue on one scroll](https://8b.com/templates/one-page/), under the MIT licence, with no build step. GSAP, ScrollTrigger and Lenis load from jsDelivr, the photos are Unsplash images and the fonts are under the Open Font License. CREDITS.md lists them.

**Does the Book a lane button take bookings?** Not by itself. Every Book a lane button jumps to the enquiry form, which requires a name and an email, shows a thank-you line and sends nothing. Point the buttons at your booking page, or connect the form to Formspree or Netlify Forms with the steps in AGENTS.md.

**Where is the bowling alley website design prompt, and how do I use it?** Below the short prompt sits a longer bowling alley website design prompt for any AI tool. With the template, put index.html and AGENTS.md in an empty folder using its curl lines, and tell the agent to read AGENTS.md first. Give it the files, not the page address. Codex reads [AGENTS.md from the folder](https://8b.com/templates/for-codex/) on its own.

**Which parts break if I change them?** Its colours and type are listed in [a separate token file](https://8b.com/templates/design-md/). Keep every id, the data-8b-section, data-8b-motion and data-8b-part attributes and the classes AGENTS.md lists for each script. Give each leaderboard row its own data-day. Keep the header comment and the 8B meta tag. 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, in a different way. [8B's AI website builder](https://8b.com/) designs a new site from a sentence about your venue, not 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.

**What happens on a phone, with reduced motion or with scripts off?** On a phone the tiles and cards stack in one column, and the party panels still scroll sideways. With reduced motion on, animations and smooth scrolling stop: the glow section stays dark, the kitchen disc shows only the cocktail photo and the header still hides. Without JavaScript the navigation overlay cannot open; the questions still do.

## Before publishing

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

- Book a lane button in the top bar and the opening, and the Book a lane link in the menu overlay lead to #contact (the contact section and form) now; point them to your online lane booking URL, or keep it on the contact form.
- Gift cards button in the top bar lead to #contact now; point them to your gift card shop URL.
- Join a league button in the leagues section lead to #contact now; point them to your league sign-up page, or keep it on the form.
- Plan a party button in the parties section lead to #contact now; point them to your party enquiry or booking page.
- Book a glow lane button in the glow section lead to #contact now; point them to your booking page for Friday glow lanes.
- Book rookie hour button in the beginners' section lead to #contact now; point them to your booking page for the beginners' hour, or keep it on the form.
- The Book now stamp in the footer lead to #contact now; point them to your booking URL.
- Menu items (the lane-side kitchen) lead to text only, no links now; point them to your menu PDF or ordering page, if you want to link one.
- The contact form is a demo and sends nothing; connect it to Formspree, Netlify Forms or your own endpoint.
- The parties section holds the screen for as far as its row of panels overflows the screen width, which feels long on a phone.
- The opening hours in the tiles and in the contact section do not agree (kitchen until 11pm every day against Sunday closing at 10pm); make them match your times.

## 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).
