Free movie theater website template
Edit it by hand: it is one index.html with no build step, so you can open it in any text editor, change the words and photos, and upload it to any static host. Not a coder? Describe your business in one sentence to 8B's AI website builder and it designs a new site for you, with more pages when you need them. Designing is free; publishing with hosting is $9 a month, billed yearly. It also works inside Claude and ChatGPT.
MIT license · Made by 8B, an AI website builder · Plain text: halide.md, data: halide.json
About this movie theater website template
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.
At a glance, October 2026. 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.
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, 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 network or audio collective is better served by a template built around shows.
Good for:
Turn the movie theater website template into your site with an AI agent
With an AI coding agent
Files (PowerShell: curl.exe):
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.mdPrompt for the agent:
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.In a terminal
npx degit 8bsite/movie-theater-website-template my-siteMovie 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.
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.Movie theater website design and motion
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 brightensFonts
- 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.
Every value of this movie theater website design, with the type scale, spacing and the motion rules, is in its DESIGN.md file (Google's format), ready for a coding agent or Stitch.
What is on the movie theater website page
- NavigationFixed rounded white bar: wordmark, three links, Book tickets button; hides on scroll down; phone menu overlay
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 FlatOne screen: tonight's film title with three pills, a wide photo window, door and show times, credits, ticket price and Book a seat button
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"This week at Halide": a sticky photo screen beside six day tiles with times, titles and screen notes
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"Still on film": text about 35mm projection beside a film gate that steps four captioned frames between running sprocket columns
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"Two rooms, one booth": two photo windows turned in perspective with a description and a row of facts each
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"Picked by people": two programmer tiles and six note tiles, each a film with a line from one programmer
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"The bar opens an hour early": two tilted bar photos and a five-line menu with sizes and prices
Both bar photos turn from a steep angle to their resting tilt, and the five menu rows rise one after another.
- Become a member"Become a member": one ticket with a benefits sheet of five points and a stub with the price that tears off along a perforation
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"Every month, whatever is on": four panels on a horizontal track, each with a tilted photo, title, when and a paragraph
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"Before you come": six questions as native details elements beside a heading tile with the email
The six question tiles rise one after another the first time the list comes into view.
- Lights up. Come and visit."Lights up. Come and visit.": night photo, address, opening hours, contacts and a message form; the section brightens from dark to white
The section brightens from near-black to white as it arrives, the heading turns dark and the photo window turns square on.
- FooterDark footer: six links, address and phone, a pill row of Instagram, Letterboxd, YouTube and Newsletter, a wide wordmark, copyright with the Design: 8B credit
Before you publish the movie theater website site
- Replace social preview image, favicon, email address, map, phone number, contact form (sends nothing yet) and social media links and the invented demo facts (prices, dates, addresses). AGENTS.md lists them.
- Book tickets buttons in the nav and the phone menu, and the Book a seat button on the first screen lead to
#programmenow; point them to your ticketing page or booking widget. - Every film time link in the six-day programme lead to
#visitnow; point them to the booking page for that screening (one link per showing). - Join Halide button in the membership ticket lead to
#visitnow; point them to your membership sign-up page. - Open the map link in the visit section lead to
an OpenStreetMap search for Leith Edinburghnow; 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 yetnow; 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.
Questions about this movie theater website template
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, 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.
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 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.
