🕶️ Nothing Product Showcase — Phone 3a / 3a Pro

Welcome to the Nothing Product Showcase Website, a sleek, immersive, and ultra-modern landing page for the Nothing Phone 3a and 3a Pro. This project is a visual treat crafted using cutting-edge web technologies like Three.js, GSAP, and Tailwind CSS, complete with buttery-smooth scroll-sequenced animations and cinematic transitions.

🔥 Features

• 🎥 Scroll-based Image Sequence Animations
  Hyper-smooth scroll animations using frame-by-frame image sequencing for that crisp, premium feel.

• 💫 Three.js Magic
  3D magic in the browser — bringing abstract product interactions and elegant visuals to life.

• ⚡ GSAP for Animations
  Frame-accurate scroll triggers, silky transitions, and custom animations that elevate UX.

• 🌪️ Tailwind CSS for Design System
  Modern responsive UI using Tailwind’s utility-first approach. Fast, clean, consistent.

• 🎬 Hand-Crafted Video Edits
  All video content has been personally stylized and edited with love for a unique brand feel. Think modern, edgy, minimalist vibes with a sprinkle of rebellion.

• 📱 Responsive Design
  Optimized for all devices — from flagship phones to desktop widescreens.

---

🧠 Tech Stack

• Framework: Vanilla JS + HTML/CSS
• Styling: Tailwind CSS
• Animations: GSAP (ScrollTrigger, Timeline)
• 3D: Three.js
• Media: Custom edited videos, image sequences, transparent overlays
• Tools: VS Code, ImageMagick, FFmpeg, Adobe Suite (for media editing)

---

🚀 Getting Started

1. Clone the repo

Installation

1. Clone the repository:

   git clone https://github.com/shoaib-inamdar/The-UXperts-Skillsvarz-Round-1.git
   cd The-UXperts-Skillsvarz-Round-1
   

2. Install dependencies:

   npm install
   

3. Run the app:

   npm run dev