{"id":29637660,"url":"https://github.com/aarjjun/spinhack-netflix-detergent-","last_synced_at":"2026-05-05T17:33:39.888Z","repository":{"id":305539762,"uuid":"1023152848","full_name":"aarjjun/spinhack-netflix-detergent-","owner":"aarjjun","description":"🧼 Netflix Detergent – Now Streaming Freshness","archived":false,"fork":false,"pushed_at":"2025-07-20T16:58:33.000Z","size":28966,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-07T23:27:13.947Z","etag":null,"topics":["creative-coding","framer-motion","fun-project","futuristic-ui","hackathon-project","marketing-website","netflix","netflix-themed","parody-project","product-design","product-landing-page","tailwindcss","themed-website","ui-ux-design"],"latest_commit_sha":null,"homepage":"https://remarkable-bavarois-c11632.netlify.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aarjjun.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-20T16:29:38.000Z","updated_at":"2025-07-20T16:58:36.000Z","dependencies_parsed_at":"2025-07-20T18:32:54.603Z","dependency_job_id":null,"html_url":"https://github.com/aarjjun/spinhack-netflix-detergent-","commit_stats":null,"previous_names":["aarjjun/spinhack-netflix-detergent-"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/aarjjun/spinhack-netflix-detergent-","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aarjjun%2Fspinhack-netflix-detergent-","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aarjjun%2Fspinhack-netflix-detergent-/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aarjjun%2Fspinhack-netflix-detergent-/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aarjjun%2Fspinhack-netflix-detergent-/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aarjjun","download_url":"https://codeload.github.com/aarjjun/spinhack-netflix-detergent-/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aarjjun%2Fspinhack-netflix-detergent-/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32660378,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-05T11:29:49.557Z","status":"ssl_error","status_checked_at":"2026-05-05T11:29:48.587Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["creative-coding","framer-motion","fun-project","futuristic-ui","hackathon-project","marketing-website","netflix","netflix-themed","parody-project","product-design","product-landing-page","tailwindcss","themed-website","ui-ux-design"],"created_at":"2025-07-21T19:01:04.223Z","updated_at":"2026-05-05T17:33:39.860Z","avatar_url":"https://github.com/aarjjun.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🎬 Netflix Detergent\n### *\"Now Streaming Freshness. Clean Has Never Been This Cinematic.\"*\n\n[![Made with React](https://img.shields.io/badge/Made%20with-React-61DAFB?style=for-the-badge\u0026logo=react)](https://reactjs.org/)\n[![Tailwind CSS](https://img.shields.io/badge/Styled%20with-Tailwind%20CSS-38B2AC?style=for-the-badge\u0026logo=tailwind-css)](https://tailwindcss.com/)\n[![Netflix Inspired](https://img.shields.io/badge/Netflix-Inspired-E50914?style=for-the-badge\u0026logo=netflix)](https://netflix.com)\n\n---\n\n## 🌟 Overview\n\n**Netflix Detergent** is a wildly creative, fully interactive parody website that reimagines what would happen if Netflix launched their own luxury detergent line. This isn't just a website—it's a complete entertainment experience that turns laundry into a binge-worthy streaming session.\n\nBuilt with cutting-edge frontend technologies, this project showcases the power of creative UI/UX design, interactive animations, and Netflix-authentic styling to create an unforgettable user experience.\n\n---\nPowerPoint Presentation of the Project:\n[Click to view](https://docs.google.com/presentation/d/1PxpQKsQLNPFJD_qz3GhIn0ovXHfBiCeS/edit?usp=drive_link\u0026ouid=104734464690108009245\u0026rtpof=true\u0026sd=true)\n- **Project Repository**: [GitHub Link](https://github.com/IEEESCE/Decrypts)\n- **Demo Site**: [Live Demo Link](https://remarkable-bavarois-c11632.netlify.app/)\n- **Issues**: Report bugs or request features via GitHub Issues\n- **Demo Video** :[Live Demo Video](https://drive.google.com/file/d/1mxswtPV1hO3qI9OpRQ6pKoQTmE6acY7R/view?usp=drive_link)\n## 🎭 Features\n\n### 🎬 **Core Experience**\n- **Netflix-Style Loading Screen** with ta-dum sound effects and spinning detergent bottle\n- **Cinematic Hero Section** with floating bubble animations and 3D spinning bottle\n- **Netflix-Authentic UI** with exact color schemes, typography, and styling\n- **Responsive Design** that works seamlessly across all devices\n\n### 🧼 **Product Experience**\n- **Netflix-Style Carousel** for genre-scented detergent collection\n- **Interactive Product Trailers** with full Netflix video player controls\n- **Genre-Themed Products** (Action, Romance, Thriller, Comedy, Drama)\n- **AI-Powered MoodMatch™** system for personalized scent recommendations\n\n### 🎮 **Interactive Features**\n- **Washing Machine Theater** - Turn your laundry into a blockbuster movie experience\n- **Interactive Detergent Laboratory** - Mix and match genres to create custom bottles\n- **Real-Time Sound Visualizer** with genre-specific audio effects\n- **Binge Washing Streaks** - Gamification system with XP, levels, and achievements\n- **Netflix-Style Video Players** with skip intro, continue watching, and more\n\n### 🔮 **Advanced Functionality**\n- **Local Storage Persistence** for user stats, achievements, and custom bottles\n- **Particle Systems** and real-time animations throughout\n- **Audio Simulation System** with visual feedback and controls\n- **Easter Eggs** including KonMari references and \"Are you still rinsing?\" popups\n- **Achievement System** with Netflix-style unlock animations\n\n---\n\n## 🚀 Getting Started\n\n### Prerequisites\n- Node.js (v16 or higher)\n- npm or yarn package manager\n\n### Installation\n\n1. **Clone the repository**\n   ```bash\n   git clone https://github.com/IEEESCE/Decrypts\n   cd Decrypts\n   ```\n\n2. **Install dependencies**\n   ```bash\n   cd frontend\n   npm install\n   # or\n   yarn install\n   ```\n\n3. **Start the development server**\n   ```bash\n   npm start\n   # or\n   yarn start\n   ```\n\n4. **Open your browser**\n   Navigate to `http://localhost:3000` and experience the magic!\n\n---\n\n## 🎨 Tech Stack\n\n### **Frontend Framework**\n- **React 19** - Latest React with concurrent features\n- **React Router** - Client-side routing\n- **React Hooks** - Modern state management\n\n### **Styling \u0026 UI**\n- **Tailwind CSS** - Utility-first CSS framework\n- **shadcn/ui Components** - High-quality UI components\n- **Custom Animations** - CSS and JavaScript-powered effects\n- **Responsive Design** - Mobile-first approach\n\n### **State Management**\n- **React Context** - Global state management\n- **Local Storage** - Persistent user data\n- **Session Storage** - Loading screen optimization\n\n### **Interactive Features**\n- **Custom Hooks** - Reusable logic components\n- **Event Handlers** - Mouse, keyboard, and scroll interactions\n- **Animation Libraries** - Smooth transitions and effects\n\n---\n\n## 📁 Project Structure\n\n```\nnetflix-detergent/\n├── frontend/\n│   ├── public/\n│   ├── src/\n│   │   ├── components/\n│   │   │   ├── ui/                    # shadcn/ui components\n│   │   │   ├── AudioSimulator.jsx     # Sound effect simulation\n│   │   │   ├── BingeWashingStreaks.jsx # Gamification system\n│   │   │   ├── EasterEggs.jsx         # Hidden features\n│   │   │   ├── FeatureShowcase.jsx    # Netflix-style features\n│   │   │   ├── Footer.jsx             # Site footer\n│   │   │   ├── HeroSection.jsx        # Landing hero section\n│   │   │   ├── InteractiveBottleLab.jsx # Custom bottle creator\n│   │   │   ├── MoodMatcher.jsx        # AI mood matching\n│   │   │   ├── NetflixCarousel.jsx    # Product carousel\n│   │   │   ├── NetflixLoadingScreen.jsx # Loading screen\n│   │   │   ├── NetflixVideoPlayer.jsx  # Video player component\n│   │   │   ├── PricingPlans.jsx       # Subscription plans\n│   │   │   ├── ProductShowcase.jsx    # Product display\n│   │   │   ├── SoundVisualizer.jsx    # Audio visualizer\n│   │   │   ├── Testimonials.jsx       # User reviews\n│   │   │   └── WashingMachineTheater.jsx # Interactive theater\n│   │   ├── data/\n│   │   │   └── mockData.js            # All mock data\n│   │   ├── hooks/\n│   │   │   └── use-toast.js           # Toast notifications\n│   │   ├── App.js                     # Main app component\n│   │   └── index.js                   # React entry point\n│   ├── package.json\n│   └── tailwind.config.js\n└── README.md\n```\n\n---\n\n## 🎯 Key Components\n\n### **NetflixLoadingScreen**\n- Authentic Netflix loading experience\n- Progress tracking with multiple phases\n- 3D spinning detergent bottle animation\n- Ta-dum sound effect simulation\n- Gradient backgrounds and particle effects\n\n### **NetflixCarousel**\n- Multi-row product carousels\n- Auto-advancing with hover pause\n- Expandable product cards\n- Netflix-style hover effects\n- Integrated trailer playback\n\n### **WashingMachineTheater**\n- Interactive washing machine simulation\n- Genre-based color theming\n- Real-time progress tracking\n- Particle effects during washing\n- Netflix-style controls and status\n\n### **InteractiveBottleLab**\n- Custom bottle creation system\n- Genre mixing with up to 3 combinations\n- Real-time 3D bottle preview\n- Rarity system (Common, Rare, Legendary)\n- Local storage persistence\n\n### **BingeWashingStreaks**\n- Complete gamification system\n- XP progression and levels\n- Achievement unlocks\n- Daily streak tracking\n- Netflix-style recommendations\n\n---\n\n## 🎨 Design Philosophy\n\n### **Netflix Authenticity**\nEvery element is designed to feel like a genuine Netflix product:\n- Exact color schemes (#E50914 red, #000000 black)\n- Netflix typography and spacing\n- Authentic UI patterns and interactions\n- Video player controls and styling\n\n### **Interactive Storytelling**\nThe website tells a story through interaction:\n- Progressive disclosure of features\n- Narrative-driven user journey\n- Easter eggs and hidden surprises\n- Contextual animations and feedback\n\n### **Performance \u0026 Polish**\n- Smooth 60fps animations\n- Optimized loading and rendering\n- Responsive across all devices\n- Accessible design patterns\n\n---\n\n## 🏆 Features Showcase\n\n### **🎬 Entertainment Features**\n- Netflix-style video trailers for each product\n- Continue watching functionality\n- Skip intro and pause controls\n- Personalized recommendations\n\n### **🎮 Gamification**\n- User leveling system (Casual Viewer → Netflix Legend)\n- Achievement system with 8+ unlockable badges\n- Daily goals and streak tracking\n- XP rewards for interactions\n\n### **🔧 Technical Innovations**\n- Real-time audio visualization\n- Particle system animations\n- Local storage for persistence\n- Custom React hooks for reusability\n- Advanced CSS animations and transforms\n\n### **🎭 Creative Elements**\n- Genre-based theme switching\n- Interactive mood matching AI\n- Custom bottle laboratory\n- Netflix-style easter eggs\n- Cinematic loading experiences\n\n---\n\n## 📱 Responsive Design\n\nThe entire experience is fully responsive:\n- **Mobile First** - Optimized for smartphones\n- **Tablet Friendly** - Adapted layouts for tablets\n- **Desktop Enhanced** - Full features on desktop\n- **Touch Interactions** - Gesture support for mobile devices\n\n---\n\n## 🎪 Easter Eggs \u0026 Hidden Features\n\n- **KonMari Search** - Type \"KonMari\" in the hidden search to trigger Marie Kondo folding animation\n- **Netflix Logo Click** - Click the Netflix logo for ta-dum sound effects\n- **Scroll Detection** - \"Are you still rinsing?\" popup after scrolling to bottom\n- **Achievement Unlocks** - Hidden achievements for power users\n- **Sound Visualizations** - Real-time audio bars and particle effects\n\n---\n\n## 🤝 Contributing\n\nWe welcome contributions to make Netflix Detergent even more spectacular!\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n---\n\n## 📄 License\n\nThis project is created for educational and entertainment purposes. Netflix is a trademark of Netflix, Inc. This is a parody/fan project and not affiliated with Netflix.\n\n---\n\n## 🙏 Acknowledgments\n\n- **Netflix** - For the incredible streaming platform that inspired this project\n- **shadcn/ui** - For the beautiful UI components\n- **Tailwind CSS** - For the utility-first styling approach\n- **React Team** - For the amazing frontend framework\n- **Unsplash** - For the high-quality product images\n\n---\n---\n\n\u003cdiv align=\"center\"\u003e\n\n### 🎬 **Made with ❤️ and a lot of Netflix binge-watching** 🍿\n\n*\"Because clean clothes deserve a cinematic experience.\"*\n\n![Netflix Detergent Logo](logo.png)\n\n**⭐ Don't forget to star this repository if you enjoyed the experience! ⭐**\n\n\u003c/div\u003e\n\n---\n\n## 📊 Project Stats\n\n- **Components**: 15+ React components\n- **Interactive Features**: 10+ unique interactions\n- **Animations**: 20+ custom animations\n- **Achievement System**: 8 unlockable achievements\n- **Product Variants**: 5 genre-themed detergents\n- **Easter Eggs**: 5+ hidden surprises\n- **Lines of Code**: 3000+ lines of creative frontend code\n\n*Turn your laundry routine into a Netflix experience! 🧼📺✨*\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faarjjun%2Fspinhack-netflix-detergent-","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faarjjun%2Fspinhack-netflix-detergent-","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faarjjun%2Fspinhack-netflix-detergent-/lists"}