The Challenge: A Vision That No Template Could Contain
Nelaa Global is a Bengaluru-based cultural organisation whose work spans performing arts, music festivals, theatre productions, sports events, international artist collaborations, publishing, faux architectural installations, and art biennales. Describing what they do in a single page or a generic website template was never going to work.
They needed a digital home that could represent the full breadth of their programming — a platform where artists, collaborators, sponsors, and audiences could each find exactly what they were looking for. A template site would have forced Nelaa's vision into predefined boxes. A custom build was the only path forward.
The brief to our team: build us a website that feels as ambitious, curated, and culturally rich as the work we produce.
What We Built — The Full Scope
Every page on the Nelaa Global website was designed and developed from scratch — from the home page through to individual artist biography pages. Here's the complete map of what we built:
Performances page with tabbed filtering (Past / Upcoming / India / Abroad) and the Collaborations listing with dynamic detail routing
The Home Page — Cinematic First Impressions
The homepage is Nelaa Global's curtain-raiser, and we treated it with that level of theatrical weight. The hero section opens with a full-screen Swiper carousel that plays a looping MP4 video alongside curated still images — setting the tone before a single word is read.
Below the hero, the page moves through a structured narrative: an About strip introducing the organisation's mission, a Journey section linking to team and collaboration pages, a work gallery carousel, a testimonials slider, and a YouTube subscribe section built with multi-column Swiper image layouts. Every section uses scroll-triggered entrance animations powered by GSAP and WOW.js, so the page feels alive as visitors move through it.
- Full-screen video hero with Swiper carousel — video and images combined in a single immersive hero
- GSAP ScrollTrigger animations bringing each section into view as users scroll
- SplitText character-by-character headline reveals for the main tagline
- Multi-section layout progressing naturally from mission statement to call-to-action
- YouTube subscribe integration with image grid showcasing Nelaa's live performances
- Off-canvas mobile sidebar with contact information and social links — no functionality cut on smaller screens
The Performances Page — Organised by Tab, Not by Scroll
Nelaa's performances span geographies and time — past events, upcoming shows, productions inside India, and international programmes. Displaying all of this as a flat list would have created a wall of content. Instead, we built a tabbed interface that lets visitors choose exactly the segment they care about.
Each tab — Past, Upcoming, India, Abroad — renders its own image carousel, so every view feels curated rather than cluttered. The tab switching is instantaneous, the carousels are lazy-loaded, and the layout remains consistent across screen sizes.
This is the kind of UI decision that separates a custom build from a template: a theme won't give you a performances section designed around how a cultural organisation actually categorises its work. We built it to fit the content, not the other way around.
Collaborations — Dynamic Pages, Data-Driven
Nelaa Global works with an ever-growing network of artists, theatre practitioners, musicians, dancers, and cultural groups across Karnataka and beyond — from established groups like Lokadharmi and Oorali to individual artists like Chethana Radhakrishna and Nataraj Honnavalli.
Rather than hand-coding a separate page for each collaborator, we built a data-driven Angular service and a reusable detail component. Each collaboration has its own dedicated URL at /collaboration-details/:id — structured, SEO-ready, and expandable without touching the codebase whenever a new collaborator joins.
- Single Angular service powering all collaboration data — add a new entry to the service, get a fully rendered page automatically
- Individual, linkable collaboration URLs for each artist or group — shareable, indexable, and meaningful
- Consistent layout across all detail pages — profile imagery, description, performance history, contact context
- Collaboration listing page with cards linking into the dynamic detail routing
Carnival 2025 gallery — 140 event images in a responsive grid with Magnific Popup lightbox on every image
The Carnival 2025 Gallery — 140 Images, Zero Compromise on Performance
The Carnival 2025 event was a milestone for Nelaa Global, and the gallery page needed to do it justice — all 140 photographs from the event, presented in a responsive grid with a full-screen lightbox on every image.
We integrated Magnific Popup for the lightbox functionality and lazy-loaded the images so the initial page load stays fast even with this volume of media. Every image in the grid opens into a full-resolution view with keyboard navigation support — visitors can arrow through all 140 photos without leaving the lightbox.
- 140 event images in a clean, responsive masonry-style grid layout
- Magnific Popup lightbox with keyboard navigation across all images
- Lazy loading to keep the initial page load lightweight despite the image count
- Fully responsive — the grid reflows cleanly from desktop columns to mobile rows
The Design Language — Dark Theme, Gold Accents, Cultural Weight
Nelaa Global works with colour, texture, and light as part of their art. Their website needed a design language that carried the same intentionality. We chose a deep, near-black background palette with gold accents — a palette that communicates cultural richness, premium positioning, and artistic seriousness without being formal or stiff.
- Dark base — deep navy-to-black backgrounds that let imagery breathe and stand out without competing with the UI
- Gold accents — used consistently for highlights, borders, hover states, and CTA elements, tying the entire site into one coherent identity
- Gradient cards and glass-style UI — particularly evident on the Buy Tickets page, which features an animated ticket presentation with translucent card styling
- Hero sections reused with consistency — each interior page opens with a branded hero including a breadcrumb, page title, and a full-width background image, giving every page its own gravitas
- Sticky transparent header that transitions to solid on scroll, maintaining legibility across the full-screen hero imagery
The Technical Stack — Built for Scale and Smooth Interaction
This wasn't a static brochure site. Nelaa Global's website needed the kind of interactivity and animation quality that reflects a performing arts organisation — so we chose a stack that could deliver exactly that.
- Angular 17 with standalone components and lazy-loaded routes — the entire application is modular, meaning each page loads only what it needs, keeping every route fast even as the project grows
- GSAP with ScrollTrigger, ScrollToPlugin, and SplitText — scroll-linked animations, character-level text reveals, and smooth scroll-to-section navigation across the site
- Swiper.js — multi-instance carousels on the home page, performances page, work gallery, and testimonials section, each with custom configuration
- Magnific Popup — full-screen lightbox for gallery pages with grouped navigation
- WOW.js — entrance animations tied to scroll position for non-GSAP sections
- Bootstrap + custom CSS — responsive grid foundation with Nelaa-specific styling layered on top
- In-memory scroll position restoration — Angular router configured to return to the top of each new page, avoiding the jarring mid-page entry that breaks navigation flow
Pages With Depth — The Join Us and Buy Tickets Experience
Not every page on a large site gets built with full attention to the user journey — on template builds, secondary pages are often afterthoughts. On the Nelaa Global site, every page was designed with a specific audience in mind.
The Join Us page presents five distinct opportunity categories — each with its own anchor ID — so the header navigation can link directly to the relevant section. Artists, volunteers, sponsors, collaborators, and community partners each land on content written specifically for them, not a generic "get involved" wall of text.
The Buy Tickets page goes further — opening with a hero and then presenting a glass-style animated ticket card UI that makes the purchase process feel like part of the experience, not an afterthought. Bank details and QR code support are integrated for the Indian context where UPI payments are the norm.
The What We Do Architecture — Programmes as a Navigable Map
Nelaa Global's programming is diverse enough that it could be its own separate website. We solved this on the What We Do page by building a grid of programme cards, each linking to its own dedicated section page:
- Music, Theatre & Dance — the core performing arts programming
- Sports — events and outreach through sport
- Faux Architectural Facades — installations with individual artist deep-dive pages for Shashidar Adapa and Deva G
- Publishing House — Nelaa's literary and publishing arm
- Art Biennale — the visual arts and biennale programming
Each of these is a fully realised page with its own hero, content sections, and navigation context — not a scrolled-to anchor on a single parent page. This gives search engines and visitors alike a clear, indexable structure for every programme area Nelaa runs.
"The website CodeSquad built truly represents what Nelaa is — its depth, its diversity, and its ambition. Every page tells part of our story. We've been able to share individual pages with collaborators, sponsors, and artists around the world, and the response is always the same: it looks like what we are."— Nelaa Global
What a 20+ Page Custom Website Signals to Your Audience
There is a real difference between what a potential collaborator, sponsor, or audience member feels when they land on a template site versus a fully custom build. Templates communicate that the organisation fits inside a pre-existing idea of what a website should look like. A custom build communicates the opposite: this organisation is confident enough in its identity to build something original.
For Nelaa Global — an organisation whose entire mission is cultural authenticity and artistic depth — that signal is not optional. It's part of the brand.
If your organisation's work, ambition, or positioning is more complex than a template can capture, the answer isn't a better template. It's a custom build designed around what you actually do.
Building something ambitious that deserves its own digital identity?
Let's Build It →