{"id":34830414,"url":"https://github.com/umerfarok/qr-generator","last_synced_at":"2026-04-22T15:38:58.866Z","repository":{"id":246591139,"uuid":"821561268","full_name":"umerfarok/qr-generator","owner":"umerfarok","description":"very power full and customizable react backgrounds animations  ","archived":false,"fork":false,"pushed_at":"2025-08-31T09:32:03.000Z","size":1077,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-31T11:34:56.135Z","etag":null,"topics":["animations","backgrounds","react"],"latest_commit_sha":null,"homepage":"https://qr-generator-murex.vercel.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/umerfarok.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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-06-28T20:36:01.000Z","updated_at":"2025-08-31T09:32:06.000Z","dependencies_parsed_at":"2024-06-28T22:31:44.916Z","dependency_job_id":"99c3f5a8-04b3-4b66-9b96-e5de9da60a85","html_url":"https://github.com/umerfarok/qr-generator","commit_stats":null,"previous_names":["umerfarok/qr-generator"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/umerfarok/qr-generator","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umerfarok%2Fqr-generator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umerfarok%2Fqr-generator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umerfarok%2Fqr-generator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umerfarok%2Fqr-generator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/umerfarok","download_url":"https://codeload.github.com/umerfarok/qr-generator/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umerfarok%2Fqr-generator/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32143668,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-22T15:33:03.595Z","status":"ssl_error","status_checked_at":"2026-04-22T15:30:42.712Z","response_time":58,"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":["animations","backgrounds","react"],"created_at":"2025-12-25T15:49:54.553Z","updated_at":"2026-04-22T15:38:58.855Z","avatar_url":"https://github.com/umerfarok.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# QR Code Generator with Animated Backgrounds v2.0\n\nA modern QR code generator powered by Animated Backgrounds v2.0, featuring dynamic themed animations, interactive particles, and comprehensive performance monitoring.\n\n## 🚀 Features\n\n- **QR Code Generation**: Create QR codes for URLs, text, email, and phone numbers\n- **Animated Backgrounds v2.0**: \n  - 🎨 8 Themes (gaming, portfolio, landing, presentation, wellness, party, cyberpunk, retro)\n  - 🎮 Interactive animations with mouse/touch support\n  - 🏗️ Layered backgrounds with blend modes\n  - 🎛️ Full animation controls (play/pause/speed)\n  - 📊 Real-time performance monitoring\n  - 📱 Mobile optimized with gesture support\n- **Export Options**: Download as PNG or PDF\n- **Customization**: QR color, background color, error correction levels\n\n## 🛠️ Installation \u0026 Setup\n\n### Standard Installation\n```bash\nnpm install\nnpm start\n```\n\n### Local Development with Animated Backgrounds\n\nThis project uses a local development version of `animated-backgrounds` v2.0. If you need to modify the animated backgrounds package:\n\n#### Option 1: Using Tarball (Recommended)\n```bash\n# The package is already installed from tarball in package.json:\n# \"animated-backgrounds\": \"file:../animated-backgrounds/animated-backgrounds-2.0.0.tgz\"\n\n# To rebuild the package after changes:\ncd ../animated-backgrounds\nnpm run build\nnpm pack\ncd ../qrcodegen\nnpm install ../animated-backgrounds/animated-backgrounds-2.0.0.tgz\nnpm start\n```\n\n#### Option 2: Using npm link (May cause React conflicts)\n```bash\n# 1. Link the package\ncd ../animated-backgrounds\nnpm link\n\n# 2. Link in this project\ncd ../qrcodegen\nnpm link animated-backgrounds\n\n# 3. Start development server\nnpm start\n\n# Note: If you encounter \"Invalid hook call\" errors, use Option 1 instead\n```\n\n#### Troubleshooting React Hook Errors\nIf you encounter React hook errors during development:\n\n1. **Unlink the package**:\n   ```bash\n   npm unlink animated-backgrounds\n   ```\n\n2. **Clean and rebuild the animated-backgrounds package**:\n   ```bash\n   cd ../animated-backgrounds\n   npm uninstall react react-dom  # Remove React dependencies\n   npm run build\n   npm pack\n   ```\n\n3. **Install from tarball**:\n   ```bash\n   cd ../qrcodegen\n   npm install ../animated-backgrounds/animated-backgrounds-2.0.0.tgz\n   npm start\n   ```\n\n## 🎮 Usage\n\n### QR Generator Mode\n1. Enter a URL in the input field\n2. Select QR code type (URL, Text, Email, Phone)\n3. Click \"Generate QR Code\"\n4. Customize colors and error correction level\n5. Download as PNG or PDF\n\n### Background Controls\n- **Background Mode**: Choose between themed, interactive, layered, or controlled\n- **Theme Selection**: Pick from 8 predefined themes\n- **Animation Control**: Select specific animations or use random selection\n- **Performance Monitoring**: View real-time FPS and performance metrics\n\n### Feature Demo Mode\nClick \"🎨 Feature Demo\" to explore all v2.0 features with interactive controls.\n\n## 🎨 Available Animations\n\n### Themed Animations (19 total)\n- `autumnLeaves`, `oceanWaves`, `neuralNetwork`, `dnaHelix`, `geometricShapes`\n- `fallingFoodFiesta`, `starryNight`, `floatingBubbles`, `gradientWave`\n- `particleNetwork`, `galaxySpiral`, `fireflies`, `matrixRain`, `rainbowWaves`\n- `quantumField`, `electricStorm`, `cosmicDust`, `neonPulse`, `auroraBorealis`\n\n### Background Modes\n- **Themed**: Choose animations with theme-based styling\n- **Interactive**: Mouse/touch particle interactions\n- **Layered**: Multiple animations with blend modes\n- **Controlled**: Full programmatic control\n\n## 📊 Performance Features\n\n- **Real-time FPS monitoring**\n- **Memory usage tracking**\n- **Adaptive performance optimization**\n- **Performance level indicators** (excellent/good/fair/poor)\n- **Warning system** for performance issues\n\n## 🛠️ Development\n\n### Project Structure\n```\nqrcodegen/\n├── src/\n│   ├── components/\n│   │   ├── ui/          # Shadcn UI components\n│   │   └── FeatureDemo.js\n│   ├── lib/\n│   └── App.js           # Main application\n├── public/\n└── package.json\n```\n\n### Dependencies\n- **React 18.3.1**: Main framework\n- **animated-backgrounds v2.0.0**: Background animations (local tarball)\n- **Radix UI**: UI components\n- **Tailwind CSS**: Styling\n- **jsPDF**: PDF generation\n- **html-to-image**: Image export\n\n## 🔧 Troubleshooting\n\n### Common Issues\n\n1. **React Hook Call Errors**\n   - Use tarball installation instead of npm link\n   - Ensure single React version\n\n2. **Animation Flashing/Remounting**\n   - Check console logs for debugging info\n   - Verify stable component keys\n\n3. **Build Errors**\n   - Clear node_modules and reinstall\n   - Rebuild animated-backgrounds package\n\n### Performance Issues\n- Enable adaptive performance in settings\n- Use performance monitoring to identify bottlenecks\n- Consider lighter themes for lower-end devices\n\n## 📝 License\n\nMIT License - see LICENSE file for details.\n\n## 🤝 Contributing\n\n1. Fork the repository\n2. Create a feature branch\n3. Make your changes\n4. Test thoroughly\n5. Submit a pull request\n\n---\n\n**Powered by Animated Backgrounds v2.0** 🎨✨","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fumerfarok%2Fqr-generator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fumerfarok%2Fqr-generator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fumerfarok%2Fqr-generator/lists"}