Free course recommendation: Master JavaScript animation with GSAP through 34 free video lessons, step-by-step projects, and hands-on demos. Enroll now →
A pioneer of modern jewelry, Raymond Templier (1891–1968) remains one of the defining figures of the Art Deco avant-garde. Born into a family of Parisian jewelers, he rejected ornament for geometry, symmetry, and balance — creating pieces that transcended adornment to become pure expressions of form and light.
His compositions — intersecting circles, polished planes, and contrasting materials such as platinum, onyx, and lacquer — embodied a radical vision: jewelry as architecture in miniature.
A founding member of the Union des Artistes Modernes (UAM) alongside figures like Le Corbusier and Charlotte Perriand, he championed a new aesthetic grounded in functionality and artistic integrity. His legacy continues to influence contemporary designers who see jewelry as both an object of art and design.
Learn modern web animation using GSAP 3 with 34 hands-on video lessons and practical projects — perfect for all skill levels.
Design
Today, as the Templier family reissues a selection of his most emblematic creations, they entrusted us with the design and development of the Maison’s new Shopify website — a project conceived as both gallery and archive, bridging digital experience and artistic legacy.
The redesign is grounded in a new visual identity and art direction that reinterprets the brand’s heritage through a contemporary lens. Rather than relying on the familiar opposition of tradition versus modernity, the project seeks a timeless modernist balance — a contemporary form that breathes the spirit of its origins without imitation.
The site is structured like a virtual gallery, where each jewel is treated as an artwork: photographed with restrained elegance, that reveal the play of volumes, materials, and reflections. The photographic direction embraces motion, using slow, deliberate shifts in perspective to underscore the architectural nature of Templier’s compositions — solid yet fluid, rational yet sensual.
In dialogue with this imagery, the interface unfolds with choreographed transitions of refractions that echo the architectural essence of Templier’s work. Scrolling feels smooth and continuous; pages dissolve into one another through reveals, soft fades, and shifting reflections — a visual rhythm that mirrors the circular motifs and interplay of light that defined the jeweler’s modernist language.
The result is a digital environment that honors Templier’s legacy through restraint, clarity, and emotion — a contemporary translation of his belief that modern beauty resides not in ornament, but in the purity of form and the harmony of motion.
Tech Stack & Architecture
Quentin: As the developer on this project, my role was to developed a customizable e-commerce platform, working closely with the design and client teams.
The site is built on Shopify (native liquid templates) with a custom theme developed by JC Suzanne, based on Dawn. To enhance the user experience, we added at this custom theme, a modern front-end layer:
- piecesjs as lightweight JavaScript framework to manage native web components
- GSAP for smooth and performant animations
- Lenis for scroll management
- Swup for page transitions
This setup ensures maintainability, flexibility, and strong performance across devices.
Customizable Editorial Pages
We built a customizable system using Shopify’s sections that lets the client compose editorial pages exactly as they want. Each page is assembled from a homemade library of sections, with the ability to add blocks, reorder them, and see the real‑time visual result while filling fields. This approach preserves the design system while giving full editorial control and modularity.
The hero section of this template also allows the client to creatively play with patterns while always respecting the overall design system. The page is built so the client can update and manage content directly from the Shopify admin, using custom blocks and dynamic sections. This empowers the client with editorial control and creative flexibility without compromising the site’s visual consistency.
Page Entrance Animations
A special attention was given to the entrance animations for each page, with transitions designed to match the hero section’s mood. One of the most enjoyable to develop was the product page animation, which features a mirror effect that adds a distinctive and dynamic reveal as users land on the page.
Loader Animation
Another fun element is the custom loading animation, built with GSAP to introduce the brand through motion. The idea behind this loader was to remain discreet, while subtly highlighting the quality of the client’s products. The animation sets the tone for the site experience without overwhelming the user.
Choosing the Right Architecture
At Index, we evaluate native Shopify (Liquid) vs. headless at the start of each project. In most cases, native already gives us the front‑end freedom we need. For us, headless is reserved for specific constraints or integrations.
For Templier, native was the right choice: faster to build, stable, and secure, while keeping full creative control over the experience. We use a boilerplate that improves with each project and lets us push the front end: piecesjs for web components, Swup for page transitions, GSAP for animations, and PostCSS/Tailwind for styles. A crafted, high‑performing store that’s easy to maintain.
