https://github.com/mayank181006/ochi.design-ui-clone

Cloned UI of ochi.design an Awwwards Website
https://github.com/mayank181006/ochi.design-ui-clone

framer-motion gsap locomotive-scroll ochi-design portfolio react tailwindcss ui-clone

Last synced: 3 months ago
JSON representation

Cloned UI of ochi.design an Awwwards Website

• Host: GitHub
• URL: https://github.com/mayank181006/ochi.design-ui-clone
• Owner: Mayank181006
• Created: 2025-06-03T02:16:37.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2025-06-25T21:18:39.000Z (4 months ago)
• Last Synced: 2025-06-25T22:29:42.487Z (4 months ago)
• Topics: framer-motion, gsap, locomotive-scroll, ochi-design, portfolio, react, tailwindcss, ui-clone
• Language: JavaScript
• Homepage:
• Size: 1.62 MB
• Stars: 2
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 🧠 Ochi.Design Clone

A visual clone of [ochi.design](https://ochi.design) created using **React**, **Tailwind CSS**, **GSAP**, **Framer Motion**, and **Locomotive Scroll**. This project replicates the core layout, animations, and user experience of the original site as a learning and portfolio project.

> ❗ **Note:** This project is currently **not responsive** and is best viewed on desktop screens. Mobile responsiveness will be added in future updates.

---

## ✨ Features

- 🎨 Pixel-perfect layout inspired by the original Ochi.design

- 🎥 GSAP-powered timeline and scroll animations

- 🌀 Smooth parallax scrolling with Locomotive Scroll

- 💫 Interactive UI using Framer Motion

- ⚛️ React component-based architecture

- 💨 Tailwind CSS for utility-first styling

---

## 🧰 Tech Stack

| Technology           | Role                                  |

|----------------------|----------------------------------------|

| **React**            | Core frontend library                  |

| **Tailwind CSS**     | CSS framework for styling              |

| **GSAP**             | High-performance animations            |

| **Framer Motion**    | Motion components & transitions        |

| **Locomotive Scroll**| Smooth scrolling and parallax effects |

---

## 📸 Screenshots

### 🖼️ Hero Section

![Hero](./screenshots/hero.png)

### 🖼️ Marquee Section

![Marquee](./screenshots/marquee.png)

### 🖼️ Eyes Section

![Eyes](./screenshots/eyes.png)

### 🖼️ Projects Section

![Projects](./screenshots/projects.png)

### 🖼️ Footer Section

![Footer](./screenshots/footer.png)

---

## 📜 Credits

- Original Website: [ochi.design](https://ochi.design)

- This project is a **personal clone** made for **educational and portfolio purposes only**.

- All design rights, text, and assets belong to the creators of the original site.

---

## 🚀 Getting Started

To run this project locally:

```sh

# Clone the repository

git clone https://github.com/your-username/ochi-clone.git

# Navigate into the project folder

cd ochi-clone

# Install dependencies

npm install

# Start the development server

npm run dev

```

Then, open your browser and go to `http://localhost:5173` (or the port shown in your terminal).

---

## ⚠️ Known Limitations

- ❌ Currently not responsive

- 📱 Mobile scroll behavior not optimized

- 🚧 Still improving UI consistency on smaller screens

---

## 🛠️ To-Do

- [ ] Make the layout fully responsive

- [ ] Optimize for mobile performance

- [ ] Add a light/dark theme toggle

---

## 📄 License

This repository is licensed for **personal learning and non-commercial portfolio use only**.