Back to all cases
Penumbra.zone:
Website Refresh
Client
Penumbra is a cross-chain network that enables secure transactions. We’ve been collaborating with the team for a year as Penumbra’s design partners.
Our first project together was the design & development of a marketing landing page. The campaign was dedicated to the launch of their first airdrop.
Challenge
Update the look and functionality
Penumbra’s team wanted to update the look and functionality of their marketing website. The site had to become the primary hub for everything related to the Penumbra ecosystem.
Easy navigation
Visitors should be able to easily navigate through the content and learn more about Penumbra’s protocol and the privacy the network provides. Ideally, the website would ignite users’ curiosity and motivate them to explore Penumbra’s services.
Universal learning hub
It also had to serve as a universal learning hub for all Penumbra audience groups — from active to potential users, from those seeking support to developers who want to use Penumbra’s technology.
Refresh the blog section
Another sub-task was to refresh the blog section and make it more convenient for the company’s content team to use.
Solution
In tight collaboration with the Penumbra team, we found a way to meet all technical requirements while putting visual excellence first.
Our job was to refine and shape the client's ideas — and also rethink the blog structure to create a better content management flow.
Creative
Hover-activated blur
Privacy is Penumbra’s core value. The team was looking for a visual metaphor that would reflect this, and glitch was the answer.
The concept of privacy is conveyed through a combination of sharp focus and blur. Important elements remain clear, while the unimportant fade away, symbolizing the protection of sensitive information.
Celestial theme across the website
Penumbra’s brand style revolves around space. It’s dark and mysterious, and the website needed to reflect that atmosphere.
The web design references telescope imagery: sharp in the center and blurred around the edges. The visual effect also rhymes with the natural phenomenon of a penumbra.
A scalable visual language
Together with the client’s team we created the main visual language for the homepage. Penumbra’s content team successfully scaled it to the rest of the website.
We had full creative and technical freedom, which allowed us to select cutting-edge technologies without sacrificing performance.
WebGL shader was used for the hero screen animation.
Pre launch activity

We loved working with such a creative team. Penumbra teased their audience before the airdrop by launching a game. We helped with the design and development of the site the game: https://sunshadow.codes/. After the community members solved all the puzzles, Penumbra revealed the link to the airdrop site.

The key creative solution in the web design was mesmerizing animations with a dark solemn celestial vibe. They back up the narration and add highlights to its most important elements.

Technical

The solutions we implemented for the final look of the website required competencies on the border between web design and web development. Konstantin Ostroukhov, the project’s art director, used the following tools:

Lottie animations

Lottie is a software for rendering and launching vector animation in real-time. It’s a much more advanced technology than GIF, AVI, mp4, or HTML animation. We love Lottie for its adjustability. The animations are lightweight, which ensures a high speed of page loading.

Shaders

Shaders are programs we use to create elements processed by the device’s video card. They are perfect for development of complex interactive animations. Konstantin used shaders to illustrate the peak moment of the registering process when the user submits the data to the system to prove they’re eligible for the tokens.

Result

It took us 5 weeks from the first briefing to launching the website of the game and the airdrop.

The Penumbra team had a tight deadline, and we were eager to help them start the campaign on time. We worked in extremely short 3-day sprints and had regular calls; it was crucial to synchronize our vision and the results of work. A 6-hour gap in time zones was not a problem, we still managed to maintain excellent communication flow.

5 weeks

from briefing to launch

3-day

sprints

6-hour

gap in time zones

Credits
JetStyle
Konstantin Ostroukhov
Art Director
Vasiliy Belousov
Developer
Max Karmatskih
CTO
Hello!
Hello JetStyle,
I would like to discuss a project idea with you.
My name is
you can email me at
or reach me on
or let’s chat
By clicking the submit button you agree to our Privacy Statement
Sent!
We’ll get back to you soon
Oops! Something went wrong while submitting the form.