Project Overview
uSeek is a comprehensive, narrative-driven web campaign designed as a multi-hour interactive pirate puzzle. Created as a group project for the university course "Medieninformatik 1," it was selected as the best website of the year among all participating classes. The site guides users through a story, presenting challenges that require code-breaking, visual analysis, and interactive manipulation of page elements. The project integrates advanced front-end technologies like GSAP for scroll-triggered parallax and pinning, and Spline for embedding interactive 3D models (like the lock and treasure chest). It also features a custom preloader, a responsive UI framework, and a persistent light/dark mode system.
Tech Stack
- GSAP (ScrollTrigger)
- Spline (3D Embed)
- Lenis (Smooth Scrolling)
- Bootstrap 5
- Vanilla JavaScript
- HTML5 / CSS3
- Responsive Design
Key Features
- Cinematic Preloader: A custom, GSAP-animated loading screen that creates an engaging transition into the main site content.
- Interactive 3D Integration: Uses Spline to embed and interact with custom 3D assets (a treasure chest lock, the chest itself) directly within the webpage.
- Advanced Scroll Animations: Implements multiple GSAP ScrollTrigger timelines for pinning, horizontal navigation parallax, and complex background movements.
- Custom UI & Branding: Features a unique pirate-themed design with custom cursor, responsive typography, and dynamic CSS styling for light/dark mode switching.
- Utility Framework: Built upon a custom CSS framework to simplify layout and speed up responsive development.
- Integrated Puzzles: Contains functional, embedded puzzle mechanics such as drawing on a star map and an X-ray effect for revealing hidden clues.