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.