Initial readme update

Author: Subsussp

README.md

@@ -1,50 +1,72 @@
 # THE — Audio Reactive Visualizer
 
-[Live Demo](https://subsussp.github.io/THE)
+[![Live Demo](https://img.shields.io/badge/Live%20Demo-Click%20Here-blue?style=for-the-badge&logo=vercel)](https://subsussp.github.io/THE)
 
-**THE** is an artwork made by me and it's also a WebGL-powered music visualizer that transforms audio tracks into dynamic. Users can upload their own music, and the site will generate a unique audiovisual display using 3D graphics, shaders, and sound analysis.
+**THE** is an artwork made by me ;) and it's also a WebGL-powered music visualizer that transforms audio tracks into dynamic. Users can upload their own music, and the site will generate a unique audiovisual display using 3D graphics, shaders, and sound analysis.
 
 ---
 ## GPU Required
 
 This project requires a **dedicated or integrated GPU** to run properly.  
 If your system does not support **WebGL / WebGPU** or hardware acceleration,  
-some features may not work, or performance may be severely degraded.
+some scenes may not work smoothly, or performance may be severely degraded.
+
+---
+
+# Preview
+
+<p float="left">
+  <img src="https://github.com/user-attachments/assets/0cecff4c-8b26-4332-a8a3-4e79cf70ff78" width="150" />
+  <img  width="150"  alt="Screenshot 2026-02-01 034001" src="https://github.com/user-attachments/assets/32f05639-03d5-490c-b321-69c39eb50fa6" />
+  <img src="https://github.com/user-attachments/assets/1f014d3e-b490-498e-8bb8-7fe0ecfa77ec" width="150" />
+  <img src="https://github.com/user-attachments/assets/ebb56fb3-5edb-459d-a901-f09e127956df" width="150" />
+  <img src="https://github.com/user-attachments/assets/6beaacbb-1840-4378-88fa-6b7164f88dbd" width="150" />
+  <img src="https://github.com/user-attachments/assets/353bd1f3-722e-4b52-9926-d1e4fc0f9989" width="150" />
+</p>
+
 
 ---
 
 ## Features
 
-- **Audio Upload** — Upload local audio files (e.g., MP3, WAV)
+- **Audio Upload** — Upload local audio files (e.g., MP3, WAV) Or use my audio samples :).
 - **Real-Time Audio Analysis** — Uses Web Audio API to extract frequency & amplitude data
 - **3D Visual Effects** — Built with Three.js, custom shaders, and particle systems
 - **Customizable Scenes** — Visuals react to beat, bass, treble, and volume
 - **Optimized Performance** — Smooth animation loop with efficient rendering
 - **Future Plans** — MIDI input, preset scenes, user controls, and mobile support
 
 ---
-
-## Tech Stack
-
-| Tool | Description |
-|------|-------------|
-| <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg" alt="JavaScript" width="24"/> **JavaScript** | Main frontend language |
-| <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/html5/html5-original.svg" alt="HTML5" width="24"/> **HTML5** | Markup & UI |
-| <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/css3/css3-original.svg" alt="CSS3" width="24"/> **CSS3** | Styling and layout |
-| <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/threejs/threejs-original.svg" alt="Three.js" width="24"/> **Three.js** | 3D graphics & rendering |
-| **Web Audio API** | Audio frequency & waveform analysis |
-| **TSL (Three Shader Language)** | Shader logic for particle dynamics |
-| **GLSL** | Custom fragment & vertex shaders |
-
----
-
+## <img src="https://em-content.zobj.net/thumbs/240/apple/354/hammer-and-wrench_1f6e0-fe0f.png" width="20"/> Technologies Used  
+
+<p align="center">
+  <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-original.svg" alt="JavaScript" width="60" height="60"/>
+  <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/html5/html5-original.svg" alt="HTML5" width="60" height="60"/>
+  <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/css3/css3-original.svg" alt="CSS3" width="60" height="60"/>
+<img 
+  src="https://raw.githubusercontent.com/mrdoob/three.js/9796ddd982480f662a73e5f16fff4c7e6f240ee1/files/icon.svg" 
+  alt="Three.js" 
+  width="55" 
+  height="55"
+  style="background-color:white; padding:2px;"
+/>
+<img src="https://static.cdnlogo.com/logos/g/31/gsap-greensock.svg" alt="GSAP" width="60" height="60" />
+
+- [**Javascript**](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
+- [**Three.js**
+](https://github.com/mrdoob/three.js/) JavaScript 3D library.
+- [**GSAP**](https://github.com/greensock/gsap) (GreenSock Animation Platform), a JavaScript animation library for the modern web.
+- [**GLSL**](https://learnopengl.com/Getting-started/Shaders) (OpenGL Shading Language) is a high-level, C-style programming language used to create custom shaders that execute directly on the GPU.
+</p>
 
 ## Credits
 
 Thanks to [three.js WebGPU attractors example](https://github.com/mrdoob/three.js/blob/master/examples/webgpu_tsl_compute_attractors_particles.html) by [@mrdoob](https://github.com/mrdoob) I was able to create the great particles scene I integrated my own audio interactivity to the particles :).
 
 and also for [threejs-graces](https://github.com/ektogamat/threejs-graces) because that's where i got my inspiration from and kinda mimiced his mouse interactivity 
 
+also thanks to [Oscilloscope Visualizer](https://github.com/TimArt/3DAudioVisualizers) because i learnt how to do the oscilloscope shader from him 
+
 ---
 
 ## LICENSE