A dynamic, animation-focused website built from scratch with React, GSAP, and Motion (previously Framer Motion). This project aims to showcase visually engaging animations and interactions, inspired by modern design principles.
Refokus.Clone.-.28.March.2025.mp4
- 🧲 Magnetic Buttons & Animated Sidebar: Buttons possess a 'magnetic' effect, attracting the cursor, while the sidebar has SVG path animation, enhancing navigation.
- 🖼️ Scroll-Triggered Image Animations: As you scroll, watch images come alive! Animations are triggered based on scroll position.
- 🖱️ Interactive Window-Scene Animation:
- Mouse-Following Window: A unique window element tracks your mouse movements within specific row boundaries.
- Hover-Based Scene Changes: Hovering over different rows dynamically changes the scene displayed within the mouse-following window, creating an immersive and interactive showcase.
- ⚛️ React + Typescript + Vite
- 🎬 GSAP (GreenSock Animation Platform)
- 🌀 Motion
- 🎨 Tailwind CSS
- 📦 NPM Package Management
This project is inspired by the design and animations of the original Refokus website. It serves as a learning exercise and a showcase of animation capabilities.