https://github.com/yashsarode45/refokus-clone
Animation-focused website built with React, GSAP, and Motion (previously Framer Motion). Interactions like Magnetic Button, SVG path animation, pointer linked window-scene movement are implemented.
https://github.com/yashsarode45/refokus-clone
framer-motion gsap mouse-animation react scroll-animations tailwindcss typescript
Last synced: 3 months ago
JSON representation
Animation-focused website built with React, GSAP, and Motion (previously Framer Motion). Interactions like Magnetic Button, SVG path animation, pointer linked window-scene movement are implemented.
- Host: GitHub
- URL: https://github.com/yashsarode45/refokus-clone
- Owner: yashsarode45
- Created: 2025-03-27T12:07:57.000Z (over 1 year ago)
- Default Branch: feat/developed-app
- Last Pushed: 2025-03-27T19:54:01.000Z (over 1 year ago)
- Last Synced: 2025-04-15T07:41:30.441Z (about 1 year ago)
- Topics: framer-motion, gsap, mouse-animation, react, scroll-animations, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://refokus-clone-yash.vercel.app/
- Size: 495 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Refokus Clone ✨ - Interactive Animations with React, GSAP & Motion
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.
[**Live Demo**](https://refokus-clone-yash.vercel.app/)
https://github.com/user-attachments/assets/30390716-0b06-4d6f-b17d-ca27a82ddcb6
## 🌟 Features
1. **🧲 Magnetic Buttons & Animated Sidebar:** Buttons possess a 'magnetic' effect, attracting the cursor, while the sidebar has **SVG path animation**, enhancing navigation.
2. **🖼️ Scroll-Triggered Image Animations:** As you scroll, watch images come alive! Animations are triggered based on scroll position.
3. **🖱️ 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.
## 🛠️ Tech Stack
- ⚛️ React + Typescript + Vite
- 🎬 GSAP (GreenSock Animation Platform)
- 🌀 Motion
- 🎨 Tailwind CSS
- 📦 NPM Package Management
## ✨ Acknowledgements
This project is inspired by the design and animations of the original [Refokus](https://www.refokus.com/) website. It serves as a learning exercise and a showcase of animation capabilities.