Event website template: a one-page site for a festival, concert or fan event, with a day schedule, a lineup, venue zones, a food board and three ticket passes. The look is crimson, red, near-black and white slides under huge capitals. Its scroll motion runs on CSS with no JavaScript libraries, in one free file of about 41 KB gzipped with an AGENTS.md, so Claude Code or Cursor can adapt it to your event.
Live demo · Use this template · Download ZIP · Template page on 8b.com
Scroll animation
Download the four files into your project folder (curl.exe in Windows PowerShell):
curl -LO https://raw.githubusercontent.com/8bsite/event-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/event-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/event-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/event-website-template/main/CREDITS.mdThen fill in the angle brackets and give your agent this prompt:
Read AGENTS.md, then edit index.html. Turn this into the site for <my event: name, dates, venue and address, lineup with days, stages and set times, schedule, areas, ticket types, prices and shop link, contacts>. Replace first the event name, dates, venue, act names and pass prices. Keep the section ids, the classes AGENTS.md lists, each --len number equal to its text length, nine schedule rings, four zones and three passes. Motion is CSS scroll-driven animation plus the inline kit: keep the gate script and the data-8b-section, data-8b-motion and data-8b-items attributes; add no animation library. Ask me for missing facts; never invent prices, times, addresses, visitor numbers, sponsors or contacts.
As an event website template for Claude Code, Cursor or Codex, it asks a vibe coding agent to replace the event name, dates, venue, act names with their days, stages and times, and the three pass prices first. It should then ask for what only the organiser knows: the ticket shop address, refund rules, capacity, visitor figures and sponsor details, and never invent them. Each display line has a --len number that must equal its character count, spaces included. The day schedule is built for nine rings, three rows of three on narrow screens, each with a matching hole in the opening's crimson veil, so change the times and labels, not the count. Act rows can be added or removed.
No agent? Click Use this template, edit index.html on GitHub and turn on Settings > Pages.
- Navigation: top bar: wordmark, section links, Tickets button; phone menu overlay with dates and venue.
- Heat of Seoul: two-screen opening: a full-bleed photo under a huge title, then nine round windows onto it with the day's schedule. On load the photo settles and drifts while the title lifts in; scrolling, the photo zooms and the title splits apart, then a crimson veil closes into nine round schedule windows, and a mouse wheel scrolls smoothly throughout.
- On the bill: the bill: five act names set full width, each with a round portrait and day, stage and time. Several headings warm from dim to white as they arrive. Each portrait swells mid-screen as its name glides sideways and heats up.
- Crew battle: split screen: two sides with a moving VS line (demo: a dance crew battle). The split screen holds in place while the VS line sweeps to one side, then the other, then back to centre as each crew's name grows and the rounds light up.
- One hall, four heats: venue plan with four round zone windows and a description of each. The round venue plan holds still and zooms onto each zone as its text scrolls past, the others dimming.
- Idol looks: sideways track of three items, each a tall photo with times, name, text and three steps (demo: make-up looks). The white slide holds in place and its track moves sideways; each look's photo opens from a small circle.
- Food street: menu board with prices, names in two languages, two photos. On arrival, the round stall photo spins in and the menu rows fade up as their rules draw across.
- Who fills the hall: for sponsors: audience in four columns with bars sized by share, a portrait and a deck button. Tied to scroll, the portrait rises into place and the four audience bars grow up one after another, while the creator avatars spin in.
- The photo wall: photo wall: eight photos, rectangles and circles, red-tinted. Each red-tinted photo flashes its true colours as it crosses mid-screen, the columns slightly out of step.
- Passes: three ticket tiers as wristband passes with prices and buttons. On wide screens the three passes start bunched and fanned like a hand of cards, then spread into a row; on phones each pass slides in from a slight tilt.
- Before you come: questions and answers (native <details>) with a contact e-mail.
- See you on the river: contact block framed by rings: e-mail, venue address, travel, phone, press e-mail. Tied to scroll, four rings widen one after another behind the contact details while the heading heats up.
- Footer: width-filling ONDO 온도 wordmark, links, copyright and the Design: 8B credit.
Asta Sans: the only family: huge tight uppercase headings, text and Hangul (Google Fonts). Sections are slides inset by a thin crimson margin, switching between near-black, crimson, red and white. Section headings are huge, tight capitals, most of them filled with a gradient; many photos are greyscale or tinted red. Circles recur: schedule rings, round portraits, a round venue plan, round crops and rings around the contact.
Can visitors buy passes or register on the page?
No. There is no form and no checkout. The three Choose buttons scroll to the contact block and Tickets and Get tickets scroll to the passes, so point them at your ticket shop. Enter your crew and Request the partner deck open email drafts to demo addresses: swap in a sign-up link or a real mailbox. A form you add later needs a service such as Formspree or Netlify Forms.
Is there a live event website example I can look at first?
Yes. The live demo is a complete example: a two-day K-culture festival in Rotterdam. Every date, act, price and contact in it is invented. The same file sits in the GitHub repository, where Use this template makes you a copy.
What in the demo is invented and must be replaced?
All of it. Dates, venue, address, tram lines, act names, set times, prices, entry and refund rules, visitor figures, email addresses and the phone number are made up, and AGENTS.md lists them. The photo wall is static and nothing collects tagged photos, so reword that paragraph and its caption, or connect a feed.
The right base is an event that runs a day or a weekend with several things happening at once: a lineup, a timetable, venue areas and ticket tiers. A single show needs a simpler event page template, and a venue selling timed passes, such as a trampoline park, a booking template. This light build keeps the look and the scroll motion with no script from a CDN: about 41 KB of code gzipped in one file, against 86 KB and three extra requests for the GSAP version. The weak spot is selling: the pass buttons only scroll to the contact block until you point them at your ticket shop.
- Replace what is marked
data-8b-placeholder(social preview image, favicon, email, phone, social) and the invented demo facts; AGENTS.md lists them.
No JavaScript libraries: CSS scroll-driven animations and a small inline motion script with its own smooth wheel scrolling, 169 KB, no build step. Chrome and Edge 111+, Safari 16.2+, Firefox 121+ (it uses color-mix(), container query units, :has(), cascade layers, small/dynamic viewport units). Without scroll-driven animations (Firefox today) the scroll motion and the smooth wheel are off and each section shows its finished layout, while any load-in or looping animation still plays; with "reduce motion" on, the page is complete and nothing moves on its own (hover effects stay).
A GSAP build of the same page is index.gsap.html: GSAP 3.13.0, ScrollTrigger, Lenis 1.3.27 from jsDelivr, 154 KB; its scroll motion also plays in Firefox. Use one of the two files.
MIT, see LICENSE. Photos, fonts and libraries keep their own licences: CREDITS.md. More free templates: 8b.com/templates · github.com/8bsite.