Interactive Web Design
for CB Music Entertainment
(Work-in-Progress)
Objective:
To design and develop an interactive website that captures CB Music Entertainment’s artistic vision, blending aesthetics, functionality, and dynamic user engagement to showcase the label.
Role:
Creative Director & Web Developer
Timeline:
Oct. 2024 - Present
Collaborators:
Yuxuan Shi (Web Engineer)
Ruojia Cao (Art Director),
Rita You (Illustrator)
Project overview
Unlike my other projects, this work is a creative playground where I explored my aesthetics, design, and web development skills. Inspired by CB Music Entertainment’s raw energy, I set out to create a site that feels alive and interactive rather than just a static info page. Working with illustrators and developers, I designed playful visuals, custom cursors, dynamic elements, and an interactive event calendar to make browsing an experience of its own. The site reflects CB’s experimental vibe, blending music, art, and digital interaction into an engaging space.
CB Music Entertainment, also known as ChickBlood, is a creative label amplifying East Asian independent music, culture, and art through pop-up events, digital media, and collaborations. As a co-founder, I oversee strategic direction, event curation, and website design, creating spaces where raw emotions and artistic expression collide.
Although still a work in progress, the CB website is an interactive hub that embodies the label’s spirit. Collaborating with illustrators and engineers, the website is designed to be both functional and visually playful, the site showcases our events, dates, and featured artists. Its whimsical aesthetics reflect CB’s youthful energy, while intuitive navigation ensures a seamless user experience for exploring our latest events and info. The site is an extension of CB’s creative identity, bringing our vibrant underground community to life online.
Background
Main Page:
A Visual Gateway
The CB website’s main page sets the stage for an immersive experience, featuring a custom navigation bar designed in collaboration with our artists. Styled with playful elements, the navigation bar reflects CB’s creative energy while maintaining functionality. A language selection button caters to our global audience, ensuring accessibility, while a centered event calendar link provides an intuitive entry point for users to explore upcoming shows. This dynamic landing page embodies CB’s youthful, cross-cultural spirit, balancing artistic expression with usability.
A snapshot of the website's main page
Customized Cursor
_gif.gif)
To infuse the site with CB’s playful identity, we customized the standard cursor into a mosquito icon, a nod to the label’s rebellious spirit. Using CSS styling, the cursor morphs into a puddle of blood and produces a splashy sound when on-click, adding an fun, interactive layer to the browsing experience. This quirky detail isn’t just decorative: it enhances user engagement, reinforcing the label’s offbeat personality while making even the smallest interactions feel intentional and immersive.
Designs of the interactive cursor
Interactive Calendar
Events are at the heart of CB Music Entertainment, so we designed an interactive event calendar that is both engaging and practical. Using CSS Keyframes, specific event dates glitch and flash on hover, creating an electric, high-energy effect that aligns with CB’s fast-paced, underground vibe. This animation not only draws attention to key dates but also keeps the user experience visually dynamic, turning an ordinary calendar into an extension of CB’s artistic identity.
Loading Page
Instead of a generic loading screen, we designed a custom animated loading page featuring a quirky illustrated monster using HTML and CSS, bringing CB’s visual storytelling to life. With JavaScript, we implemented a progress bar animation, ensuring that even waiting becomes part of the experience. This element adds anticipation and engagement, welcoming users into the bold and unpredictable world of CB Music Entertainment before they even begin exploring.
Reflection
Although this is a creative side project and still a work in progress, it has been a valuable experience in collaborating with artists and engineers to bring a vision to life. I learned how to effectively communicate design needs, balance creative storytelling with technical feasibility, and integrate diverse skill sets into a cohesive web experience.
This project also challenged me to apply my aesthetic and design sensibilities in a way that bridges creativity with functionality, ensuring that CB’s branding, storytelling, and user experience come together seamlessly in web design.