Role

Lead Product Designer

Timeline

Mar - Sep 2023

Tools

Figma

Adobe Illustrator

Clair-Obscur emerges as an immersive interactive experience dedicated to presenting characters in a sophisticated visual universe. This web project, developed with React and TypeScript, offers an elegant interface allowing users to explore a gallery of eight unique characters—Esquie, Gustave, Lune, Maelle, Monoco, Renoir, Sciel, and Verso—each with their own visual and narrative identity. The main objective was to create a modern and responsive platform that highlights these characters through fluid navigation and captivating visual transitions, offering a refined and engaging user experience.


The technical architecture relies on a modern stack including TanStack Router for route management, Tailwind CSS for styling, and Vite as a bundler, ensuring optimal performance and simplified maintenance. The interface uses background videos that activate on hover, creating a sophisticated visual dynamic with smooth CSS transitions and subtle animations. The design adopts a minimalist approach with a contrasting color palette (black and white) and elegant typography, emphasizing readability and accessibility while maintaining a premium visual aesthetic.

Clair-Obscur emerges as an immersive interactive experience dedicated to presenting characters in a sophisticated visual universe. This web project, developed with React and TypeScript, offers an elegant interface allowing users to explore a gallery of eight unique characters—Esquie, Gustave, Lune, Maelle, Monoco, Renoir, Sciel, and Verso—each with their own visual and narrative identity. The main objective was to create a modern and responsive platform that highlights these characters through fluid navigation and captivating visual transitions, offering a refined and engaging user experience.


The technical architecture relies on a modern stack including TanStack Router for route management, Tailwind CSS for styling, and Vite as a bundler, ensuring optimal performance and simplified maintenance. The interface uses background videos that activate on hover, creating a sophisticated visual dynamic with smooth CSS transitions and subtle animations. The design adopts a minimalist approach with a contrasting color palette (black and white) and elegant typography, emphasizing readability and accessibility while maintaining a premium visual aesthetic.

Technical challenges included optimizing video performance, managing complex state transitions, and implementing a responsive interface that adapts perfectly to all devices. The final result demonstrates mastery of modern web technologies, with particular attention paid to implementation details, media asset optimization, and the creation of a consistent and immersive user experience. This project perfectly illustrates the ability to design and develop sophisticated web interfaces that combine modern aesthetics with robust technical functionality.

Get in contact at:

axelhusson.pro@gmail.com

Get in contact at:

axelhusson.pro@gmail.com

Have a project

Have a project

Have a project

Let my expertise as a seasoned developer transform your ideas into robust and innovative solutions. I specialize in bringing cutting-edge technology and functionality to the table, ensuring your project surpasses expectations.

© Husson Axel, All Rights Reserved 2025.