SurPing

English: Welcome to SurPing, a premium multi-tool web application blending sleek aesthetics with highly responsive utilities. Built to feel smooth on every screen, SurPing features cinematic motion, glassmorphism, and a mobile-first flow.
Hinglish: SurPing mein aapka swagat hai, ek premium multi-tool web app jismein sleek design aur highly responsive utilities hain. Yeh har screen par smooth feel dene ke liye banaya gaya hai, jismein cinematic animations aur glassmorphism ka use hua hai.

---

✨ Features / Khasiyat

English:

• Lyrics Studio: Full-screen music player with search, audio playback, and perfectly synced real-time lyrics.
• Ping Pong Arena: A neon-styled interactive arcade game featuring physics, smooth paddle controls, and score tracking.
• Utility Layer: Generate custom QR Codes and trace IP signals with high-contrast, fast, and responsive utility cards.
• Premium Aesthetics: Built with framer-motion and gsap for fluid transitions, interactive 3D folders, stacked profile cards, and cinematic video backgrounds.

Hinglish:

• Lyrics Studio: Full-screen music player jismein gaane search kar sakte ho, audio play kar sakte ho, aur real-time synced lyrics dekh sakte ho.
• Ping Pong Arena: Ek neon-style interactive arcade game jismein physics aur smooth paddle controls hain.
• Utility Layer: Custom QR Codes generate karo aur IP signals trace karo fast aur clear utility cards ke through.
• Premium Design: framer-motion aur gsap ka use karke fluid animations, interactive 3D folders, aur cinematic video backgrounds banaye gaye hain.

---

🧰 Tech Stack

English & Hinglish:

• Framework: React 19 + Vite
• Styling: Tailwind CSS v4, Vanilla CSS (Glassmorphism)
• Animation: Framer Motion, GSAP, Lottie React
• Routing: React Router DOM
• Other Utilities: Axios, MathJS, JSZip

---

🚀 Getting Started / Shuru Kaise Karein

Prerequisites / Zaruratein

• Node.js (v18 or higher)
• A modern web browser

Installation / Setup

English:

1. Clone the repository:

   git clone https://github.com/O-zayy/SurPing.git

2. Navigate into the project folder:

   cd SurPing

3. Install dependencies:

   npm install

4. Start the development server:

   npm run dev

Hinglish:

1. Repository ko clone karo:

   git clone https://github.com/O-zayy/SurPing.git

2. Project folder ke andar jao:

   cd SurPing

3. Dependencies install karo:

   npm install

4. Development server start karo:

   npm run dev

---

🗂️ Project Structure

SurPing/
├── src/
│   ├── assets/       # Images, animations, and media
│   ├── components/   # Reusable UI components (Folder, Stack, ProfileCard, BubbleMenu)
│   ├── pages/        # Main route pages (LandingPage, Lyrics, PingPong, QrCode)
│   ├── App.jsx       # App routing setup
│   └── index.css     # Global CSS variables and utilities
├── package.json      # Dependencies and scripts
└── vite.config.js    # Vite configuration

---

🤝 Contributing

English: Contributions are highly appreciated! Feel free to open issues or submit pull requests to add new tools or refine the design.

Hinglish: Aapke contributions welcome hain! Agar aap naye tools add karna chahte hain ya design refine karna chahte hain, toh issues open karein ya pull requests submit karein.

---

📬 Contact

Crafted by O-zayy

• GitHub: O-zayy