ChaosWeb

KO | EN

gitlite — search

#javascript #python #android #python3 #java #go #golang #angular #game #react-native #react #django

★ 25 Open GitHub ↗

Everything is chaotic here!!

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 😵‍💫🌀ChaosWeb: The Disorderly UI Experiment

Welcome to **ChaosWeb** — a web design experiment where nothing behaves as it should, and everything is delightfully out of order! If you’re tired of the conventional and predictable nature of websites, **ChaosWeb** offers a creative break from the norm with unpredictable navigation, bizarre sliders, and a world where scrolling defies gravity.

## 🚀 What is ChaosWeb?

**ChaosWeb** is a quirky and deliberately chaotic HTML, CSS, and JavaScript website project designed to challenge the norms of web design. It’s a place where everything is intentionally messy and unpredictable. The goal isn’t usability, but rather to create an anti-UI experience that’s confusing, frustrating, yet strangely fun to explore.

## 📈 GitHub Repository Stats

| 🌟 **Stars**                                                              | 🍴 **Forks**                                                       | 🐛 **Issues**                                                                     | 🔔 **Open PRs**                                                                             | 🔕 **Closed PRs**                                                                               | 🛠️ **Languages**                                                                              | ✅ **Contributors**                                                                           |
| ------------------------------------------------------------------------- | ------------------------------------------------------------------ | --------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
| ![GitHub stars](https://img.shields.io/github/stars/vansh-codes/ChaosWeb) | ![forks](https://img.shields.io/github/forks/vansh-codes/ChaosWeb) | ![issues](https://img.shields.io/github/issues/vansh-codes/ChaosWeb?color=32CD32) | ![pull requests](https://img.shields.io/github/issues-pr/vansh-codes/ChaosWeb?color=FFFF8F) | ![Closed PRs](https://img.shields.io/github/issues-pr-closed/vansh-codes/ChaosWeb?color=20B2AA) | ![Languages](https://img.shields.io/github/languages/count/vansh-codes/ChaosWeb?color=20B2AA) | ![Contributors](https://img.shields.io/github/contributors/vansh-codes/ChaosWeb?color=00FA9A) |

## 🤯 Example Features of the Chaos:

- **Unreliable Navbar:** Click on a menu item, and watch as a completely unrelated dropdown opens up.
- **Reverse Scrolling:** Scroll vertically to see horizontal movement, and horizontally to scroll vertically. Nothing is as it seems!
- **Slider Madness:** Navigate through the website using a custom-built slider instead of the standard browser scrollbar.
- **Displaced Clicks:** Random elements react to your clicks, but not the ones you expect.
- **Distorted UI Elements:** Watch buttons, dropdowns, and sliders randomly change positions and behavior.
- **Wierd Animations**: Animations that are sick to watch.
- **Misleading Animations:** Hover effects and animations that lead your cursor astray.
- **Hidden Secrets:** Easter eggs of disorder await the most curious adventurers.

## 🤹‍♂️ The Experience

ChaosWeb is not about smooth navigation or polished interfaces. It’s about creating a chaotic user journey full of surprises, designed to subvert your expectations. Users will find themselves laughing, confused, and maybe even a bit annoyed, as they explore the mess.

## 💪 Outreach

ChaosWeb is proudly part of global initiatives engaging with passionate developers and open-source enthusiasts worldwide:

<table>
  <tr>
    <th>Name</th>
    <th>Logo</th>
    <th>Purpose</th>
  </tr>

  <tr>
    <td>GSSoC'2024-Extd </td>
    <td><a href="https://gssoc.girlscript.tech/project"><img src="https://github.com/user-attachments/assets/1bd8ab15-604e-4ac9-a33e-dc753a07be23" alt="GirlScriptSummerOfCode"></a></td>
    <td> The coding period is from October 1st to October 30th, during which contributors make contributions and earn points on the platform.</td>
  </tr>
  <tr>
    <td>Hacktoberfest 2024 </td>
    <td><a href="https://hacktoberfest.com/" ><img src="https://github.com/user-attachments/assets/484d4816-e493-4c5f-ae96-db7d764f704d" width="200" height="auto" loading="lazy" alt="Hacktoberfest 2024"/></a></td>
    <td> Hacktoberfest is a month-long October event welcoming all skill levels to join the open source community </td>
  </tr>
  <td>SWOC 2024</td>
    <td><a href="https://www.socialwinterofcode.com/" ><img src="https://github.com/user-attachments/assets/eb175a0d-a4c4-4380-a971-fffb23288002" width="200" height="auto" loading="lazy" alt="SWOC 2024"/></a></td>
    <td> Social Winter of Code introduces participants to open source through projects, mentorship, and workshops on development, AI, Web3, and more. </td>
  </tr>
</table>

## ✨ Project Structure

Check the project structure here [Project Structure](PROJECT_STRUCTURE.md) and choose where to start with spreading chaos.

## 💥Live Preview:

**[Chaos web🚀](https://chaosweb.vercel.app/)**

## 🛠️ Tech Stack

- **REACT**: Use React for Chaos
- **HTML**: The foundation of the chaos.
- **CSS**: Styles that never behave as you’d expect.
- **JavaScript**: Bringing the madness to life with unpredictable interactions.

## 🎯 Purpose

This project serves as an exploration of **anti-user experience (anti-UX)** and the deliberate breakage of web design rules. It's a playground for developers to experiment with unusual UI/UX patterns, break away from the ordinary, and perhaps learn something new by going against the grain.

## 🧪 How to Install & Run

1. **Clone the Repository**:

```bash
   git clone https://github.com/YourUsername/ChaosWeb.git
   ```

2. **Navigate to the project directory**:

```bash
   cd ChaosWeb
   cd chaosweb-v@2

```

3. **Open in Browser**:
   Run `npm run dev` in your preferred web browser and enjoy the chaos!

## 🚧 Future Features

<img src="https://github.com/user-attachments/assets/29e5e302-d215-4312-81dc-b5ddaad94cdc" height=200  width=300 alt="ChaosWeb"/>
 
- **Randomized Element Movement**: Elements that float, drift, and change positions as you scroll.
- **Inverted Controls**: Buttons that do the opposite of what you think they will.
- **Mystery Popups**: Popups that appear and disappear at random, leaving users puzzled.
- **More Easter Eggs**: Add hidden interactions that will reward curious users.

## 🤝 Contributing

If you have ideas to make ChaosWeb even more chaotic, feel free to cerate an issue, fork the repo and submit a pull request! Let’s make the internet messy together.
Create issue: [new issue](https://github.com/vansh-codes/ChaosWeb/issues/new/choose)
Create pull request: [new pull request](https://github.com/vansh-codes/ChaosWeb/compare)

## ❓ Have Doubts

<img src="https://github.com/user-attachments/assets/761e4b39-8eab-4ef4-a3d9-b575e05a465b" height=200  width=300 alt="ChaosWeb"/>
  
### 🙋‍♂️Raise discussion here: [raise a discussion](https://github.com/vansh-codes/ChaosWeb/discussions)

## 🔥 Why Build This?

Because sometimes, breaking the rules is fun. **ChaosWeb** is a way to shake off the constraints of traditional web design and embrace the joy of unpredictability. If you’re a developer looking to play around with unconventional ideas, this is the perfect sandbox for you.

**Have fun exploring the chaos of the web!**
Show some ❤️ by ⭐ the repository!

### 📜License

This project is licensed under the [MIT LICENSE](./LICENSE).

<div>
  <h2><img src="https://fonts.gstatic.com/s/e/notoemoji/latest/1f497/512.webp" width="35" height="35"> Contributors</h2>
</div>

Thank you for contributing to our project! Your help is greatly appreciated in making BasicNative even better. 😊

![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png)

## Stargazers

[![Stargazers repo roster for @vansh-codes/ChaosWeb](https://reporoster.com/stars/dark/vansh-codes/ChaosWeb)](https://github.com/vansh-codes/ChaosWeb/stargazers)

</div>

## Forkers

[![Forkers repo roster for @vansh-codes/ChaosWeb](https://reporoster.com/forks/dark/vansh-codes/ChaosWeb)](https://github.com/vansh-codes/ChaosWeb/network/members)

![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png)

ChaosWeb

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README