Cloud Computing — From Ground to Sky

An interactive motion graphics presentation on Cloud Computing fundamentals, built as a single HTML file with GSAP animations.

How to Open

1. Open index.html in any modern browser (Chrome, Firefox, Safari, Edge).
2. No server or build step needed — just double-click the file or run:

   open index.html
   

Controls

Control	Action
Play/Pause button (bottom center)	Start or pause the auto-playing timeline
Space	Toggle play/pause
Arrow Right	Jump to next scene
Arrow Left	Jump to previous scene
Chapter dots (right side)	Click any dot to jump to that scene; hover for title

What You'll See

12 animated scenes covering:

1. The Hook — Pulsing question text with floating particles
2. What Is Cloud Computing — Cloud icon with orbiting service icons, utility analogy
3. Evolution — Animated timeline from mainframes to cloud era
4. Traditional vs Cloud — Split-screen comparison with animated items
5. Architecture — Layered diagram building bottom to top
6. NIST Characteristics — Pentagon of 5 essential traits with stroke animation
7. Deployment Models — 4 cards (public, private, hybrid, community)
8. Service Models — IaaS/PaaS/SaaS responsibility columns with color-coded layers
9. Advantages & Limitations — Two-column balance with staggered reveals
10. Cloud Platforms — AWS, Azure, GCP, Vercel with market share bars
11. Hands-on Demo — Git push deployment workflow animation
12. Closing — Summary with call to action

Tech Stack

• HTML + CSS + JavaScript (single file)
• GSAP 3.12.5 (CDN) for all animations
• Canvas API for background particle system
• SVG for diagrams with stroke-dashoffset animations
• Google Fonts (Inter, JetBrains Mono)

Credits

Introduction to Cloud Computing — SVIT College — Abhinav Gupta