Marquee events

Marquee events is a light-first brutalist directory for real-world gatherings — talks, shows, dinners, screenings, and runs. The Discover page leads with a bold type hero, then an auto-scrolling poster marquee, then a bordered grid index; clicking any poster opens an event page where a sticky full-bleed image sits beside a scrolling sidebar with a live countdown, the details, a map, and an RSVP.

The craft is in the restraint. Everything is built on warm off-white paper with near-black ink borders and a single electric-lime accent that fills upward on hover — buttons, nav links, and the morphing RSVP control all share that one move. Type is set in Host Grotesk with tight tracking and a clamped giant headline, dates and labels run as uppercase micro-caps, and date/time chips share hairline edges throughout. Motion — the looping marquee, the spinning circular badge, the slide-in panel, the gentle image zoom — all pauses under reduced-motion, and content is never gated behind an animation.

This is a frontend-only template. Event data is static in the repo, the countdown is real (it reads each event's start time), and the RSVP is simulated client-side — it validates a name and email, shows a confirmation toast, and is ready to wire to a real backend. There is no database, no login, no ticketing or payment, and nothing is stored or emailed.

Who it's for

• Event series and recurring nights that want one clean, browsable index
• Meetup and community organizers listing upcoming gatherings
• Screening series, film clubs, and open-air cinema nights
• Supper clubs, pop-up dinners, and long-table events
• Galleries and project spaces announcing openings
• Run clubs and small fitness groups posting their next outings

What's included

• Discover page — a bold type hero, an auto-scrolling poster marquee, and a bordered event index grid with an upcoming count
• Event detail page — a sticky full-bleed image beside a scrolling sidebar (route /event/:id)
• Live countdown — four D/H/M/S blocks that flip to a spinning LIVE badge in the hour around the start, then hide
• Morphing RSVP control that opens an accessible slide-in modal with name/email validation, focus trapping, and a simulated submit
• Location block with an address, a Google Maps 'Get directions' link, and a static map image (no embed or API key)
• Poster event cards with date/time chips, reused in both the marquee and the grid
• Date and time chips, an About-this-event description, and a creator credit in the sidebar
• Fixed navbar (square-in-square logo, hover-fill links, full-screen mobile menu) and a large wordmark footer
• A spinning SVG circular-text badge, a not-found page, and six sample events with images

Best use cases

Event series and listings

Keep a small, hand-curated index of upcoming events in one place. The Discover grid scales from one event to a full season, and every poster carries its date and time at a glance — ideal for a recurring night, a season of shows, or a community calendar.

Single-event landing pages

Every event gets its own page with a full-bleed image, a live countdown to the door time, the full description, and a map. Drop in one event and ship it as a focused landing page, or list dozens and let the grid do the browsing.

Meetups, screenings, and pop-ups

The warm, confident brutalist look suits in-person gatherings that trade on character — supper clubs, film nights, gallery openings, run clubs. The simulated RSVP gives you the full flow today and a clear wiring point when you're ready to collect real sign-ups.

Make it yours

1. Remix the template

Fork Marquee events into your own private project on mythos.new with one click. You get the full React 19 + Vite 7 + Tailwind v4 source — pages, components, and the static event data — ready to edit.

2. Customize your brand

In the in-browser IDE and chat, swap the wordmark and logo, replace the sample events and poster images with your own, and adjust the copy. The whole palette and type live in a single @theme block — change the paper, ink, and one accent color and the entire directory re-skins, including the hover fills and the RSVP control.

3. Publish

When it looks right, publish straight to a <name>.r21.dev subdomain. Your event directory goes live as a fast static site — and when you're ready for real RSVPs, the simulated submit is a single, clearly marked place to wire a backend.