From our sponsor: Meco is a distraction-free space for reading and discovering newsletters, separate from the inbox.
The Paffi portfolio website is a celebration of ten years of exceptional projects crafted by Silvia and Giulia, the two co-founders and brand designers behind Paffi.
Our vision for the site had two key objectives: to create a seamless, enjoyable browsing experience and to reflect Paffi’s vibrant, playful design approach.
For the homepage slider, we wanted something dynamic and engaging, while keeping the focus on each project’s unique assets. This led us to the idea of a rotating, modular slider that showcases the logotypes and brand colors of each featured project. We named it the “Totem Slider.”
It’s likely reminiscent of some Escher-like, orthographic structures I’ve encountered over the years. Here are a few examples.
Graphic art and motion graphics have always been a rich source of inspiration for this type of design.
Deconstructing the Totem Slider: The Vertical Cube Slider
Now, let’s dive into the deconstruction of the Totem Slider.
We start with a simple vertical slider composed of cubes. While its appearance might not seem particularly complex, the real challenge lies in creating interactions that are ultra-smooth. The goal is to introduce a sense of springiness and playfulness, which are key to achieving the desired dynamic feel.
Next, we apply a rotation to the cubes, along with a subtle scaling effect, based on their distance from the center.
Now, we introduce deformation to the cubes by rotating their XZ components around the center. When the cubes have a sufficient number of vertices, this transformation appears smooth, enhancing the overall fluidity of the slider.
To achieve an extra smooth look, we introduce a subtle distortion, giving the cubes a springy, elastic feel.
With the core interactions complete, it’s time to make the cubes shine. But not like a diamond—instead, we’re aiming for a “low-poly” aesthetic, with simple lighting and soft gradients.
To achieve this, we add a subtle vertical gradient to the cubes.
Next, we apply simple diffuse lighting to give the cubes a bit more pop. The light source is positioned slightly to the right of the camera, which causes the left side of the cubes to appear darker, adding depth and contrast to the overall look.
The last touch is a subtle fade at the top and bottom of the screen. This effect softens the edges of the slider, creating a smoother transition as the cubes move in and out of view.
After fine-tuning the colors, lighting, and springiness, here’s the final result:
The gradients and lighting are kept subtle, adding depth and softness to counterbalance the cubes’ sharp edges. The same concept applies to the bouncy animations, which contrast nicely with the rigidity of the cubes.
Et voilà!
Visti the Paffi website to see it all in action.
Credits: Design Luca Franceschetti – Development Nicolas Bouvet
