# Free film festival website template > Free HTML film festival website template with CSS scroll animations and no libraries, for short film festivals. AGENTS.md for Claude Code, or no code with 8B. Made by 8B (https://8b.com/), an AI website builder. Updated November 2026. Film festival website template: one free HTML file with no JavaScript libraries, for a short film festival, cinema season or screening series. A black page shows a film still through the title's second word and holds eight strands, an opening night, a jury, a call for entries, three venues and two passes. AGENTS.md lets Claude Code or Cursor adapt it. - Page: https://8b.com/templates/cut-short/ - Live demo: https://8b.com/templates/cut-short/demo.html - DESIGN.md (design tokens and motion rules): https://8b.com/templates/cut-short/DESIGN.md - Repository (GitHub template): https://github.com/8bsite/film-festival-website-template - Download ZIP: https://8b.com/templates/cut-short/film-festival-website-template.zip - Template name in the repository: Cut Short - At a glance: One 91 KB index.html with its CSS and JavaScript inside, 13 sections, 15 Unsplash photos credited in CREDITS.md, Stack Sans Headline, Stack Sans Notch and Stack Sans Text 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/film-festival-website-template/main/index.html curl -LO https://raw.githubusercontent.com/8bsite/film-festival-website-template/main/AGENTS.md curl -LO https://raw.githubusercontent.com/8bsite/film-festival-website-template/main/LICENSE curl -LO https://raw.githubusercontent.com/8bsite/film-festival-website-template/main/CREDITS.md ``` Then give the agent this prompt: ```text Read AGENTS.md, then edit index.html. Make it the site for . Replace the films, people, prices and photos first; set each big heading's --len to its character count. Keep the head gate script, the motion kit, the data-8b-section, data-8b-motion, data-8b-split and data-8b-items attributes and at most eight strands; add no animation library. Never invent dates, prices, addresses or contacts; ask me. ``` 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/film-festival-website-template my-site`. ### Film festival website design prompt for any AI tool Paste this into Claude Code, Codex, Cursor, Lovable, v0 or Bolt to build a short film festival site from scratch, 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 . Sections in order: opening, manifesto, competition films, strands, opening night, jury, call for entries, venues, questions, passes, contact, footer. Type: Stack Sans Headline for the wordmark, giant uppercase section names and titles, with tight negative tracking; Stack Sans Text for body copy; Stack Sans Notch for uppercase bracketed captions, nav links and buttons. Colours: #000000 ground, #ffffff text and pill buttons, #0f0f0f raised panels, #a8a8a8 captions, #4f4f4f unlit text, #272727 hairline rules, and one accent #ff5b1f for focus, progress bars and button hover. Use no purple gradient, no rounded icon cards and no centred hero with two buttons. Motion: one idea, a film still showing through the letters of the title that grows to the whole screen on scroll. Use CSS scroll-driven animations and a little inline script, no animation library; without support or with reduced motion, show the finished static layout. Copy: short and concrete. Ask me for dates, films, directors, jurors, venue addresses, prices and deadlines; never invent them, and leave a marked placeholder for anything missing. One primary action, Get a festival pass, repeated in the nav, the opening and the opening night. Mobile: check at 390px, tap targets of at least 44px, a full-screen menu. Acceptance: no console errors, visible keyboard focus, and a list of every placeholder left. ``` ## About A short film festival needs a programme, a jury, venues, passes and a call for entries on one scroll, and this page gives a week-long festival of films under twenty minutes all of them. The structure also suits a cinema season, a screening series or an arts festival with a lineup. Anyone planning a film festival website, or a short film website, gets four featured films, eight strands, an opening night, four jurors, three venues and two passes. A film festival website template for Claude Code starts well when you hand the agent the facts only the festival has: name, city, dates, edition, films with directors, runtimes and slots, strands and their days, jurors, venue addresses, prices, concessions and submission deadlines. Vibe coding then means swapping text and stills. Keep the strands to eight at most, because the CSS addresses them by position, and keep four jurors, which the grid is built for. Choose it when the festival sells a short run of days, passes and entries, and the pitch is a dark room. This build is light: the same look and scroll behaviour, no JavaScript libraries and no script from a CDN, about 24 KB gzipped in one file against about 72 KB and four extra requests for the GSAP build. A cinema with a weekly timetable fits the [independent cinema](https://8b.com/templates/halide/) template better. Tickets are email links, with no checkout. ## Design - Palette: #000000 (page ground, the dark behind the title's window word, and the label colour on the white pill buttons and the ember hover fill), #ffffff (text, the title letters, the pill and icon buttons, and the colour the manifesto words end on), #0f0f0f (raised panels: the strands panel, the two ticket bodies and stubs, the contact panel, and the submissions card on the second opening screen), #a8a8a8 (secondary text and bracketed captions, the large strand names, the outline of the Standard and Concession switch, and the small day labels under the strands), #4f4f4f (the unlit manifesto words before they are reached, the slashes between strands and the dashed line above each price), #272727 (one-pixel rules between rows and sections and the track of the progress bars), #ff5b1f (the ember accent: focus outline, the progress bars under each film, step numbers, the dashes in the pass lists, the lit edge of the manifesto words and the hover fill of the white pill buttons) - Fonts: Stack Sans Headline (display face at weights 500 and 600: the wordmark, the giant uppercase section names, statements, film and person titles, and the pass prices, all with tight negative tracking), Stack Sans Text (body face at weights 400 and 500: 16px paragraphs, loglines, answers and the 18 to 21px lead lines), Stack Sans Notch (weight 500 at 12.5px, uppercase with wide tracking: bracketed captions, dates, runtimes, roles, nav links and button labels) A full-width black page of thirteen blocks, where giant uppercase section names are sized by a character count so each fills the content width. A narrow left column carries bracketed captions and the wide column the statements. Films, venues and passes sit in grids with 8px-cornered stills, near-black panels hold the strands, tickets and contact, and one-pixel grey rules divide rows. Ember orange is the only saturated colour: it shows as the focus ring, the thin bars under each film, step numbers, list dashes and the hover fill of the white buttons, and as the lit edge that crosses the manifesto words. Small facts sit in bracketed uppercase captions. ## Sections and motion - **Navigation** (navigation): fixed top bar: wordmark, five section links, Get a pass button; hides on scroll down; full-screen phone menu. Motion: The bar gets a dark fill after 40px of scroll, slides away on a scroll down after 120px and returns on a scroll up. - **Cut Short** (opening): two screens: the festival name with a film still showing through the second word, an info row and a pass button; then the still full screen with a statement and a submissions card. Motion: On load Cut slides in from the left, the Short window opens from a slit and the info row rises in turn; scrolling on, the window grows from the word to the whole screen, the letters swell and dissolve, and the same still becomes the second screen. - **Manifesto** (manifesto): a two-sentence statement lit word by word, a portrait and two short paragraphs signed by the festival director. Motion: The statement starts in dim grey and an ember edge passes through it word by word, leaving each word white, and back again on a scroll up. - **In competition** (selection): four featured competition films, each with runtime, director, logline, screening slot and a still (demo: Last Orders at the Lucky Star, Whiteout, Hold Your Breath, The Long Way from Fintry). Motion: As each film row passes, its still opens from a letterbox slit to a rounded frame while the picture settles from a zoom, and the orange bar fills across the credits. - **Strands** (strands): a panel with the eight programme strands as large names with their days in brackets. Motion: Each strand name splits into an upper and a lower half that start offset in opposite directions and slide into one line as the row reaches the middle of the screen. - **Opening Night** (premiere): opening night as a pinned screen: a small pill of a still widens to the full frame while the words Opening and Night travel to the edges, then the film's details. Motion: The section holds for about one screen of scroll while a pill of a still widens to the full frame and the words Opening and Night travel to its edges, then the film details rise in. - **The jury** (jury): four jurors as portraits with name, role and city, and a quote each; portraits develop from negative to positive. Motion: Each portrait starts as an inverted greyscale negative and turns to colour in turn as the row crosses the screen. - **Made something under twenty minutes? Send it to us.** (submit): call for entries: statement, rules, a Submit button, a photo and three numbered steps with dates. Motion: The heading is cut in, the photo opens from a slit and each step's rule draws itself from the left, once as they arrive. - **Venues** (venues): three cinemas as panels with photo, name, address and what plays there; a pinned row that slides sideways (demo: The Grand Hall, The Dome, Trongate Night Cinema). Motion: The section holds while the row of three venue panels slides sideways, and each photo drifts against the sliding panel. - **Questions** (faq): five questions in native details elements. Motion: The heading is cut in and each question's upper rule draws itself once. - **Passes** (passes): two ticket cards (Festival pass, Day ticket) with a Standard and Concession price switch. Motion: Each price stub starts dropped and turned and joins its ticket as the card rises into view; the switch changes the shown price. - **Write to us** (contact): a panel with four contact lines: tickets, submissions, press and partners, office (all placeholders). Motion: The panel opens from a slit and the heading is cut in, once. - **Footer** (footer): wordmark across the width, a closing line with the main email, footer links, social links and the copyright line. Motion: The wordmark opens from a slit and each footer link's rule draws itself, once. ## Good for - short film festival or film season - independent cinema or screening series - arts festival or conference with a programme, venues and ticket passes - any event with a lineup, a jury or speakers, and a call for entries ## Questions **Is this free film festival website template fine for a client's festival?** Yes. It is one index.html under the MIT licence, with no build step and no CMS. The fonts come from Google Fonts under the Open Font License, and the demo photos are Unsplash images listed in CREDITS.md. Swap them for the festival's own stills before launch. **Can a website for short films like this sell tickets or take submissions?** Not as shipped. The two buy buttons and the Submit a film button open emails, and there is no form, cart or payment. Point them at your ticket shop and your submissions platform, such as FilmFreeway, or keep the mailto links for a small festival. **How do I give it to Claude Code, Cursor or Codex?** Download index.html and AGENTS.md into an empty folder using the curl lines in AGENTS.md, open it in the agent and paste the prompt on this page. Without the file, start from the film festival website design prompt below and let the agent build it from scratch. **Does it need GSAP, and what must I keep when I edit it?** No library at all. Scroll motion is CSS scroll-driven animations plus a short inline script. Keep the gate script in the head, the inline motion kit, the data-8b-section, data-8b-motion, data-8b-split and data-8b-items attributes and at most eight strands, and reset each big heading's --len number when its text changes. **Can I get a festival site like this without editing code?** Yes. [8B's AI website builder](https://8b.com/) designs a new site from a sentence about your festival, in its own design rather than this template. Designing and restyling are free; publishing with hosting, 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 work on phones, in every browser and with reduced motion?** Yes. Below 900px the links fold into a full-screen menu. Without scroll-driven animation support, Firefox today, you get the finished layout and ordinary scrolling, with only the title's load-in and the still's slow drift; reduced motion drops those too. Without JavaScript the menu button and price switch stop working, standard prices stay and the FAQ still opens. ## Before publishing Replace: social preview image, favicon, email address, phone number and social media links, plus the invented demo facts (prices, dates, addresses). - Get a pass button in the nav and Get a festival pass button on the first screen, Book opening night in the opening night section lead to #passes now; point them to your ticket shop or booking page, or keep #passes once the buy buttons are connected. - Submit a film button in the submissions section lead to a mailto link to the submissions address with the subject "Film submission" now; point them to your submissions platform (FilmFreeway, Eventive or a form) or keep the mailto. - Buy a festival pass and Buy a day ticket buttons in the passes section lead to mailto links to the box office address with the subjects "Festival pass" and "Day ticket" now; point them to the checkout or ticket page of each pass. - Instagram, Letterboxd and Vimeo links in the footer lead to the home pages of those sites now; point them to the festival's own profiles. - Scroll-driven animations need a browser that supports animation-timeline (Chrome, Edge and Safari today; Firefox does not yet). Elsewhere the scroll scenes, the entrance effects and the smooth wheel stay off and the page is the finished static layout; only the title's load-in and the still's slow drift play. With reduced motion those stop too, while the nav's hide on scroll and the hover fills keep running. - The bracketed captions (12.5 px) and the strand days (11 px) are grey #a8a8a8 on black, about 9:1 contrast; keep any replacement grey at least that light. - The opening and the opening night screens are held for about one screen of scrolling each, and the venues row for the width of its panels; on very short screens the sticky stages may crop the text, and the first screen is built for at least 560 px of height. ## 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).