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 improvement got here collectively to form the ultimate end result.
Temporary
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 website to help an upcoming product launch—on a decent deadline.
At Waaark, having time to suppose, breathe, and work at our personal tempo is vital. We sometimes keep away from last-minute tasks, however this one felt like a puzzle price fixing. We noticed a slender however possible path ahead and accepted the problem.
Inventive analysis
We kicked off the challenge by exploring methods to visually symbolize music. After some wandering periods on platforms like Pinterest and Behance, we narrowed our course towards visualiser aesthetics—significantly the usage of strains 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 all the things right into a Milanote moodboard, together with concepts round colour, typography, structure, and impactful hero sections to set a transparent inventive course.
Given the time constraints, it was vital to deal with daring, achievable visuals—strategies 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 purpose was twofold: to supply the consumer with a transparent visible course and to begin shaping the stream and pacing on our finish.
Inventive Course
With each the moodboard and storyboard permitted, 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 strains evoking vinyl information or sound waves. Layered on high: a daring sans-serif headline and a ticket-style navigation bar to bolster the music trade 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 range of music and the artists’ distinctive sensibilities.
Implementation
Tech stack
We used our go-to stack, which the consumer was already accustomed to: WordPress. It supplied a stable basis—straightforward to handle, versatile for the frontend, and scalable.
For the front-end expertise, we built-in a number of 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 a substitute 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 straight coded primarily based 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 sudden reveals.
Micro-Interactions
On a product launch web page, micro-interactions are key. They spark curiosity, spotlight key components, 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 establishing 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 dimensions wanted to have the grid’s central gap (the place content material would go) develop to fill the viewport. Then, we transitioned every tile from its authentic dimension 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 primarily based 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 challenge that pushed us to distill concepts rapidly and belief our inventive instincts.
By way of robust 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 positioning was designed with scalability in thoughts, and extra sections and pages are already being added to help future progress and evolving wants.
When the imaginative and prescient is evident and the momentum is true, nice issues can occur—quick.
