Skip to content

✨ Interactive anime scene gallery with hover animations and dynamic transitions.

Notifications You must be signed in to change notification settings

mirayatech/Anime-Scene-Gallery

Repository files navigation

🎬 Anime Scene Gallery

An interactive gallery featuring iconic scenes from my favorite anime series, built with React and Framer Motion. Each title reveals three carefully chosen scenes with dynamic animations and mouse-tracked motion effects.

✨ Technologies

  • React
  • TypeScript
  • Framer Motion
  • Tailwind CSS
  • Vite

🚀 Features

  • Spring physics for natural feeling animations
  • Each title reveals three iconic scenes when hovered
  • Scenes respond to mouse movement with parallax effects
  • Adapts to different screen sizes with mobile warnings

📍 The Process

I've been on a mission to make something fun with my favorite anime scenes. Most galleries felt static, so I wanted to create something that felt alive. Started simple with React and built up the interactions. When you hover over a title, it smoothly reveals iconic moments from that series. Added some mouse tracking magic with Framer Motion to make the scenes feel more dynamic, like they're floating in space. Sure, it may not be perfect on phones (desktop is where it shines), but I'm pretty happy with how the animations turned out!

🚦 Running the Project

  1. Clone the repository
  2. Install dependencies: npm install
  3. Run development server: npm run dev
  4. Open http://localhost:5173 in your browser

🎞️ Preview

Area.mp4