A premium, interactive 3D scrollytelling e-commerce website for Maaza, featuring fluid animations, high-quality image sequences, and a dynamic product showcase.
- 3D Scrollytelling: High-performance canvas-based image sequence animation mapped to scroll progress.
- Dynamic Themes: Real-time theme switching (colors and gradients) based on the active product.
- Fast Image Loading: Parallelized image preloading with race-condition handling for smooth transitions.
- Responsive Design: Fully optimized for mobile, tablet, and desktop experiences.
- Premium Aesthetics: Glassmorphism, modern typography, and smooth Framer Motion transitions.
- Framework: Next.js 14+ (App Router)
- Animation: Framer Motion
- Styling: Tailwind CSS
- Language: TypeScript
- Deployment: Vercel
- Node.js 18.x or later
- npm or yarn
-
Clone the repository:
git clone https://github.com/naveenkumar-sys/maaza.git cd maaza -
Install dependencies:
npm install
-
Run the development server:
npm run dev
Open http://localhost:3000 with your browser to see the result.
/app: Next.js App Router pages and global styles./components: Reusable UI components including the 3D scroll engine./data: Product configurations and metadata./public: Static assets, including the 3D frame sequences.
The project is optimized for Vercel.
- Static Export: Uses
output: "export"for high-performance static hosting. - Automatic Builds: Pushing to the
mainbranch triggers an automatic deployment.
This project is for demonstration purposes. All brand assets belong to their respective owners.
Developed with ❤️ by Naveenkumar R