Free course advice: Grasp JavaScript animation with GSAP by 34 free video classes, step-by-step tasks, and hands-on demos. Enroll now →
A pioneer of contemporary jewellery, Raymond Templier (1891–1968) stays one of many defining figures of the Artwork Deco avant-garde. Born right into a household of Parisian jewelers, he rejected decoration for geometry, symmetry, and stability — creating items that transcended adornment to turn out to be pure expressions of kind and light-weight.
His compositions — intersecting circles, polished planes, and contrasting supplies comparable to platinum, onyx, and lacquer — embodied a radical imaginative and prescient: jewellery as structure in miniature.
A founding member of the Union des Artistes Modernes (UAM) alongside figures like Le Corbusier and Charlotte Perriand, he championed a brand new aesthetic grounded in performance and inventive integrity. His legacy continues to affect modern designers who see jewellery as each an object of artwork and design.
Design
At this time, because the Templier household reissues a choice of his most emblematic creations, they entrusted us with the design and improvement of the Maison’s new Shopify web site — a undertaking conceived as each gallery and archive, bridging digital expertise and inventive legacy.
The redesign is grounded in a brand new visible id and artwork course that reinterprets the model’s heritage by a recent lens. Reasonably than counting on the acquainted opposition of custom versus modernity, the undertaking seeks a timeless modernist stability — a recent kind that breathes the spirit of its origins with out imitation.
The positioning is structured like a digital gallery, the place every jewel is handled as an paintings: photographed with restrained class, that reveal the play of volumes, supplies, and reflections. The photographic course embraces movement, utilizing gradual, deliberate shifts in perspective to underscore the architectural nature of Templier’s compositions — strong but fluid, rational but 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 easy and steady; pages dissolve into each other by reveals, smooth fades, and shifting reflections — a visible rhythm that mirrors the round motifs and interaction of sunshine that outlined the jeweler’s modernist language.
The result’s a digital atmosphere that honors Templier’s legacy by restraint, readability, and emotion — a recent translation of his perception that trendy magnificence resides not in decoration, however within the purity of kind and the concord of movement.
Tech Stack & Structure
Quentin: Because the developer on this undertaking, my function was to developed a customizable e-commerce platform, working carefully with the design and shopper groups.
The positioning is constructed on Shopify (native liquid templates) with a customized theme developed by JC Suzanne, based mostly on Daybreak. To boost the person expertise, we added at this tradition theme, a contemporary front-end layer:
- piecesjs as light-weight JavaScript framework to handle native internet elements
- GSAP for easy and performant animations
- Lenis for scroll administration
- Swup for web page transitions
This setup ensures maintainability, flexibility, and robust efficiency throughout gadgets.
Customizable Editorial Pages
We constructed a customizable system utilizing Shopify’s sections that lets the shopper compose editorial pages precisely as they need. Every web page is assembled from a do-it-yourself library of sections, with the power so as to add blocks, reorder them, and see the actual‑time visible outcome whereas filling fields. This strategy preserves the design system whereas giving full editorial management and modularity.
The hero part of this template additionally permits the shopper to creatively play with patterns whereas at all times respecting the general design system. The web page is constructed so the shopper can replace and handle content material straight from the Shopify admin, utilizing customized blocks and dynamic sections. This empowers the shopper with editorial management and inventive flexibility with out compromising the positioning’s visible consistency.
Web page Entrance Animations
A particular consideration was given to the doorway animations for every web page, with transitions designed to match the hero part’s temper. Probably the most pleasant to develop was the product web page animation, which incorporates a mirror impact that provides a particular and dynamic reveal as customers land on the web page.
Loader Animation
One other enjoyable aspect is the customized loading animation, constructed with GSAP to introduce the model by movement. The thought behind this loader was to stay discreet, whereas subtly highlighting the standard of the shopper’s merchandise. The animation units the tone for the positioning expertise with out overwhelming the person.
Selecting the Proper Structure
At Index, we consider native Shopify (Liquid) vs. headless in the beginning of every undertaking. Generally, native already offers us the entrance‑finish freedom we want. For us, headless is reserved for particular constraints or integrations.
For Templier, native was the precise selection: sooner to construct, steady, and safe, whereas retaining full inventive management over the expertise. We use a boilerplate that improves with every undertaking and lets us push the entrance finish: piecesjs for internet elements, Swup for web page transitions, GSAP for animations, and PostCSS/Tailwind for types. A crafted, excessive‑performing retailer that’s simple to take care of.
