404% More Kaos

• 

  Main or landing page of the 404 page

Inspiration I wanted to see what happens when you throw good design out the window. The Kaos hackathon theme felt like the perfect excuse to make a site where logic is flawed and everything behaves a little unpredictably.

What it does 404% More Kaos is basically a playground for chaos.

• Explosion Mode: stuff blasts across the screen.
• Rainbow Chaos Mode: the color of the website turns into chaos
• Worst Mode: Put gravity to the element
• Slippery Mode: buttons slip away when you try to click them. Every interaction is a little surprise.

How we built it We used Vite + React. Animations are a mix of CSS keyframes and JS, and React hooks keep track of the chaos modes. Our goal was to make it look wrong but still be fun to play with.

Challenges Turns out, making chaos fun is hard. Too much, and it’s frustrating and if it is too little, and it’s boring. Multiple animations clashing while keeping performance smooth were tricky. But seeing it all come together was worth it.

Accomplishments We got 4+ chaos modes running and each interactive and unpredictable. I showed my mom and she laughed and was confused at the same time, which means the ultimate purpose of the website is achieved.

What’s next We want to add even more modes, like ghosts, paw prints, and magnifying chaos. Maybe we can let users control the chaos level or even create their own. Basically, keep breaking rules in fun ways.

Built With

• canvas-api
• canvas-confetti
• css3
• css3-animations
• cursor
• github
• javascript
• javascript/jsx
• react
• vite
• web-audio-api