{"id":19384647,"url":"https://github.com/brunos3d/video-ambilight","last_synced_at":"2025-04-06T05:16:14.516Z","repository":{"id":65460956,"uuid":"394553441","full_name":"brunos3d/video-ambilight","owner":"brunos3d","description":"🌈 project demonstrating an Ambilight effect with examples in HTML/CSS/Canvas, and React/Next.js.","archived":false,"fork":false,"pushed_at":"2024-12-23T08:47:59.000Z","size":1823,"stargazers_count":116,"open_issues_count":2,"forks_count":10,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-03-30T03:11:02.502Z","etag":null,"topics":["ambilight","clone","css","design","effect","event","fx","html5","javascript","nextjs","nextjs-conf","sample","styles"],"latest_commit_sha":null,"homepage":"https://brunos3d.github.io/video-ambilight/","language":"TypeScript","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/brunos3d.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}},"created_at":"2021-08-10T06:49:14.000Z","updated_at":"2025-02-02T13:45:09.000Z","dependencies_parsed_at":"2024-12-23T09:32:23.824Z","dependency_job_id":"28834adb-a16a-41b7-9bfd-1c301d0abfd3","html_url":"https://github.com/brunos3d/video-ambilight","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brunos3d%2Fvideo-ambilight","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brunos3d%2Fvideo-ambilight/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brunos3d%2Fvideo-ambilight/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brunos3d%2Fvideo-ambilight/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brunos3d","download_url":"https://codeload.github.com/brunos3d/video-ambilight/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247436286,"owners_count":20938533,"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","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":["ambilight","clone","css","design","effect","event","fx","html5","javascript","nextjs","nextjs-conf","sample","styles"],"created_at":"2024-11-10T09:31:51.487Z","updated_at":"2025-04-06T05:16:14.436Z","avatar_url":"https://github.com/brunos3d.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Video Ambilight 🌈✨\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://brunos3d.github.io/video-ambilight/\"\u003e\n    \u003cimg alt=\"React Ambilight Preview\" src=\"./docs/images/youtube.png\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## 📖 About the Project\n\nThis project provides a **React component for creating Ambilight effects** with YouTube videos or HTML video elements. It also includes different demos and an example of the component integration in various environments like plain HTML and Next.js.\n\n## 🚀 Getting Started\n\nTo get started with the `react-ambilight` component, you can install it via npm using the following command:\n\n```bash\nnpm install react-ambilight\n```\n\nPlease refer to the [package README](./packages/react-ambilight/README.md) for detailed installation and usage instructions.\n\nhttps://www.npmjs.com/react-ambilight\n\n## 📂 Project Structure\n\nThe project is organized into the following directories:\n\n- **`docs/`**: Contains demo projects showcasing the use of the Ambilight component in different environments.\n  - **`canvas/`**: A demo using a simple HTML5 `\u003ccanvas\u003e` element.\n  - **`images/`**: Contains images used in the demos.\n  - **`nextjs/`**: A demo for integrating the component in a Next.js project.\n  - **`youtube/`**: A demo for integrating the component with YouTube videos.\n- **`packages/`**: Contains the `react-ambilight` component package for NPM distribution.\n  - **`react-ambilight/`**: The React component package. This can be published to NPM and used in any React project.\n  - It also includes configuration files for building and distributing the package.\n- **`LICENSE`**: The project's license file.\n\n## 📄 License\n\nThis project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.\n\n---\n\n💻 **Made with love by [Bruno](https://github.com/brunos3d)**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrunos3d%2Fvideo-ambilight","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrunos3d%2Fvideo-ambilight","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrunos3d%2Fvideo-ambilight/lists"}