Theatre Venue Template Template
A complete repertory theatre site with an oxblood playbill identity and a production selector whose stage curtains close, change the show at full cover, then open into a settling house-light glow.
About This Template
A complete one-page site for House Lights, a fictional independent repertory theatre in Sheffield. Oxblood, deep-stage red-black and ticket ivory give it the material language of a printed playbill, while Bona Nova display type and Geologica reading type keep the voice literate, warm and useful. The structure is deliberately theatrical rather than event-like: an asymmetric poster-and-stage hero, a current-production stage, a chronological season ledger, a split house story, practical visit rows, membership and footer.
The centrepiece is a four-show production selector built from real buttons. Choosing a show closes left and right curtain panels across the stage; only at full closure does the title, run, price, synopsis and production photograph change. The curtains then open with a small overshoot while an electric-blue house-light glow settles over the new image. Rapid choices retain only the latest request, and arrow keys, Home and End provide the same selection flow as click and tap.
All four production photographs are bundled, optimised WebP derivatives with fixed dimensions, descriptive alternatives, deep-stage fallbacks and legibility overlays. Buyers can replace the four files without touching the interaction, edit the production rows in one script block, and remove any section independently.
What's Included
- Complete deployable one-page theatre site with fixed nav, poster hero, current stage, season ledger, venue story, visit information, membership call to action and footer
- Four-show production selector operated by semantic buttons on keyboard, pointer and touch
- Paired stage curtains close with clip-path, change all production content only under full cover, and open with a restrained overshoot
- Rapid-selection state management keeps the latest requested show and prevents stale timelines from corrupting the stage
- House-light glow settles after every curtain reveal for a layered but restrained finish
- Chronological playbill ledger keeps every production and price readable without JavaScript
- Four robust local production-photo slots with intrinsic dimensions, useful alt text, colour fallbacks and text-legibility treatment
- Measured oxblood, stage, ticket-ivory and electric-blue palette with every translucent value derived from matching RGB triples
- Responsive layouts for desktop and mobile with no horizontal overflow
- Reduced-motion, no-JavaScript and blocked-CDN fallbacks preserve a complete readable page
- Optional Lenis smooth scrolling synchronised with ScrollTrigger
Perfect For
- Independent theatres presenting a repertory season and current production
- Studio theatres and performance venues needing practical access and travel information
- Producing companies combining ticket sales, venue story and supporter membership
- Arts centres with rotating theatre, dance and spoken-word programmes
- Community venues protecting low-price tickets through a membership appeal
How It Works
The repertory stage
Four production rows in the script supply the title, dates, price, synopsis and image relationship, while the HTML carries four real image slots and four semantic buttons. The visible stage is a single accessible content region rather than duplicated hidden panels. Buyers can rename or reorder the season by changing those rows and keeping the button and image order aligned.
The curtain change
A GSAP timeline animates two oxblood curtain panels from opposite sides with clip-path. The selected production is written only in the callback reached at full closure, then both panels open just beyond their resting inset and settle back while the house-light glow fades to its resting level. If several choices arrive during a run, the current timeline completes safely and immediately serves only the latest requested index.
Keyboard and motion
The selector uses button elements, visible focus and aria-pressed state, with Arrow Left, Arrow Right, Home and End moving focus and selecting through the same request function used by click and tap. Under prefers-reduced-motion, selections update immediately with no curtain travel, and CSS independently restores every pre-hidden reveal target.
Without JavaScript
The first production is fully rendered in HTML, its first photograph is visible, and the entire four-show season remains a chronological ledger below it. The synchronous head gate is removed if GSAP or ScrollTrigger fails to load, so blocked CDNs expose the same plain document instead of leaving reveal targets hidden. Each section setup is guarded, allowing buyers to remove sections without breaking the remainder.