3-D-Time-Travel-Machine

ERA 3
ERA 2
ERA 4
ERA 1
ERA 5
Landing page

Inspiration

We wanted to create more than just a website—we wanted to build an experience. Inspired by science fiction, time-travel movies, and futuristic user interfaces, we imagined what it would feel like to step inside a time machine and explore different eras of human civilization. Our goal was to combine immersive storytelling, modern web technologies, and cinematic visuals into a single interactive journey.

What it does

3-D Time Travel Machine is a futuristic, cinematic 3D web experience that takes users on an interactive journey through time. Starting from the Stone Age, visitors travel through the Medieval Age, the Present Era, and finally the futuristic world of the year 2200. The website features smooth scrolling, animated transitions, interactive 3D visuals, glassmorphism UI, neon lighting effects, and responsive design to deliver a premium sci-fi experience across all devices.

How we built it

We developed the project using modern frontend technologies:

HTML5 for semantic page structure CSS3 for responsive layouts, glassmorphism, neon effects, and animations Vanilla JavaScript for application logic and interactions Three.js to create immersive 3D visuals and animated scenes GSAP for cinematic animations and seamless transitions Lenis for buttery-smooth scrolling Interactive mouse parallax, floating particles, and responsive UI to enhance user engagement Challenges we ran into Optimizing Three.js scenes for smooth performance across desktop and mobile devices. Synchronizing GSAP animations with smooth scrolling to maintain a cinematic experience. Creating visually appealing glassmorphism effects while preserving readability. Balancing high-quality visuals with fast loading times. Ensuring responsiveness without compromising the immersive design. Accomplishments that we're proud of Built a complete cinematic single-page 3D experience from scratch. Successfully combined Three.js, GSAP, and Lenis into a seamless interactive website. Designed a futuristic UI with glassmorphism and neon aesthetics. Created engaging era-based storytelling that keeps users immersed. Delivered a fully responsive experience across desktop, tablet, and mobile devices. Developed a premium-looking hackathon project with smooth animations and polished user experience. What we learned

Throughout this project, we gained practical experience with:

Building interactive 3D experiences using Three.js. Creating smooth, high-performance animations with GSAP. Implementing modern scrolling techniques using Lenis. Optimizing animation performance for different devices. Designing immersive user interfaces with glassmorphism and futuristic visual elements. Improving collaboration, UI/UX thinking, and creative storytelling through web development. What's next for 3-D-Time-Travel-Machine

Our future roadmap includes:

Adding more historical and futuristic eras to explore. Introducing interactive mini-games and challenges in each timeline. Implementing WebXR support for Virtual Reality (VR) experiences. Adding realistic 3D models, sound effects, and cinematic background music. Including AI-powered narration and interactive storytelling. Enhancing accessibility and performance for an even wider audience. Expanding the project into a fully immersive educational platform for learning history through interactive experiences.