This project is an independent technical case study and product concept exploring the translation of Gizmo’s mobile-native identity into a modern, interactive web experience built with cutting-edge frontend technologies to deliver immersive visuals, smooth animations, and a strong product-oriented narrative.
This website was independently built by me as a professional showcase for atma science company. It was created on my own initiative and is not affiliated with, commissioned by, or officially endorsed by the company.
The project represents an evolution of their existing page, https://gizmo.party/, and explores the potential of expanding Gizmo beyond a mobile-only experience into a full-featured web presence.
⚠️ This project is not open source.
- Demo: https://gizmo-home.netlify.app/
- Existing Product Page: https://gizmo.party/
This project was developed as a conceptual and technical update to Gizmo’s current web presence, translating the product’s vision into a scalable, high-performance website.
While Gizmo is currently available as a mobile application on Android and iOS, this project implicitly demonstrates how its experience, brand, and interactions can be extended into the web ecosystem—bridging mobile and web through consistent design, animation, and performance standards.
Next.js — React framework for production-ready, high-performance web applications.
TypeScript — Strong static typing for scalable, maintainable, and reliable codebases.
Tailwind CSS — Utility-first CSS framework for rapid UI development and consistent design systems.
Three.js — JavaScript 3D library for real-time rendering and immersive visual experiences in the browser.
GSAP — High-performance animation library for smooth, complex, and timeline-based motion.
- Responsive, mobile-first layout
- Interactive 3D elements using Three.js
- Smooth, cinematic animations powered by GSAP
- Modern UI built with Tailwind CSS
- Scalable architecture using Next.js and TypeScript
- Conceptual alignment with a mobile-first product ecosystem
├── app/ # Next.js App Router
├── components/ # Reusable UI and 3D components
├── public/ # Static assets
├── styles/ # Global styles and Tailwind setup
├── tsconfig.json # TypeScript configuration
├── next.config.js # Next.js configuration
└── package.json # Project dependencies and scriptsThis project focuses on performance, visual storytelling, and extensibility. It implicitly demonstrates how a mobile-only product can evolve into a cohesive web experience—maintaining brand identity while unlocking new reach, discoverability, and interaction possibilities on the web.
- This website was created independently and voluntarily.
- It is intended solely as a professional and conceptual showcase.
- The source code is private and not available for public use.
All rights reserved. This project is not licensed for redistribution, modification, or commercial use.