Cinematic Smartphone Experience

High-end studio product photograph of iPhone, fully assembled and intact, floating dead center against a seamless matte light-grey studio background. Straight-on view, perfectly level camera, soft even studio lighting, one subtle soft shadow directly beneath the product, photorealistic, ultra sharp, high detail. Keep the product small enough in frame that there is generous empty space on every side. No text, no watermark, no hands, no props, no brand logos. Landscape 16:9.

High-end studio product photograph of the same iphone as a clean exploded view: the outer casing separated and every major internal component pulled apart and floating in an organized, evenly spaced arrangement along one axis, like a technical teardown render. Same straight-on view, same perfectly level camera, same soft even studio lighting, same seamless matte light-grey studio background, one subtle soft shadow beneath. The core body of the product stays in the exact center at the same size, with the parts spreading outward around it. Photorealistic, ultra sharp, high detail. No text, no watermark, no hands, no props, no brand logos. Landscape 16:9.

Convert your generated video into optimized WebP animation frames using: https://ezgif.com/video-to-webp Upload the product video. Convert the video into WebP. Optimize the quality and file size. Download the converted output. Extract or prepare individual WebP frames for the scroll-driven animation sequence.

project-root/ ├── public/ │ └── videos/ │ ├── frames_video1/ │ │ ├── frame_0001.webp │ │ ├── frame_0002.webp │ │ └── ... │ │ │ ├── frames_video2/ │ │ ├── frame_0001.webp │ │ ├── frame_0002.webp │ │ └── ... │ │ │ └── frames_video3/ │ ├── frame_0001.webp │ ├── frame_0002.webp │ └── ... │ └── src/ └── components/ └── ScrollFrameAnimation.tsx

You are a senior Full-Stack Web Developer specializing in Next.js 14+ / React, Tailwind CSS, and high-performance interactive product websites. Build a premium, cinematic, scroll-driven landing page for a mobile phone store named "Mobile Store". The store sells smartphones ranging from ₹10,000 to ₹1,95,000. MAIN CONCEPT Create an immersive Apple-style scrollable product experience where scrolling through the website controls a sequence of extracted product video frames. The product visuals are generated from videos and stored as optimized WebP frames. As the user scrolls with the mouse wheel or trackpad, the displayed frame should smoothly change, creating a cinematic frame-by-frame animation effect. HERO SECTION Create a full-screen hero section with: Store name: Mobile Store Main heading: Find Your Perfect Smartphone Supporting text: From budget-friendly phones to premium flagship devices — discover smartphones for every need and budget. Price range highlight: Phones starting from ₹10,000 up to ₹1,95,000 Add a scroll indicator at the bottom encouraging users to explore. Use a premium, modern, technology-focused design with smooth animations and responsive typography. FRAME-BASED SCROLL ANIMATION The website uses pre-extracted WebP frames instead of directly playing a video. Use these folders: /public/videos/frames_video1/ /public/videos/frames_video2/ /public/videos/frames_video3/ Example frame naming: frame_0001.webp frame_0002.webp frame_0003.webp Implement smooth scroll-driven frame animation. Use React useState or useRef for frame tracking. Use useEffect for scroll event handling. Calculate the current frame based on scroll progress. Display frames using an img element or optimized Next.js image handling where appropriate. As the user scrolls down, advance through frames sequentially. As the user scrolls up, reverse the animation smoothly. Use requestAnimationFrame for performance optimization. Avoid unnecessary React re-renders. Preload nearby frames for smoother animation. Use Intersection Observer to start loading frame sequences only when the section approaches the viewport. SECTION 1: PREMIUM PHONE EXPERIENCE Use the first frame sequence: /videos/frames_video1/frame_0001.webp Display a cinematic smartphone animation where the phone is introduced from different angles. Overlay content: Discover Your Next Smartphone Explore the latest smartphones designed for performance, photography, entertainment, and everyday life. As the user scrolls, the phone animation progresses. SECTION 2: EXPLORE EVERY DETAIL Use the second frame sequence: /videos/frames_video2/frame_0001.webp Create a sticky scroll-driven product showcase. While the user scrolls: Phone design changes visually. Different product angles are revealed. Camera and display details are highlighted. Text content transitions smoothly based on scroll progress. Content: Designed to Impress Premium displays, powerful cameras, long-lasting batteries, and cutting-edge performance. Display these smartphone categories: Budget Smartphones — ₹10,000 to ₹25,000 Mid-Range Smartphones — ₹25,000 to ₹60,000 Premium Smartphones — ₹60,000 to ₹1,00,000 Flagship Smartphones — ₹1,00,000 to ₹1,95,000 As users scroll, the frame animation should create a smooth product transition. SECTION 3: EXPLODED PRODUCT EXPERIENCE Use the third frame sequence: /videos/frames_video3/frame_0001.webp Create a cinematic exploded smartphone experience. Highlight the transformation from a fully assembled smartphone into an exploded technical product view. Use premium typography and subtle animation. SCROLL BEHAVIOR For every animated section: Create a tall scroll container between 300vh and 500vh depending on the number of frames. Make the visual container sticky. Calculate scroll progress from 0 to 1. Map scroll progress to the frame number. Load the corresponding WebP frame. Keep the product visual centered while surrounding content changes. Ensure smooth reverse scrolling. Logic: scrollProgress → frameIndex → WebP frame The animation should feel smooth, cinematic and premium, similar to modern Apple product landing pages. COMPONENT REQUIREMENTS Create a reusable component named: ScrollFrameAnimation Props: framePath: string; totalFrames: number; title?: string; description?: string; scrollHeight?: string; Example usage: Automatically generate frame names using zero-padding: frame_0001.webp frame_0002.webp frame_0003.webp PERFORMANCE REQUIREMENTS Optimize heavily for performance. Use WebP frames. Lazy load frame sequences. Preload only the current frame and nearby frames. Use requestAnimationFrame. Use passive scroll listeners. Prevent excessive state updates. Use useRef for frequently changing frame indexes. Pause unnecessary processing when the section is outside the viewport. Ensure smooth performance on desktop, tablet and mobile devices. DESIGN REQUIREMENTS The design should feel: Premium Modern Minimal Cinematic Technology-focused Smooth and interactive Use: Next.js 14+ React Tailwind CSS TypeScript Responsive design Smooth CSS transitions Use a clean color palette with: Dark backgrounds White typography Subtle blue and purple gradients High-quality smartphone visuals FINAL SECTIONS After the interactive animations include: Featured Smartphone Categories Why Choose Mobile Store Wide Range of Phones Best Value Across Every Budget Latest Smartphone Technology Call-to-action: Explore Our Collection The final CTA should encourage visitors to browse smartphones across the complete price range of ₹10,000 to ₹1,95,000. Build the complete implementation with clean, reusable components and production-ready code. Use the App Router structure. Create: app/page.tsx src/components/ScrollFrameAnimation.tsx Ensure all components are fully typed with TypeScript.