Le Monde Usagé

The digital hub for Le Monde Usagé ("The Used World") — a collaborative, multimedia art project by the Cloueless Collectif & GVA Production. It tells the story of un jardin sur le déclin (a garden in decline) as a metaphor for creating in the face of ecological and social collapse, asking: quel sens pour la création dans un monde qui brûle ?

« Les cataclysmes, l'assèchement des sols, l'inversion du ciel et la montée des pois mangetouts… Le pronostic est fatal, la fin du monde est pour bientôt. »

The site gathers the project's multiple formats — a documentary-fiction film, an interactive playable archive, exhibitions and events — under one hand-crafted, sage-green collage aesthetic.

Live: https://monde-usage.game.gabvdl.xyz/

Sections

• Accueil (/) — animated landing page with the project's tagline and navigation.
• Qui sommes nous (/contact) — the four-member collective and their roles.
• Démarche (/about) — the collaborative writing protocol, the garden narrative, and the exhibition reconstructed digitally inside the game.
• Le film des légumes (/le-film-des-legumes) — a 21-minute docu-fiction co-written with amateur actors during a residency at the Ferme d'Aulot.
• Le monde en carton (/le-monde-en-carton) — an interactive "archive vivante" of 80+ collectively-improvised video fragments, hosted on itch.io.
• Actualités (/actualites) — a zigzag timeline of past and upcoming installations, exhibitions and screenings.

The collective

• Céleste Vidal-Ayrinhac — motion design, game design, sound composition
• Lucia Augé — video, scenography, illustration
• Céleste Le Du — animation, graphics
• Gabriel Vidal-Ayrinhac — software engineering, game development

Tech stack

• React 18 + TypeScript + Vite 5 (SPA, react-router-dom v6)
• GSAP (@gsap/react) + react-transition-group for staggered animations; use-sound for audio interactions
• Tailwind CSS 3 with the hand-drawn Underdog typeface; monochrome sage/teal palette over white
• react-helmet for per-page meta; video.js for the film player
• Self-hosted Matomo analytics (analytics.gabvdl.xyz, idSite 5)
• A custom sitemap generator (scripts/generate-sitemap.ts)

Development

npm install
npm run dev      # Vite dev server with HMR
npm run build    # type-check + production build to dist/
npm run preview  # preview the production build

Deployment

Hosted on the homelab (raspy2 / zipgo) under *.game.gabvdl.xyz with Let's Encrypt TLS. vercel.json permanently redirects the old Vercel domain to the self-hosted monde-usage.game.gabvdl.xyz.