Responses by Bryan James, creative director; Jesper Landberg, technical director; and David Lubofsky, writer and visual strategist.

Background: The Search for Work Happiness is a nontraditional, art-filled business book meant to inspire readers to find happiness in their workplace while creating it for those around them. This web experience was the interactive manifestation of that, providing access to the book in a fun, engaging way for those unable to purchase the hard copy. The concept was to playfully place users at the center of a “search” for work happiness inside a hidden picture book–style illustrated world, enabling them to breathe color and life into the line art while they read and listen to snippets of the book.

Design core: Playful music and spoken words from the book act as the user’s guide, while a thoughtful UI reacts to their interaction with book-themed animations. Since the book centers around happiness, UI and WebGL-driven “bending” causes smile-like shapes throughout the site.

Favorite details: We’re most proud of the lifelike movement and smooth feel as you drag around a world that has motion, movement and visual surprises hidden in every inch of the canvas. If you’re interested in what the book is about, a segment of every chapter lies within—and if you listen to an entire snippet, the audio timeline smiles at you!

Challenges: It was extremely challenging to make such a vibrant, stimulating, art-filled, user-controlled experience feel smooth to the touch on both desktop and mobile. We worked together vigorously for months to refine and perfect every inch, making sure to not be boxed in by time restraints that would force us to release anything less than 100 percent of what we wanted it to be—with zero regrets. We truly would not change a thing.

Navigation: Aside from the central way of navigating, which allows users to “search” around the illustrative canvas, there is a full-screen main chapter navigation to help users find their way through the book. To change chapters of a book in real life, someone must turn pages; so, in that main navigation, that experience was mimicked using Rive animations and modern programming to give the feeling of turning pages. The feeling from simulating the physical experience intends to leave the user in awe.

Technology: The site is built using Nuxt on the front end and leverages DatoCMS. The draggable canvas is powered by three.js, and the masking effect is made in a GLSL shader with values animated by GSAP. These technologies, paired with WebGL and Rive animations, create a smile-filled world full of UI and animation, where users can drag around a seemingly large world of line art while giving them the ability to “paint” color into the book. The site sits on Netlify for extremely fast delivery to the user and leans on some very clever preloading to ensure the user is entertained while the site loads and during each moment of interaction.