The Paffi portfolio website celebrates 10 years of outstanding projects created by Silvia and Giulia, two of Paffi’s co-founders and brand designers.
Our vision for this site had two important objectives. It’s about creating a seamless and enjoyable browsing experience and reflecting Paffi’s vibrant and playful design approach.
For the homepage slider, we wanted something dynamic and engaging while focusing on each project’s unique assets. This led to the idea of a rotating, modular slider that displayed the logotype and brand colors of each featured project. I named it “Totem Slider”.
It probably reminds me of some Escher-like orthographic structures I’ve come across over the years. Here are some examples:


Graphic art and motion graphics have always been a rich source of inspiration for this type of design.
Totem Slider Decomposition: Vertical Cube Slider
Now let’s break down the Totem slider.
We’ll start with a simple vertical slider made of cubes. Although it doesn’t look particularly complex, the real challenge lies in creating very smooth interactions. We aim to create a sense of springiness and playfulness, which are the keys to achieving a sense of dynamism.
Next, apply a rotation to the cube with a subtle scaling effect based on its distance from the center.
Next, transform the cube by rotating its XZ component around the center. If the cube has a sufficient number of vertices, this transformation will appear smooth and the slider will have more fluidity overall.
To achieve a very smooth look, we introduce subtle distortions that give the cubes a bouncy, bouncy feel.
Once the core interaction is complete, make the cube shine. However, rather than being diamond-like, we’re aiming for a “low-poly” aesthetic with simple lighting and soft gradients.
To achieve this, we’ll add a subtle vertical gradient to the cube.
Next, apply some simple diffuse lighting to give the cube a little more pop. The light source is placed slightly to the right of the camera, making the left side of the cube appear darker, adding depth and contrast to the overall look.
The final touch is a subtle fade at the top and bottom of the screen. This effect softens the edges of the slider, making for smoother transitions as the cube moves in and out of view.
After tweaking the colors, lighting, and elasticity, here’s the final result:
Gradients and lighting are kept subtle, adding depth and softness to balance out the sharp edges of the cube. The same concept applies to the bouncy animation, which contrasts nicely with the rigidity of the cube.
here we go!

To see it all in action, visit Paffi’s website.
Credit: Design Luca Franceschetti – Development Nicolas Bouvet