Discovery Benin

The Project

Benin’s cultural heritage, particularly the artifacts of the Kingdom of Dahomey, remains difficult to access for the general public and international researchers. This project aims to create an immersive digital archive that preserves and enhances this heritage through an interactive experience. The goal is to make Benin’s history and culture accessible to a wide audience, while providing researchers and art enthusiasts with a detailed and multilingual exploration platform.

Technical Stack & Tools

• Frontend: Next.js 16 + React 19 for a modern application architecture with App Router
• 3D Graphics: Three.js + React Three Fiber for interactive 3D artifacts
• Animation: Framer Motion for smooth and staggered animations
• Styling: Tailwind CSS 4 for efficient utility-first styling
• Deployment: Cloudflare Workers for global distribution via edge computing
• i18n: Custom Context API for multilingual support (FR/EN/YO/FO)

Key Features

• Immersive digital archive with 5 thematic folders
• Interactive 3D viewer for artifacts
• Chapter-based storytelling system with multimedia content
• Multilingual support including local languages (Yoruba, Fon)

Technical Challenges & Solutions

Challenge 1 - Custom Cursor Performance:

Situation: Need for a smooth royal cursor (récade) without impacting scrolling Task: Implement 60fps tracking with interpolation Action: Used requestAnimationFrame + lerp with event delegation Result: Smooth cursor without impacting scroll performance

Challenge 2 - Realistic 3D Integration:

Situation: Display 3D models (.glb) with realistic lighting Task: Create a React Three Fiber component with contact shadows Action: Studio environment preset + restricted OrbitControls + auto-rotation Result: Immersive 3D visualization with consistent lighting