Scrollytelling Webpage
Write code for a one-page website that uses smooth animations to show text sections while scrolling.
Prompt
Create a stunning and detailed single-page HTML webpage that utilizes a cinematic "scrollytelling" style to take the user on an immersive journey through the information provided in the text below. Instead of a generic layout, the page should analyze the provided text, break it down into logical sections (e.g., Introduction → Key Concept 1 → Key Concept 2 → Key Concept 3 → Conclusion), and highlight each section individually in order.
Input Text to Process is the given document.
Important criteria to follow strictly:
Structure & Analysis:
Analyze the input text and structure the webpage into distinct, full-screen sections based on the main topics or chapters found in the text.
Each topic must have its own interactive, full-screen section visible during scrolling.
Animation & Experience:
Use smooth scroll-triggered animations via GSAP (ScrollTrigger) CDN for creating dynamic transitions (zoom-ins, parallax backgrounds, fade-ins, slide-ups, etc.).
Ensure the user feels they are navigating smoothly through a narrative flow.
The visual "vibe" and animations should match the theme of the text (e.g., if the text is technical, make it sleek and modern; if historical, make it classic/elegant; if nature-based, make it organic).
Content Presentation:
Headings: Clearly display the section title prominently and aesthetically.
Visuals: Include a clear, large, high-quality visual image or artistic representation for each section (use placeholder images from Unsplash or similar sources that are contextually relevant to the specific topic of that section).
Text: Provide an informative summary, paragraph, or list of key takeaways derived directly from the provided text. Do not just copy-paste huge blocks of text; edit it compellingly to captivate the reader.
Design & Typography:
Use font effects and color palettes that create an impressive and immersive mood suitable for the subject matter.
Technical Requirements:
Do NOT merely place or copy/paste CDN code without integration.
Provide original, thoughtfully prepared HTML/CSS/JavaScript code within just one isolated HTML file, entirely self-contained.
Ensure actual content (summarized facts/text extracted from the input) is neatly arranged and purposefully written into the webpage.
Clearly demonstrate effort, originality, and reasonable completeness (the page should appear well-crafted, professional-standard, and polished).
Final Output: Your final output MUST BE a SINGLE complete HTML file containing inline CSS and JavaScript (CDNs permitted only if needed, but fully integrated properly). The webpage must be instantly runnable, visually rich, interactive, and sophisticated enough to genuinely impress an informed judge-level audience.