OFFAIR
OFFAIR site is a playful space for music fans to explore diverse sounds, records and find live shows to join in person.
OFFAIR is a record label and show production platform that cultivates a space for established artists to release and perform music outside their familiar sonic territories. Their intentional releases serve as soundtracks to diverse experiences. Their live shows offer an intimate escape, allowing artists to explore vulnerability and new directions, free from distractions. Each release and show is unique, with a tailored content strategy.
Project Outline
Create a playful online space to engage fans with novel ways to discover and interact with music, by exploring beyond genres and think of music as moods or spaces.
OFFAIR had created a collection of playlists based on times of the day like "evening", or moods like "relax" combined with several genres of music including piano, electronic, lo-fi, or environments like nature and noise.
This presented the idea to build a playlist generator widget for fans to select their respective spatial or mental spaces and then select one of the genres or environments and get their generated playlist link.
The playlist generator and the headline changing animations in the page were built with JS + jQuery.
Creative development #
The client wanted the page to feel alive and organic, and to bring that vibe I incorporated the shapes that change in size and other textures to the page. For the header shape animations, I used d3.js and GSAP
They requested spaces for their record releases and show experiences, where they could both announce and showcase each.
Because these sections need to be updated and maintained periodically, the client requested a simple and minimal content management system that was not Wordpress.
I incorporated Decap, an open-source React headless CMS that allows content to be stored and versioned on GitHub.
Development process #
Built with Eleventy, using Nunjucks for templating, with Decap headless CMS for client updates.
- Parallax and shape animations made with GSAP with ScrollTrigger
- Site files and content version control maintained via GitHub and served in continuous deployment with Netlify
- Customizable event dates widget for events section made with Bands in Town API
- Customizable photo galleries for event sections built with jQuery Flexslider
- The playlist generator and the headline changing animations in the page were built with JS + jQuery
- Previous: HypeHub
- Next: Tokimonsta