On this article, we’ll discover the behind-the-scenes technique of how Waaark introduced 24/7 Artists’ new product launch touchdown web page to life. See how inventive imaginative and prescient, design, and growth got here collectively to form the ultimate outcome.
Transient
24/7 Artists reached out after discovering our work on AW Portfolio. They got here to us with a transparent problem: assist them break by a inventive impasse and redesign their web site to assist an upcoming product launch—on a good deadline.
At Waaark, having time to assume, breathe, and work at our personal tempo is vital. We sometimes keep away from last-minute tasks, however this one felt like a puzzle value fixing. We noticed a slim however possible path ahead and accepted the problem.
Artistic analysis
We kicked off the venture by exploring methods to visually characterize music. After some wandering classes on platforms like Pinterest and Behance, we narrowed our course towards visualiser aesthetics—significantly using traces to counsel sound waves.
The consumer additionally emphasised their need to introduce depth and dimensionality into the positioning. We collected inspiration reflecting this idea and organised every little thing right into a Milanote moodboard, together with concepts round shade, typography, format, and impactful hero sections to set a transparent inventive course.
Given the time constraints, it was necessary to deal with daring, achievable visuals—methods we had already mastered.
Design
Story board
For a storytelling-focused, long-scrolling touchdown web page like this, we changed our typical UI wireframes with a full storyboard. This storyboard mapped out every step of the consumer journey, together with transitions between sections.
Our objective was twofold: to offer the consumer with a transparent visible course and to start out shaping the movement and pacing on our finish.
Artistic Course
With each the moodboard and storyboard authorised, we started merging them to outline the positioning’s visible language.
Proper from the hero part, we wished the message to be loud and clear: music meets tech. We envisioned a darkish, immersive intro with round traces evoking vinyl information or sound waves. Layered on high: a daring sans-serif headline and a ticket-style navigation bar to strengthen the music business vibe.
To immediately seize consumer consideration, we imagined a mouse-trail animation the place artist images seem in an equalizer-style motion.
To distinction the darkish intro, we launched a extra colourful palette all through the remainder of the positioning, showcasing the variety of music and the artists’ distinctive sensibilities.
Implementation
Tech stack
We used our go-to stack, which the consumer was already acquainted with: WordPress. It supplied a strong basis—simple to handle, versatile for the frontend, and scalable.
For the front-end expertise, we built-in just a few choose libraries:
- GSAP for fluid, expressive animations
- Luge to handle the general web page lifecycle
- Lenis for clean scrolling
We aimed to minimise exterior dependencies, as an alternative counting on native CSS 3D transformations and light-weight JS/Canvas-based animations—particularly for results mimicking depth.
Animation
To avoid wasting time, all of the animations have been immediately coded based mostly on what we had envisioned and mapped out within the storyboard. A few of them labored precisely as imagined from the beginning, whereas others wanted a little bit of fine-tuning to combine absolutely into the general expertise.
Scroll Animations
To maintain customers engaged whereas presenting 24/7 Artists’ imaginative and prescient and providing, we crafted a sequence of scroll-driven animations—alternating between clean flows and surprising reveals.
Micro-Interactions
On a product launch web page, micro-interactions are key. They spark curiosity, spotlight key parts, and subtly information the consumer towards motion.
For the principle name to motion, we designed a particular interplay utilizing the identical equalizer-like form seen within the photograph animations. On hover, it animates like a music participant—each playful and thematic.
Tile Grid Setup
We started by developing a grid made from 1×1 and a couple of×2 tiles.
Z-Axis Scroll Impact
Since we weren’t utilizing true 3D, we faked depth utilizing scale transforms. We calculated the size wanted to have the grid’s central gap (the place content material would go) increase to fill the viewport. Then, we transitioned every tile from its unique measurement and place to the ultimate state utilizing GSAP.
Enjoying with GSAP staggered animation provides extra depth to the movement.
Simulated Dice Depth
To simulate 3D cubes, we calculated the back-face vertices based mostly on a smaller grid to maintain the phantasm of perspective. We then drew facet faces accordingly, ensuring to cover vertices behind the entrance face.
Canvas-Based mostly Content material Reveal
To complete the impact, we redrew the two×2 tiles’ content material in Canvas and added a canopy layer that scrolls at a sooner fee, revealing the content material under.
Conclusion
The 24/7 Artists touchdown web page was a daring and fast-paced venture that pushed us to distill concepts rapidly and belief our inventive instincts.
By means of sturdy visible metaphors, clean storytelling, and thoroughly crafted movement, we constructed a launchpad that units the tone for the model’s subsequent chapter.
This primary launch is only the start. The location was designed with scalability in thoughts, and extra sections and pages are already being added to assist future development and evolving wants.
When the imaginative and prescient is evident and the momentum is correct, nice issues can occur—quick.
