Interactive map of local producers
If you stop at a TotalEnergies station, you'll likely spot screens in the local products section — I was in charge of building this application. Developed at Artefact 3000 for Argedis, a TotalEnergies subsidiary, it's a nationwide application showcasing local partner producers, deployed on hundreds of tablets across France.
Deployed on hundreds of tablets in stations across France, to spotlight local partner producers. Each region has its map, its visual universe, its producers.
An interface built for everyone. Simple, fluid, immediate. Station visitors instantly understand who the nearby local producers are, where they're located, and what they make.
Each region has its own world. The map shifts with the territory. Colors change. Icons change. Every region has its own visual identity — a serious design effort to root the user in their land.
Producer to producer. The experience is built for browsing: one tap, and you're onto the next. Simple, accessible, frictionless — even for users less comfortable with technology.
By the numbers
× 100s
Tablets in station
FR · EN
Bilingual on the fly
0 network
100% offline app
2024 +
Continuously maintained
Animated Lottie, regional palette, producers geolocated on the map.
Each region has its own world. The main map image is an integrated Lottie — an animated background with local cultural references — that changes entirely from one region to the next: Provence-Alpes-Côte d'Azur in golden tones, Bourgogne-Franche-Comté in deep purples, Bretagne in ocean blues.
A radial gradient dynamically adapts the background to the Lottie's dominant color. On the map, each producer is positioned at their exact location on the territory, connected to the TotalEnergies logo by dotted lines. An animated hand invites users to browse the producers clockwise.
One identity per region
Full profile, touch navigation, FR/EN switch without reloading.
On tapping a portrait, the map fades out and gives way to the full profile: photo, story, products, distance from the station. Previous and next always within reach.
Navigating between producers combines a crossfade on the photo (Framer Motion) and a fluid animation on the container height, which adjusts to the length of each producer's text.
The FR / EN toggle doesn't reload the page — both versions are loaded when the app opens.
Touch interactions
◀ ▶
Previous / next
FR ⇄ EN
Without reloading
↕
Animated height
Fig.04 — The same content in English, without reloading
FR
ENFor developers and recruiters: why a PWA converted to APK, why full SSG, how to animate a map turning into a profile card, and how to switch FR / EN without reloading.
On tapping a producer, the large Lottie map shrinks and moves to exactly match the producer card's position, then fades out. The producer card appears at the same instant with a slight scale and coordinated delay via Framer Motion — so both cards are never visible simultaneously and the transition feels continuous.
Two simultaneous effects: a photo crossfade (the next photo rises in opacity via Framer Motion as the current one fades) and a height animation on the text container. Since `height: auto` can't be animated natively, a useRef measures the actual content height on each change and updates a state in pixels — the CSS transition then takes over.
Each producer is positioned via x/y coordinates stored in Contentful. The system adapts to all tablet resolutions for accurate rendering on every regional map.
PWAs are no longer accepted on Android — and soon won't be on iOS either. Installing the app as a simple web app was no longer possible. The application had to be converted to a native APK via a wrapper, while ensuring the behavior remained identical — especially offline mode.
All regional pages are pre-generated at build time via generateStaticParams — the App Router equivalent of the old getStaticProps / getStaticPaths. This is also what makes the APK viable offline: all data, images, and content are bundled at build time. Producer switching, FR/EN navigation — everything is instant, without any network call.
FR/EN switching doesn't go through the URL. Both versions of the Contentful data are loaded simultaneously at initialization. A simple client state toggles between them — invisible to the user, instant on screen.
The Contentful architecture lets non-developer teams manage all content — adding producers, updating text, photos, Lottie files — without any technical intervention.
Project led at Artefact 3000, in collaboration with a design team and a product manager.
Hundreds of TotalEnergies stations equipped across France. Local producers have a permanent digital showcase, visible to millions of travelers. A living product, maintained and enriched continuously since 2024.
A touch app to build?
I design and build high-performance static apps, deployable offline on tablets or kiosks.
Static Next.js, Contentful, Framer Motion, APK conversion: this project laid the groundwork I can bring to your next build.