Harshtal - Japanese Cultural Festival Portal

Interactive SPA for a Japanese Cultural Festival featuring dynamic UI interactions, custom HTML5 Canvas particle engines, and a state-based router architecture ready for full-stack event management scaling.

ReactTypeScriptViteTailwind CSSRadix UIFramer MotionGSAPLocomotive Scroll

Live Demo Source Code

The Problem

Building a Performant, Scalable Cultural Event Portal

Standard static event websites fail to capture the energy and scale of large cultural festivals. Harshtal needed a cinematic storytelling approach that displays high-fidelity animations on both desktop and mobile without compromising performance. Furthermore, the architecture had to support an eventual transition into a full-stack event management system, including authentication, e-commerce pipelines, and live event handling, avoiding immediate bundle bloat while ensuring extensibility.

The Solution

State-Based Routing & High-Performance Particle Engine

Engineered a responsive Single Page Application utilizing a custom state-based router for fluid transitions, and a high-performance mathematical particle engine on HTML5 Canvas to eliminate DOM manipulation bottlenecks.

Key Technical Decisions

01Implemented a lightweight state-based mock router with centralized event delegation, intercepting anchor clicks to coordinate smooth scrolling, UI transitions, and component hydration without external routing library bloat.

02Built a custom mathematical particle engine (Sakura Petals) directly on the HTML5 Canvas API, utilizing requestAnimationFrame and Bezier curves to render continuous particles at a constant 60 FPS without garbage collection spikes.

03Integrated Radix UI primitives with Tailwind CSS to ensure a highly accessible, keyboard-navigable component architecture, styling unstyled base components for a premium feel.

04Orchestrated complex scroll-triggered animations and cross-page navigation flows utilizing Framer Motion, GSAP, and locomotive-scroll to hijack native scrolling for fluid, inertia-based experiences.

05Decoupled structural data (Sponsorship Packages, Registration Classes) from the UI layer into hardcoded maps mirroring future database schemas, accelerating the eventual transition to backend APIs.

06Architected responsive UI state management including scroll-aware sticky navigation and mobile drawer routing that automatically binds to route changes.

Impact & Results

60fps

Performance

Accessible

UI Primitives

Full-Stack Ready

Architecture

Canvas + GSAP

Animations

Immersive Interactions & Scalable Foundation

The application successfully delivered a highly interactive, 60fps cinematic experience on mainstream devices. By avoiding heavy DOM manipulations for particle effects and utilizing a custom routing approach, the foundation remains incredibly lightweight while being perfectly structured to integrate upcoming RBAC authentication, multi-step checkouts, and live event broadcasting features.

Key Learnings

DOM nodes are too slow for complex particle simulations — manipulating hundreds of DOM elements causes severe layout thrashing. Moving to HTML5 Canvas and calculating matrices via JavaScript ensures smooth 60fps performance.

A state-based mock router is highly effective for SPAs with heavy scroll interactions — by overriding default anchor behavior, we maintain complete control over transition timings and rendering hydration.

Decoupling hardcoded data structures to mirror future database schemas drastically reduces the friction of integrating backend APIs later.