Amul Kool Gold is a fully-functional concept storefront built around a premium dairy beverage line, designed to demonstrate complete front-end product engineering — not just a static landing page. Unlike most portfolio pieces that stop at a hero section and some scroll copy, this ships an entire simulated commerce loop: a cinematic scroll-driven hero, a full flavour catalog, a working cart, a three-step checkout, and a branded trial-payment intercept that proves the flow works end to end without processing a real transaction. The goal is a site that reads as a shipped commercial product, not an AI-generated template.
This is an independent concept design built for portfolio purposes. It is not affiliated with, endorsed by, or representing Amul / GCMMF.
🔗 amul-kool-gold-website.vercel.app
Click all the way through — scroll the hero, browse the catalog, add to cart, and complete the full checkout flow to the simulated receipt.
- Cinematic scroll hero — frame-sequence animation scrubbed directly by scroll position, not a looping video, with priority-loaded initial frames and silent background preloading for the rest
- Flavour catalog — four flavours (Exotic Rose, Mango, Kesar Saffron, Elaichi) with consistent premium photography, pack size selection (200ml, Pack of 6, Pack of 12), live quantity stepper, and genuinely different pricing per tier
- Working cart — React Context-based cart state persistent across navigation, live subtotal recalculation, remove-item support, empty-cart state, and a continue-shopping path so users are never dead-ended
- Three-step checkout — delivery details with inline field validation, conditional payment fields per method (UPI, Card, Cash on Delivery), and a full order review with editable steps
- Trial payment intercept — clearly-branded modal that confirms the entire checkout flow completed successfully without processing or implying a real transaction
- Order simulation and receipt — auto-generated order ID, full delivery and payment recap, itemized receipt with subtotal, delivery fee, and grand total
- Nutrition and trust section — editorial-styled nutrition facts card and brand pillars
- Testimonials and store locator — curated customer stories with star ratings and city-chip quick search
| Technology | Role |
|---|---|
| React | Frontend framework |
| TypeScript | Type safety |
| Vite | Build tool |
| Tailwind CSS | Styling |
| Framer Motion | Animations and transitions |
| React Context | Cart state management across routes |
| Custom scroll-frame hook | Frame-sequence animation engine |
| Google AI Studio | Agentic build and edit workflow |
| Vercel | Deployment |
| GitHub | Version control |
- A custom scroll-frame hook maps scroll progress directly to frame index, driving a preloaded image sequence — no video, no CSS animation, no dependency on browser playback APIs
- Priority-batched asset loading renders the first frames instantly while streaming the remainder silently in the background, producing a zero-spinner experience at page load
- React Context manages cart state globally and persists it across route changes without any external storage or page reload
- The navbar's transparent-to-frosted-glass transition is driven by the same scroll-progress value the hero animation uses — creating one continuous scene rather than two stacked sections
- Checkout step state is fully controlled and bidirectionally editable at every point in the three-step flow
1. Scroll-driven canvas animation failing in production The frame-sequence animation worked in dev preview but silently failed in the production build. Diagnosed the failure down to asset-path and rendering-layer specifics, then rebuilt frame rendering on a preloaded image-stack pattern with explicit scroll-progress mapping, verified directly against the deployed Vercel URL rather than the editor preview.
2. Static mockup versus real commerce logic Most portfolio e-commerce pieces look finished but break the moment you click anything. Built complete cart, checkout, and order-simulation logic with real React Context state management — not decorative UI that only looks interactive.
3. Simulated checkout without deceptive UX Simulating a checkout risks looking either broken or intentionally misleading. An explicit, clearly-branded trial-payment intercept modal confirms the flow succeeded without processing or implying a real transaction.
4. Consistent AI-generated product photography AI-generated visuals often look inconsistent across a single product line. Enforced a shared photography direction and treatment standard across all four flavour assets so the catalog reads as one coherent shoot.
5. Navbar scene-continuous scroll transition Generic navbar scroll transitions feel templated and disconnected from the hero beneath them. Tied the navbar's transparent-to-glass transition directly to the hero's own scroll-progress value, creating one continuous scene instead of two stacked sections.
Prince Patel — AI-Powered Product Developer
- 🌐 Portfolio: prince-patel-portfolio.vercel.app
- 🐙 GitHub: github.com/Pro-Prince
- 𝕏 X: @Pro_Prince_1
- 💼 LinkedIn: linkedin.com/in/prince-patel476
This project is licensed under the MIT License.