Introduction
Palmer Dinnerware creates ceramic pieces that bring life to dining tables around the world. Our challenge was to create a digital experience that reflects the same intentionality, refinement and tactility as the products themselves. With a diverse audience in mind, from Michelin-starred chefs to design-savvy consumers, we set out to design a web experience that was as immersive as it was functional.
A canvas, not a catalog
From the start, we wanted to move away from conventional e-commerce layouts. Instead, we envisioned a single canvas: a browsing experience where users could scroll and drag their way through Palmer’s full collection. This design not only offers a more organic, visual-first exploration but also gives sales representatives a beautiful, intuitive tool to walk clients through the collection.
“We didn’t want users to click through a catalog, we wanted them to explore a canvas”
Each product can be filtered by color, shape or size without leaving the main view. To enable this, we attached data attributes to every product, referencing its collection, color, type and size, and built custom filtering algorithms around that structure.
For users who prefer a more structured view, we added a toggle to switch to a traditional e-commerce grid layout. Once a user selects a specific collection, they enter a lookbook experience with horizontal scroll, immersive visuals and curated storytelling.
Bringing the interaction to life
The most technically complex part of the project was the interactive canvas browsing experience. We collaborated with French Creative Developer Alexis Séjourné to bring this concept to life.
Motion played a key role in creating a sense of tactility and pace. From soft easing to fluid transitions, every detail was tuned to feel deliberate and calm. For example: the product focus state is animated using GSAP’s Flip plugin, allowing selected plates to move and scale fluidly to their final position.
To support various user gestures (scroll / drag / click), the horizontal carousel inside the ‘grid view’ uses a custom requestAnimationFrame loop, syncing drag, scroll and button controls while keeping the marquees aligned.
Technologies
The site was built using Webflow as both CMS and visual layout system. While Webflow handled content management and structural setup, we overrode default interactions with custom JavaScript to enable the dynamic canvas logic and filtering functionality.
On the front end, we used Vanilla JS for full control, powered by GSAP and its Flip and SplitText plugins to choreograph seamless transitions and state changes, especially for the product focus animation.
Because the site contains over 150 product images, performance was a top priority. All assets were optimized in WebP format and pre-resized to 800×800 pixels to ensure sharp visuals without slowing load times. Deployed as a static site over a global CDN, the result is a fast, reliable experience across all devices.
Company Info
UNCOMMON is a creative studio based in Enschede, Netherlands.. To “Redefine the Norm™”, that’s our belief, it’s the foundation of everything we do. At its core, it means breaking with conventions, think creatively, push boundaries and creating unique experiences. It's an invitation to reconsider the status quo and strive for innovation and creativity.