# Free movie theater website template

> Free HTML movie theater website template for independent cinemas and film clubs, with a weekly programme. AGENTS.md for Claude Code, or no code with 8B. Made by 8B (https://8b.com/), an AI website builder. Updated October 2026.

Movie theater website template: one free HTML file for an independent cinema, film club or small screening venue that runs a weekly programme, a bar and a membership. It has a near-black page with white, mint and lavender tiles, film-edge perforation strips and photo windows turned in perspective. AGENTS.md is included, so Claude Code, Cursor or Codex can adapt it.

- Page: https://8b.com/templates/halide/
- Live demo: https://8b.com/templates/halide/demo.html
- DESIGN.md (design tokens and motion rules): https://8b.com/templates/halide/DESIGN.md
- Repository (GitHub template): https://github.com/8bsite/movie-theater-website-template
- Download ZIP: https://8b.com/templates/halide/movie-theater-website-template.zip
- Template name in the repository: Halide
- At a glance: One 101 KB index.html with its CSS and JavaScript inside, 12 sections, 22 Unsplash photos credited in CREDITS.md, Host Grotesk and TikTok Sans from Google Fonts, GSAP 3.13.0 (ScrollTrigger); Lenis 1.3.4 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/movie-theater-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/movie-theater-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/movie-theater-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/movie-theater-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 cinema or club: name, screens and seat counts, this week's films with times, ticket and member prices, membership terms, bar menu and hours, programmers, address, ticketing link>. Replace the films, showings, prices and photos first. Keep the section ids, the classes AGENTS.md lists and one still per programme day, and set the footer wordmark's len to the new name's character count. Ask for missing facts; never invent showtimes, prices, ratings, reviews 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/movie-theater-website-template my-site`.

### Movie theater website design prompt for any AI tool

Use this to build an independent cinema site from scratch in Claude Code, Codex, Cursor, Lovable, v0 or Bolt, or to 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 an independent cinema or film club with a weekly programme, a bar and a membership. Audience: locals choosing tonight's film and members. Sections in order: navigation, opening screen with tonight's film, a six-day programme beside a photo screen, a film gate section stepping through four frames, rooms, programmers' picks, bar menu, membership ticket, seasons, questions, visit form, footer. Type: TikTok Sans in its expanded width at 500 and 600 for headings, tile titles and the wordmark; Host Grotesk for body text and button labels. Colours: near-black #121214 page ground, white #ffffff nav bar and tiles, lavender #b8a4f7 for buttons and the membership stub, mint #8cf2e6 for marker tiles, #222226 for film-edge strips, grey #a9a9b3 secondary text on dark. Layout: rounded tiles with 22px corners, pill tags, photos in windows turned in perspective, rows of punched holes like film edges; photos greyscale, colour only on tiles and buttons; no purple gradient, no three icon cards, no centred hero with two buttons, no shadows. Motion idea: a film gate with a dark shutter flash while the page is held, and a membership stub pulled off along a perforation, with GSAP and ScrollTrigger; switch it all off under prefers-reduced-motion. Ask me for film titles, showtimes, ticket and member prices, bar menu, address and hours; never invent them, and list every placeholder. One primary action, Book tickets, repeated in the navigation, the opening and the membership. On phones use a menu button with an overlay and large tap targets. Check: no console errors, works at 390 px, visible keyboard focus.
```

## About

The model is a two-screen arthouse cinema, but the structure also fits a film society, a pop-up screening series, or a small theatre or arts centre with a timetable and a members' scheme. Anyone looking for a movie theatre website template or a cinema website template gets tonight's film, a six-day programme with 14 showings, a 35mm section, two rooms, programmers' picks, a bar menu, a membership ticket and a visit form.

A movie theater website template for Claude Code, Cursor or Codex goes fastest, as in any [agent-led build](https://8b.com/templates/vibe-coding/), when you supply the facts only the venue has: film titles and times, screen sizes, ticket and member prices, the bar menu and hours. The demo invents all of it, including the 12A rating, the Leith address and both programmers. Point each of the 14 showing links at its booking page. Keep one still per programme day, because the script pairs days and stills by position.

Choose it when the content is a changing timetable plus a few steady offers, and you want a dark, film-edge look. The weak spot is the timetable: six day tiles edited by hand each week, with no listing feed, no seat map and no payment. A cinema that sells seats online should link out to a ticketing service. A [podcast](https://8b.com/templates/gabble/) network or audio collective is better served by a template built around shows.

## Design

- Palette: #121214 (page ground, text on white, mint and lavender tiles, label on the lavender buttons, the phone menu ground and the shutter flash over the booth frames), #ffffff (nav bar, white tiles and question tiles, text on the dark ground, the visit section once it has brightened, the lit programme day), #b8a4f7 (main buttons, lavender tiles (the Book a seat tile, the second programmer, the membership stub, the visit form, one season panel), focus outline, hover tint on programme rows, the open-question marker), #8cf2e6 (mint tiles: the doors tile on the first screen, the first programmer, the questions heading tile and one season panel), #222226 (the film gate frame in the booth, the perforation strips in the rooms section and the footer, the background behind photos while they load), #a9a9b3 (secondary text on the dark ground: section intro lines, room descriptions, programme notes, bar note, footer address, text inside the dark visit tiles), #55555e (secondary text on white, mint and lavender tiles: first-screen captions, question answers, the visit intro line after it brightens)
- Fonts: TikTok Sans (display face at weights 500 and 600 in its expanded width: section headings and the film title (32 to 70px, tight tracking), tile titles, uppercase tracked pills, the nav wordmark, the large membership price and the footer wordmark), Host Grotesk (body face for the page: regular 16 to 17px text, medium-weight intro lines and 14px captions, semibold button labels)

A fluid full-width page on a near-black ground, with a rounded white bar floating above it. Content sits in rounded tiles (white, mint, lavender or outlined dark) with 22px corners (30px on the first photo and the booth gate) and pill-shaped tags. Photos sit in windows turned in perspective. Rows and columns of punched holes like film edges divide the rooms section and the footer and run beside the booth gate and the ticket. Headings are in an expanded face.

This cinema website design rations colour: lavender fills the main buttons and the membership stub, and mint marks the doors tile and the first programmer. The CSS turns every photo greyscale, so colour images match the demo. The visit section brightens from near-black to white as it arrives.

## Sections and motion

- **Navigation** (navigation): fixed rounded white bar: wordmark, three links, Book tickets button; hides on scroll down; phone menu overlay. Motion: Smooth scrolling runs page-wide, and the nav bar slides up and away on a scroll down after the first 140px and returns on any scroll up.
- **Waltz for an Empty Flat** (opening): one screen: tonight's film title with three pills, a wide photo window, door and show times, credits, ticket price and Book a seat button. Motion: On load the heading block rises, the photo window opens from a smaller size and the three tiles rise one after another.
- **This week at Halide** (programme): "This week at Halide": a sticky photo screen beside six day tiles with times, titles and screen notes. Motion: The photo screen stays beside the list while each day tile turns white as it reaches the reading line and the screen wipes in that day's still from the right edge with a small swing.
- **Still on film** (booth): "Still on film": text about 35mm projection beside a film gate that steps four captioned frames between running sprocket columns. Motion: The section holds for about two screens of scroll while the gate steps through four frames in three moves, with a dark shutter flash and jumping sprocket columns at each move.
- **Two rooms, one booth** (rooms): "Two rooms, one booth": two photo windows turned in perspective with a description and a row of facts each. Motion: The perforation divider slides sideways as it rises, each room photo turns from a steep angle to its resting tilt, and the fact pills rise one after another.
- **Picked by people** (picks): "Picked by people": two programmer tiles and six note tiles, each a film with a line from one programmer. Motion: Six note tiles start as one tilted pile and are dealt into the grid as you scroll, each straightening as it lands.
- **The bar opens an hour early** (bar): "The bar opens an hour early": two tilted bar photos and a five-line menu with sizes and prices. Motion: Both bar photos turn from a steep angle to their resting tilt, and the five menu rows rise one after another.
- **Become a member** (membership): "Become a member": one ticket with a benefits sheet of five points and a stub with the price that tears off along a perforation. Motion: The price stub starts joined to the sheet and is pulled away along the perforation, swinging to rest sideways on wide screens and downward on phones.
- **Every month, whatever is on** (seasons): "Every month, whatever is on": four panels on a horizontal track, each with a tilted photo, title, when and a paragraph. Motion: The section holds while the four panels slide sideways, about two and a half screens of scroll at 1440 by 900 and a little over one on a phone, and each photo turns from a steep angle to its resting tilt as its panel arrives.
- **Before you come** (faq): "Before you come": six questions as native details elements beside a heading tile with the email. Motion: The six question tiles rise one after another the first time the list comes into view.
- **Lights up. Come and visit.** (visit): "Lights up. Come and visit.": night photo, address, opening hours, contacts and a message form; the section brightens from dark to white. Motion: The section brightens from near-black to white as it arrives, the heading turns dark and the photo window turns square on.
- **Footer** (footer): dark footer: six links, address and phone, a pill row of Instagram, Letterboxd, YouTube and Newsletter, a wide wordmark, copyright with the Design: 8B credit

## Good for

- independent or arthouse cinema
- film club, film society or pop-up screening series
- theatre, small music venue or arts centre with a programme and a bar
- any venue with a weekly timetable and a members' scheme, by look

## Questions

**Is this one of the free movie theater website templates, and can I reuse it for a client's cinema?** Yes. It is [a cinema site on one page](https://8b.com/templates/one-page/), a single index.html under the MIT license, with no build step and no CMS. GSAP, ScrollTrigger and Lenis load from jsDelivr, the fonts come from Google Fonts under the Open Font License, and the 22 Unsplash photos are credited in CREDITS.md.

**Is it a cinema booking website template that sells tickets?** No. Nothing checks seats or takes payment. The Book tickets and Book a seat buttons scroll to the programme and the 14 showing links scroll to the visit section until you point them at your ticketing page. The visit form shows a thank-you line and sends nothing until you connect Formspree or Netlify Forms.

**What is the movie theater website design prompt, and how do I use it with Claude Code or Cursor?** Put index.html and AGENTS.md in an empty project folder with the curl lines, tell the agent to read AGENTS.md first and paste the short prompt above. If you vibe code from scratch in Codex, Lovable or Bolt, paste the movie theater website design prompt below instead. v0 can open this template's files [with a single button](https://8b.com/templates/for-v0/).

**What must I keep when I change the programme?** Keep the section ids, the data-8b-section, data-8b-motion and data-8b-part attributes and the classes AGENTS.md lists. Give each programme day its own still, in order. 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, in another form. [8B's AI website builder](https://8b.com/) designs a new site from a sentence about your cinema, in its own design rather than 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 in Claude and ChatGPT.

**What happens on a phone, with reduced motion or without JavaScript?** On a phone the nav links give way to a menu button with a five-link overlay, and the programme photo becomes a short band pinned above the days. With reduced motion, entrance and scroll animations and smooth scrolling are off. Without JavaScript the menu cannot open, but the Book tickets button, the six footer links and the questions work.

## Before publishing

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

- Book tickets buttons in the nav and the phone menu, and the Book a seat button on the first screen lead to #programme now; point them to your ticketing page or booking widget.
- Every film time link in the six-day programme lead to #visit now; point them to the booking page for that screening (one link per showing).
- Join Halide button in the membership ticket lead to #visit now; point them to your membership sign-up page.
- Open the map link in the visit section lead to an OpenStreetMap search for Leith Edinburgh now; point them to a map link to your venue.
- Newsletter link in the footer pill row, and the Send me the monthly programme checkbox in the form lead to #visit (the link); the checkbox is sent with the form, which sends nothing yet now; point them to your mailing-list sign-up page, and a form service for the checkbox.
- The nav hide-on-scroll and the hover effects keep running with reduced motion; the GSAP scenes, the entrance animations and smooth scrolling are switched off.
- The CSS turns every photo greyscale (filter: grayscale(1)), so colour photos also show in black and white; remove the filter to show colour. The booth captions sit on white plates, so they stay readable over any photo.

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