{"id":31765093,"url":"https://github.com/r3dk3ll/black-mirror","last_synced_at":"2026-05-17T15:36:29.782Z","repository":{"id":313267535,"uuid":"1050138165","full_name":"R3DK3LL/Black-Mirror","owner":"R3DK3LL","description":"Real-time camera mirror rendered as split-flap display with interactive overlays","archived":false,"fork":false,"pushed_at":"2025-09-04T08:47:07.000Z","size":37,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-04T23:45:40.850Z","etag":null,"topics":["arcade","browser","camera","game","mirror","mirroring","real-time","vanilla-js","webrtc"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/R3DK3LL.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2025-09-04T02:19:01.000Z","updated_at":"2025-09-04T09:03:42.000Z","dependencies_parsed_at":"2025-09-04T23:45:45.319Z","dependency_job_id":"1d80fa88-ef23-4b74-bf3d-f851fd3ce72a","html_url":"https://github.com/R3DK3LL/Black-Mirror","commit_stats":null,"previous_names":["r3dk3ll/black-mirror"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/R3DK3LL/Black-Mirror","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/R3DK3LL%2FBlack-Mirror","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/R3DK3LL%2FBlack-Mirror/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/R3DK3LL%2FBlack-Mirror/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/R3DK3LL%2FBlack-Mirror/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/R3DK3LL","download_url":"https://codeload.github.com/R3DK3LL/Black-Mirror/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/R3DK3LL%2FBlack-Mirror/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279002382,"owners_count":26083356,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-09T02:00:07.460Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["arcade","browser","camera","game","mirror","mirroring","real-time","vanilla-js","webrtc"],"created_at":"2025-10-10T00:13:02.909Z","updated_at":"2025-10-10T00:13:07.052Z","avatar_url":"https://github.com/R3DK3LL.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Black Mirror\n\nReal-time camera mirror with split-flap display rendering and interactive game modes.\n\n\u003cdiv align=\"center\"\u003e\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)\n[![Status](https://img.shields.io/badge/Status-Ready-green.svg)](#quick-start)\n[![Platform](https://img.shields.io/badge/Platform-Browser-orange.svg)](#requirements)\n\n\u003c/div\u003e\n\n---\n\n## Overview\n\nCamera feed converts to mechanical split-flap panel display. Three interactive modes overlay game logic onto the real-time mirror.\n\n## Modes\n\n**Mirror** - Direct camera reflection rendered as individual flip panels  \n**Snake** - AI snake avoids dark areas where user appears  \n**Dot Collector** - Character collects items while avoiding user silhouette\n\n## Visual Styles\n\n**Airport** - Classic mechanical panels with realistic shadows  \n**Large** - Chunky pixel blocks for retro gaming aesthetic  \n**Minecraft** - Cubic voxel rendering with pixelated textures  \n**Retro** - Synthwave colors with neon glow effects  \n**Bright** - High contrast colors with animated backgrounds\n\n## Controls\n\n| Function | Description |\n|----------|-------------|\n| Start Mirror | Initialize camera capture and display |\n| Mode Selector | Switch between Mirror/Snake/Dot Collector |\n| Style Selector | Change visual appearance theme |\n| Size Slider | Adjust individual panel dimensions |\n| Screenshot | Export current frame as PNG |\n| Record | Capture gameplay video as WebM |\n\n## Quick Start\n\n\u003ctable\u003e\n\u003ctr\u003e\n\u003ctd align=\"center\"\u003e\n\n**Step 1**  \nOpen `index.html`\n\n\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\n\n**Step 2**  \nAllow camera access\n\n\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\n\n**Step 3**  \nSelect mode \u0026 style\n\n\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\n\n**Step 4**  \nAdjust settings \u0026 play\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n## Requirements\n\n- **Browser**: Chrome, Firefox, Safari, or Edge\n- **Camera**: WebRTC-compatible device\n- **JavaScript**: Modern ES6+ support\n- **Permissions**: Camera access required\n\n## Technical Details\n\n**Performance**\n- 30fps target frame rate with adaptive throttling\n- Grid size calculated from window dimensions\n- Hardware-accelerated CSS transitions\n- Canvas-based image processing at reduced resolution\n\n**Architecture**\n- Modular JavaScript without external dependencies\n- CSS-based theming system\n- WebRTC camera integration\n- Real-time pixel data processing\n\n## File Structure\n\n```\nindex.html          Main application entry point\napp.js             Core engine and UI management\nstyles/            CSS theme files\n  ├── base.css     Core UI styling\n  ├── airport.css  Mechanical panel theme\n  ├── large.css    Chunky pixel theme\n  ├── minecraft.css Voxel-style theme\n  ├── retro.css    Synthwave neon theme\n  └── bright.css   High contrast theme\nmodes/             Game logic modules\n  ├── mirror.js    Direct reflection mode\n  ├── snake.js     AI avoidance game\n  └── capture.js   Screenshot/video functions\n```\n\n## Development\n\n**Adding Game Mode**\n1. Create new file in `modes/` directory\n2. Implement `init(app)` and `update(app, imageData)` functions\n3. Add option to mode selector in `index.html`\n4. Handle mode switch in `app.js`\n\n**Adding Visual Style**  \n1. Create new CSS file in `styles/` directory\n2. Define `.flap.black` and `.flap.white` styles\n3. Add option to style selector in `index.html`\n\n## Browser Compatibility\n\n| Browser | Version | Support |\n|---------|---------|---------|\n| Chrome | 60+ | Full |\n| Firefox | 55+ | Full |\n| Safari | 11+ | Full |\n| Edge | 79+ | Full |\n\n## License\n\nMIT License - see [LICENSE](LICENSE) file for details.\n\n## No Dependencies\n\nPure HTML5, CSS3, and JavaScript implementation. No frameworks, build tools, or external libraries required.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fr3dk3ll%2Fblack-mirror","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fr3dk3ll%2Fblack-mirror","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fr3dk3ll%2Fblack-mirror/lists"}