Cinematic 3D Food Ordering Landing

Замовник: AI | Опубліковано: 22.02.2026

Transform our digital ordering flow into a cinematic, mobile-first showcase. The heart of the page is a 60 fps 3D scroll canvas that reveals hyper-realistic food items as the user scrolls, so visual polish is non-negotiable. Every texture, lighting cue, and transition must feel as mouth-watering as the dishes themselves, while remaining buttery smooth on mid-range phones. Tech stack is set: Next.js 15 for the framework, Framer Motion for micro-interactions, Tailwind CSS for styling, and my custom <canvas> renderer with DPR clamping to guarantee lag-free playback. The layout leans on glassmorphism and a low-profile flavor carousel to keep the interface light yet premium. When a user decides to order, a single tap should launch WhatsApp with a pre-filled, personalized checkout message. I’ve also planned a scratch-card mini-game that reveals promo codes to push conversions—think quick, haptic feedback and instant reward. Deliverables 1. Pixel-perfect, production-ready Next.js 15 landing page 2. High-fidelity 3D scroll canvas showcasing realistic food items at 60 fps 3. Gamified scratch-card component with promo logic hooks 4. Seamless WhatsApp deep-link checkout flow 5. Clean, reusable Tailwind components and Framer Motion animations 6. Vercel-ready repository with root-level architecture and one-click deploy Acceptance criteria • All above sections render at >55 fps on iPhone 12/Android 11 equivalents • Visual fidelity matches provided food renders down to color grading • Scroll scrubbing stays frame-accurate with no drifting • Scratch card reveals code only once per session and logs event • WhatsApp link pre-populates order details and tracks UTM parameters DM if you need the Figma file or sample renders; otherwise, show me something delicious.