Cartoon Physics — Swiper + GSAP (Vite + React)

A vibrant, cartoon-themed interactive slider that answers: What is Physics?
Built with Swiper.js for slides and GSAP for delightful motion.

Quickstart

npm install
npm run dev

Build for production:

npm run build
npm run preview

What’s inside?

• Slide 1: Title + orbiting planet
• Slide 2: Definition + scientific method
• Slide 3: Gravity lab — change g and drop the ball
• Slide 4: Motion — uniform vs accelerating rocket
• Slide 5: Forces — hold Push to accelerate a box; friction slows it
• Slide 6: Energy — potential → kinetic via bouncing ball
• Slide 7: Waves — tweak amplitude & frequency
• Slide 8: Quiz — instant feedback + confetti
• Slide 9: Outro + helpful links

Notes

• No Tailwind needed; custom CSS keeps it portable.
• All GSAP timelines are created per-slide to avoid leaks.
• Keyboard shortcuts: R to replay entrance animation on the active slide.