New season, New skills! All Courses at $9.99

Dec 4, 2024

Case Study - Superpower.com

Case Study - Superpower.com

A brand today is defined by the experiences it creates—how people interact with your product, understand your story, and connect with your mission.

At Daybreak Studio, we shape brands that go beyond traditional guidelines, extending identities that thrive in every interaction. Once we define the brand, we bring it to life across the spaces where stories unfold—websites, digital products, and those unsaid moments—mental touchpoints—that linger in the audience's experience, creating an emotional connection with the brand's essence.

Mockups
We try to broaden our understanding of viable brand touchpoints with every new client

As Superpower emerged from stealth, the goal was clear: create a website experience that carried the weight of its mission. A story of reshaping healthcare, making it more personal and proactive. A story about human potential, framed under the theme: “A New Dawn for Healthcare.”

Art Direction: Representing Human Potential

Art direction became the focal point of the Superpower brand experience—a foundational pillar that unifies different aspects of the brand into something recognizable and indicative of its essence. The imagery reflects potential, growth, and transformation by abstracting the human form—moving beyond the literal to evoke a sense of possibility. Through thoughtful and purpose-driven execution, the site becomes a canvas for what people can achieve through Superpower's platform.

Art Direction Examples
The art direction underlying a part of superpower’s larger brand

Design Language: A Reflection of the Body

Design should be determined by the content it represents. Bento grids, while popular, have become the default lazy solution—often leading to generic and uninspired compositions. Instead, each design choice should be intentional, adapting to highlight the brand's essence. In brand-defining moments, it's crucial that the design doesn’t overshadow the message but instead enhances it, ensuring the brand’s voice remains clear and distinct.

Design Explorations
Iterations exploring superpower’s spacial & typographic language

With the human body as our focal point, the spinal cord became a central motif—its role as the core of our physical form and the foundation of movement. This further informed the Superpower ecosystem section, where content breathes and unfolds naturally. On desktop, information expands and pushes like vertebrae in motion. On mobile, the design stacks, echoing the spine’s alignment.

UI Explorations

The Wormhole: A Journey in Four Parts

The hero and wormhole section serves as an introduction to the Superpower universe, guiding the audience from feeling to deeper understanding. Through a combination of custom photography, AI workarounds, Blender geometry nodes, and Three.js iPad models, we brought this moment to life.

Building the Visual Foundation

We embraced AI tools early in the studio's journey to create high-fidelity assets for our clients. But with Superpower, our vision exceeded what current tools could handle. This challenge led us to a custom shoot with the Superpower team, allowing us to shape the assets precisely as needed. The shoot became an opportunity for a unique opening video, tailored brand imagery, and team portraits.

Shooting Images

Blinks and Breaks

One small but telling detail was the model’s blinking in the sped-up footage. Though a seemingly minor detail, we couldn’t stop thinking about it. We manually removed each blink, frame by frame, then ran it through countless generations with Topaz to stitch it together.

Nodes and Rays

We used Blender geometry nodes to extrude the data visualization into the rays of the wormhole, creating a seamless transition that leads into the iPad. Subtle elements, like a gentle glow before impact and a harmonic balance of colors, captured the energy and fluidity of the movement.

iPads

Initially, we built a fully interactive Three.js environment for the iPad to test different lighting and post-processing effects, but later made the decision to recreate the effect in CSS to replicate the visual fidelity without compromising site performance. For us this stands as an example of where the answer lies in simplifying, even if the seemingly ideal solution might have underway already, particularly if it leads to a more compelling experience.

The Calluses of Creation

Every decision and iteration reflected our dedication and collaboration. These moments, full of challenges and breakthroughs, are what we remember and value most.

Ultimately, whether these meticulous details mattered to the audience is uncertain—but to us, they meant everything. While the recognition is gratifying, it's the journey of creation that drives us, and making something we are proud of makes all the effort worthwhile.

Shooting Images

Technologies & Tools

3D and Visual Effects: After Effects, Premiere, Topaz, Blender

Visual Design: Figma, Midjourney, Photoshop

Web Development: Next.JS, Framer Motion, Tailwind CSS, Vercel, React-Three-Fiber

Our approach to new technologies is intentional: we use tools to serve our creative vision, not the other way around.

On Daybreak Studio

We’re a team of craftspeople and optimists who are eternally curious about new tools, big ideas, and what more we can achieve with technology.

It’s right there in the name. We think today could be Earth’s best day yet.

Follow our journey on IG or Twitter.