diff --git a/chaosweb-v@2/package-lock.json b/chaosweb-v@2/package-lock.json
index f055b59..1071951 100644
--- a/chaosweb-v@2/package-lock.json
+++ b/chaosweb-v@2/package-lock.json
@@ -8,6 +8,7 @@
"name": "chaosweb-v-2",
"version": "0.0.0",
"dependencies": {
+ "chaosweb-v-2": "file:",
"fireworks-js": "^2.10.8",
"framer-motion": "^11.11.10",
"react": "^18.3.1",
@@ -1762,6 +1763,10 @@
"node": ">=4"
}
},
+ "node_modules/chaosweb-v-2": {
+ "resolved": "",
+ "link": true
+ },
"node_modules/chokidar": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
diff --git a/chaosweb-v@2/package.json b/chaosweb-v@2/package.json
index 755b8fd..83af5c2 100644
--- a/chaosweb-v@2/package.json
+++ b/chaosweb-v@2/package.json
@@ -10,6 +10,7 @@
"preview": "vite preview"
},
"dependencies": {
+ "chaosweb-v-2": "file:",
"fireworks-js": "^2.10.8",
"framer-motion": "^11.11.10",
"react": "^18.3.1",
diff --git a/chaosweb-v@2/src/App.jsx b/chaosweb-v@2/src/App.jsx
index ecb7012..8f124a0 100644
--- a/chaosweb-v@2/src/App.jsx
+++ b/chaosweb-v@2/src/App.jsx
@@ -1,4 +1,4 @@
-import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+ import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "./pages/home";
import Contact from "./pages/contact";
import Timeline from "./pages/timeline";
@@ -15,7 +15,8 @@ import BarrelRoll from "./pages/BarrelRoll";
import RateUs from "./pages/RateUs";
import TestEffects from "./pages/TestEffects";
import Metadata from "./metadata";
-
+import ChaoticTypingTest from "./pages/ChaoticTypingTest";
+
function App() {
const [trigger, setTrigger] = useState(false);
@@ -48,6 +49,7 @@ function App() {
} />
} />
} />
+ } />
diff --git a/chaosweb-v@2/src/pages/ChaoticTypingTest.css b/chaosweb-v@2/src/pages/ChaoticTypingTest.css
new file mode 100644
index 0000000..e60a047
--- /dev/null
+++ b/chaosweb-v@2/src/pages/ChaoticTypingTest.css
@@ -0,0 +1,178 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ body {
+ font-family: Arial, sans-serif;
+ overflow: hidden;
+ height: 100vh;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ color: #fff;
+ position: relative;
+ animation: flickerBackground 0.5s infinite alternate;
+ }
+
+ #container {
+ margin-top: 20%;
+ text-align: center;
+ z-index: 10;
+ max-width: 700px;
+ padding: 20px;
+ border: 3px solid #888;
+ border-radius: 10px;
+ background: rgba(0, 0, 0, 0.8);
+ animation: flashBackground 0.11s infinite alternate;
+ }
+
+ #scrambled-text {
+ font-size: 1.2em;
+ margin: 20px;
+ padding: 15px;
+ border-radius: 8px;
+ color: #f4f4f4;
+ min-height: 50px;
+ display: inline-block;
+ transition: all 0.3s ease;
+ }
+
+ #typed-output {
+ font-size: 1.5em;
+ margin-top: 20px;
+ color: #ff6347;
+ background-color: #222;
+ padding: 10px;
+ border-radius: 4px;
+ border: 2px solid #555;
+ min-height: 50px;
+ white-space: pre-wrap;
+ animation: flashBackground 0.11s infinite alternate;
+ }
+
+ .chaotic-element {
+ position: absolute;
+ border-radius: 50%;
+ opacity: 1;
+ animation: moveChaos 2s infinite ease-in-out alternate;
+ }
+
+ .chaotic-element:nth-child(2n) {
+ animation-duration: 7s;
+ background-color: rgba(255, 0, 0, 0.6);
+ }
+
+ .chaotic-element:nth-child(3n) {
+ animation-duration: 6s;
+ background-color: rgba(0, 255, 0, 0.6);
+ }
+
+ .chaotic-element:nth-child(5n) {
+ animation-duration: 3s;
+ background-color: rgba(0, 0, 255, 0.6);
+ }
+
+ .chaotic-element:nth-child(7n) {
+ animation-duration: 4s;
+ background-color: rgba(255, 0, 255, 0.6);
+ }
+
+ .chaotic-element:nth-child(11n) {
+ animation-duration: 5s;
+ background-color: rgba(255, 255, 0, 0.6);
+ }
+
+ .thunderbolt {
+ position: absolute;
+ width: 10px;
+ height: 300px;
+ background: linear-gradient(to bottom, #fff, #ff0);
+ opacity: 1;
+ animation: thunderboltAnimation 2s infinite;
+ transform-origin: top;
+ }
+
+ @keyframes thunderboltAnimation {
+ 0% {
+ opacity: 0;
+ transform: translate(50%, -100%) scaleY(0.2);
+ }
+ 50% {
+ opacity: 1;
+ transform: translate(50%, 0) scaleY(1.5);
+ }
+ 100% {
+ opacity: 0;
+ transform: translate(50%, -100%) scaleY(0.2);
+ }
+ }
+
+ @keyframes moveChaos {
+ 0% {
+ transform: translate(0, 0) scale(1);
+ }
+ 50% {
+ transform: translate(calc(100vw - 20px), calc(100vh - 20px)) scale(1.5) rotate(45deg);
+ }
+ 100% {
+ transform: translate(calc(-100vw + 20px), calc(-100vh + 20px)) scale(0.8) rotate(-45deg);
+ }
+ }
+
+ @keyframes flickerBackground {
+ 0%, 100% {
+ background-color: #1029e5;
+ }
+ 20% {
+ background-color: #f0e405;
+ }
+ 40% {
+ background-color: #e91414;
+ }
+ 60% {
+ background-color: #0aebee;
+ }
+ 80% {
+ background-color: #8b3ded;
+ }
+ }
+
+ .floating-title {
+ position: absolute;
+ font-size: 10em;
+ color: #90e4da;
+ animation: flickerText 0.6s infinite alternate;
+ }
+
+ @keyframes flickerText {
+ 0%, 100% {
+ opacity: -10;
+ transform: scale(1);
+ }
+ 50% {
+ opacity: 0.3;
+ transform: scale(1.1);
+ }
+ }
+
+ .random-effect {
+ position: absolute;
+ font-size: 1.5em;
+ animation: chaoticEffect 1.5s ease-in-out infinite;
+ }
+
+ @keyframes chaoticEffect {
+ 0%, 100% {
+ transform: rotate(0deg);
+ opacity: 1;
+ }
+ 50% {
+ transform: rotate(180deg);
+ opacity: 0.5;
+ }
+ }
+
+
+
\ No newline at end of file
diff --git a/chaosweb-v@2/src/pages/ChaoticTypingTest.jsx b/chaosweb-v@2/src/pages/ChaoticTypingTest.jsx
new file mode 100644
index 0000000..a903332
--- /dev/null
+++ b/chaosweb-v@2/src/pages/ChaoticTypingTest.jsx
@@ -0,0 +1,93 @@
+import { useState, useEffect } from 'react';
+import './ChaoticTypingTest.css';
+
+const ChaoticTypingTest = () => {
+ const paragraph = "This is your typing paragraph. Try to type it accurately despite the chaos!";
+ const [typedText, setTypedText] = useState('');
+ const [scrambledText, setScrambledText] = useState(paragraph);
+
+ const scrambleParagraph = () => {
+ const scrambledParagraph = paragraph.split('').sort(() => Math.random() - 0.5).join('');
+ setScrambledText(scrambledParagraph);
+
+ const randomSize = Math.random() * (2 - 0.8) + 0.8;
+ const randomRotation = Math.random() * 360;
+ const randomX = Math.random() * 50;
+ const randomY = Math.random() * 50;
+
+ const scrambledTextEl = document.getElementById('scrambled-text');
+ scrambledTextEl.style.fontSize = `${randomSize}em`;
+ scrambledTextEl.style.transform = `rotate(${randomRotation}deg) translate(${randomX}%, ${randomY}%)`;
+ };
+
+ const randomLetterOrEmoji = () => {
+ const lettersAndEmojis = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz😊😂😎🎉✨💥🔥';
+ return lettersAndEmojis[Math.floor(Math.random() * lettersAndEmojis.length)];
+ };
+
+ const chaoticTyping = (event) => {
+ const typedChar = event.key;
+ setTypedText((prevText) => prevText + typedChar);
+
+ for (let i = 0; i < 100; i++) {
+ const chaoticElement = document.createElement('div');
+ chaoticElement.textContent = randomLetterOrEmoji();
+ chaoticElement.classList.add('random-effect');
+ chaoticElement.style.left = `${event.clientX + Math.random() * 300 - 50}px`;
+ chaoticElement.style.top = `${event.clientY + Math.random() * 300 - 50}px`;
+ document.body.appendChild(chaoticElement);
+ setTimeout(() => chaoticElement.remove(), 2000);
+ }
+ };
+
+ useEffect(() => {
+ const scrambleInterval = setInterval(() => {
+ scrambleParagraph();
+ }, 3000);
+
+ window.addEventListener('keydown', chaoticTyping);
+ window.addEventListener('click', chaoticTyping);
+
+ const titles = document.querySelectorAll('.floating-title');
+ titles.forEach(title => {
+ const randomX = Math.random() * 100;
+ const randomY = Math.random() * 100;
+ title.style.top = `${randomY}vh`;
+ title.style.left = `${randomX}vw`;
+ });
+
+ return () => {
+ clearInterval(scrambleInterval);
+ window.removeEventListener('keydown', chaoticTyping);
+ window.removeEventListener('click', chaoticTyping);
+ };
+ }, []);
+
+ return (
+
+
ChAOtiC TYpiNg UniVeRSe
+
Welcome to chaosWeb
+
+
+
{scrambledText}
+
{typedText}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+