https://github.com/mirayatech/anime-scene-gallery

✨ Interactive anime scene gallery with hover animations and dynamic transitions.
https://github.com/mirayatech/anime-scene-gallery

animations anime framer-motion movie react series typescript vite

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/mirayatech/anime-scene-gallery
• Owner: mirayatech
• Created: 2024-12-26T21:43:32.000Z (about 1 month ago)
• Default Branch: main
• Last Pushed: 2024-12-27T15:10:59.000Z (about 1 month ago)
• Last Synced: 2024-12-27T16:20:43.014Z (about 1 month ago)
• Topics: animations, anime, framer-motion, movie, react, series, typescript, vite
• Language: TypeScript
• Homepage: https://anime-scene-gallery.vercel.app
• Size: 20.5 MB
• Stars: 4
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 🎬 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

https://github.com/user-attachments/assets/266b81be-dade-4942-8b06-38494194b941