Want to get this as ready made template with just 1 CLICK INSTALL?
Prompt for Generating Video:
Create a smooth cinematic transition where the Apple Vision Pro fully detaches from the woman's face and moves toward the camera and the Woman should go bottom during the movement of the Apple Vision Pro. The motion should be physically realistic and elegant, as if gently guided by an invisible force. Keep the Woman's eye always open and no parts of the Apple Vision Pro remains with the woman's head. Do not introduce new objects or change the design. The background should be always in the solid colour as it is.
Prompt on ChatGPT:
i want to create a section where when i scroll I want its behind gets sticky and show an image sequence with scroll (I have the images renamed with sequence in a folder). And at the front of this section, we want to simply have a little text at the bottom which says: "Scroll Down" which started to fade out when user just start to scroll. Then i want to create a 2nd section with a simple heading: "Get Vision Pro" where the text "Vision Pro" shows in apple style gradient and a big button (Buy Now) with a rounded corner. All the text for these 2 sections would be: Inter, -0.05em letter spacing. Now, write me an organised prompt to create these sections so I can paste it on claude code. Please write it so that i can copy paste it easily.
Final Prompt on Claude Code:
Create a modern, high-performance scroll-based web section using HTML, CSS, and jQuery. Follow the instructions carefully. ---------------------------------------- SECTION 1: Scroll-Based Image Sequence. ---------------------------------------- Goal: Create a full-screen section where: - Make it sticky during scroll until it reaches the last frame - An image sequence (frame-by-frame animation) plays based on scroll position - Images are stored in a folder and named sequentially (e.g., 00001.png, 00002.png, etc.) Requirements: 1. Structure - Create a section with enough height for scrolling (300vh–500vh) - Inside it, create a sticky container (position: sticky; top: 0;) - Use a <canvas> element for rendering the image sequence (preferred for performance) 2. Image Sequence Logic - Load images dynamically from a folder (e.g., /Frames/) - Total frames should be configurable (e.g., 100 frames) - Map scroll progress (0 → 1) to frame index - Smoothly update frames using requestAnimationFrame - As there are so much images, so add a preloader on this page 3. Performance Optimization - Preload images efficiently - Avoid flickering or lag - Ensure smooth performance on both desktop and mobile ---------------------------------------- Overlay Text (Front Layer) ---------------------------------------- - Add text at the bottom center: "Scroll Down" - Typography: - Font family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif - Letter spacing: -0.05em - Style: - Minimal, Apple-like - Positioned absolute at bottom center - Behavior: - As soon as user starts scrolling, text fades out smoothly (opacity transition) ---------------------------------------- SECTION 2: Call-To-Action (CTA) ---------------------------------------- Goal: Create a clean Apple-style section after the scroll animation. Requirements: 1. Layout - Full-width section - Center content vertically and horizontally 2. Heading - Text: "Get Vision Pro" - Typography: - Font family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif - Letter spacing: -0.05em - Style: - "Get" → normal color - "Vision Pro" → gradient text which change its colour (use multicolor gradient + background-clip: text) 3. Button - Text: "Buy Now" - Style: - Large button - Rounded corners (border-radius: 999px) - Minimal Apple-like design - Subtle hover effect (scale or brightness) - Smooth transition ---------------------------------------- General Design Guidelines ---------------------------------------- - Use a clean, minimal Apple-inspired UI - Typography: - Font family: Inter - Letter spacing: -0.05em - Ensure responsiveness (mobile + desktop) - Keep layout smooth and premium - Use proper spacing and alignment - Code should be modular and well-commented ---------------------------------------- Output Requirements ---------------------------------------- - Provide full working code: - HTML - CSS - jQuery - No unnecessary external libraries - Clearly separate sections using comments ---------------------------------------- Optional Enhancements (if possible) ---------------------------------------- - Use lenis.js for smooth scroll - Add mobile optimization fallback - Optimize memory usage and rendering performance - Make the animation feel premium like an Apple product page Ensure everything works smoothly and feels high-end and responsive.
