Epilogue '26 Official Website

Epilogue '26 needed more than an event landing page. It needed a digital stage — a site that could carry the atmosphere of a university music festival, introduce headliners with cinematic motion, and convert visitors into ticket buyers. The result is epilogue.moraspirit.com: a React + Vite experience designed by MoraSpirit 360 as the public face of Epilogue.

At a Glance

Project Overview

The Epilogue website is a single-page festival experience. Visitors land on a dark, neon-accented hero with the Epilogue brand, a short promise of the night, a live countdown, and a full-bleed concert atmosphere. From there, scroll-driven sections reveal the headlining act, artist lineup, photo gallery, festival story, and organizer presence — with Buy Tickets available throughout.

Ticket purchase is not a separate website. A reservation modal opens in place, collecting buyer details and payment slips before handing off to the ticketing backend. That keeps marketing and conversion in one continuous journey.

The Challenge

Festival sites often fail in one of two ways: they look generic, or they look impressive but are hard to use on a phone in a rush. Epilogue needed both presence and clarity — a first viewport that feels like the event, plus an obvious path to buy tickets.

The build also had to:

• Present Epilogue as a brand-first experience, not a generic event template.
• Highlight Daddy as the main-stage headliner and tease the wider artist lineup.
• Stay fast and readable on mobile devices.
• Integrate Koko Pay Later and the online reservation flow without breaking immersion.
• Support immersive motion (loader, parallax, scroll scenes) without sacrificing accessibility basics.

The Solution

MoraSpirit 360 engineered a cinematic single-page app with a deliberate section sequence: Loader → Hero → Lineup → Gallery → Experience → Organizer → Footer, plus Lightbox and Ticket Form overlays. Motion is used to create hierarchy and arrival — not noise — while ticket CTAs remain persistent in the navigation.

Website Experience

Immersive Opening

A branded loader builds anticipation before the page splits open into the hero. The hero pairs background concert video with a 3D-parallax artist cutout, floating brand mark, short supporting line, and a glass-panel countdown. Event date, venue, and start time sit as secondary logistics — never overpowering the brand.

Headlining & Artist Lineup

As visitors scroll, the hero yields to the Headlining section featuring Daddy — complete with portrait treatment, Main Stage badge, and band story. Below, the Artist Lineup section continues the narrative with clue-style cards and copy that keeps curiosity high while the full roster builds excitement for the night.

Headlining section featuring Daddy and the Artist Lineup reveal

Gallery & Experience

A gallery of festival and MoraSpirit imagery opens in a lightbox for closer viewing. The Experience section answers “What is Epilogue?” through three focused stories — The Festival, The Vibe, and The Community — grounding the spectacle in the University of Moratuwa audience and MoraSpirit 360’s organizing role.

Experience section — festival story, vibe, and community

Ticket Reservation Modal

Buy Tickets opens a dark-themed reservation form without leaving the page. Buyers enter contact and university details, choose Standard (Rs. 1,400) and Premium (Rs. 1,800) quantities — or Alumni pricing when applicable — see a live calculated total, and upload a payment slip. Koko Pay Later remains available from the nav as an alternate payment path.

In-page ticket reservation modal with tier selection and live total

Key Features

• Brand-led cinematic hero with video atmosphere and artist parallax
• Scroll-pinned scene transitions using react-kino
• Persistent Buy Tickets CTA and Koko Pay Later entry point
• Headlining spotlight for Daddy and clue-driven artist lineup
• Lightbox gallery for immersive media browsing
• Experience storytelling for festival, vibe, and community
• Organizer / social presence for MoraSpirit channels
• Responsive layout tuned for desktop spectacle and mobile access
• Reveal-on-scroll animations for section arrival

Design Direction

The visual language is night-festival: deep charcoal surfaces, neon green accents, glass panels, and high-contrast type. The first viewport is one composition — brand, one supporting line, countdown/CTA energy, and a dominant visual plane — rather than a dashboard of competing promos. Motion reinforces arrival: loader split, floating brand, cursor glow, and parallax depth on fine-pointer devices.

Technology Stack

Technical Highlights

• Single-page architecture with lazy overlays for lightbox and ticket form
• Progress-driven hero animation tied to scroll pin duration
• Intersection Observer reveal system for section storytelling
• Mobile menu, reduced-motion awareness, and overflow locking for overlays
• Build pipeline that publishes frontend assets alongside the ticketing stack
• Clear separation: marketing site for storytelling, ticket domain for ops scanners

Outcome

epilogue.moraspirit.com became the public front door for Epilogue '26 — a site that sells the night as much as it sells the ticket. Visitors meet the brand first, discover the lineup through cinematic sections, and can start a reservation without breaking the experience.

Paired with the online ticketing and QR verification system, the website completes the digital loop: attract, convert, issue, and verify — all under the MoraSpirit 360 umbrella.

About MoraSpirit

Founded in 2009 by University of Moratuwa undergraduates, MoraSpirit began as a university sports media platform and has grown into a broader student-run initiative behind events, campaigns, and digital platforms. MoraSpirit 360 builds the product experiences — including Epilogue’s official website — that turn campus moments into lasting digital stories.