Gate: Website Template for Exhibition and Event Design Studios
Exhibition studios work to opening dates, so Gate lists the work the way a terminal lists flights. Shows, cities and status spell themselves out on a split-flap board that visitors can filter.
**Signature interaction.** A split-flap programme board: character cells flip through the alphabet to spell each show, a row flips to a prompt on hover or focus, and filters re-spell the whole board.
**Features**
- **Split-flap board.** Rows spell themselves in a stagger when the board comes into view.
- **Filters.** Buttons re-spell the board with the rows that match, with a live count.
- **Shows.** The lead projects as photographs, two to a row.
- **Capabilities and figures.** Three panels of services and four numbers that count up.
- **Venues.** Cities with the halls the studio has worked in.
- **Table fallback.** With no JavaScript the board is a plain, readable table.
**What's included**
- A home page and 8 show case pages, generated from one content file
- Every word, image, link and colour in `content.json`, so no code changes are needed to make it yours
- README and a buyer guide for editing, building and deploying
- The Studio Engine: Vite, TypeScript, smooth scrolling and animation
- Self-hosted open licence (OFL) fonts and generated placeholder images
- QA notes with the test results
**Built right**
- Lighthouse mobile 93 to 99 performance, 100 accessibility, best practices and SEO
- Keyboard accessible, works without JavaScript and respects reduced motion
- About 60 KB of JavaScript gzipped
- Deploys as static files to any host
**Requirements:** Node.js 20 or newer to edit and build.
**Tags:** website template, exhibition design, event design, experiential studio, trade show, portfolio template, Vite, responsive
**Files**
- Product file: `../studio-gate.zip`
- Listing cover, 1920x1080: `../covers/studio-gate-cover.jpg`
- Feed cover, 1080x1350: `../covers/studio-gate-cover-feed.jpg`
- Reel, 10 seconds: `../reels/studio-gate-reel.mp4`
