https://github.com/brunos3d/video-ambilight

🌈 project demonstrating an Ambilight effect with examples in HTML/CSS/Canvas, and React/Next.js.
https://github.com/brunos3d/video-ambilight

ambilight clone css design effect event fx html5 javascript nextjs nextjs-conf sample styles

Last synced: 2 days ago
JSON representation

🌈 project demonstrating an Ambilight effect with examples in HTML/CSS/Canvas, and React/Next.js.

• Host: GitHub
• URL: https://github.com/brunos3d/video-ambilight
• Owner: brunos3d
• License: mit
• Created: 2021-08-10T06:49:14.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-12-23T08:47:59.000Z (about 1 month ago)
• Last Synced: 2025-01-20T22:09:20.800Z (10 days ago)
• Topics: ambilight, clone, css, design, effect, event, fx, html5, javascript, nextjs, nextjs-conf, sample, styles
• Language: TypeScript
• Homepage: https://brunos3d.github.io/video-ambilight/
• Size: 1.74 MB
• Stars: 113
• Watchers: 7
• Forks: 10
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Video Ambilight 🌈✨



  

    

  



## 📖 About the Project

This 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.

## 🚀 Getting Started

To get started with the `react-ambilight` component, you can install it via npm using the following command:

```bash

npm install react-ambilight

```

Please refer to the [package README](./packages/react-ambilight/README.md) for detailed installation and usage instructions.

https://www.npmjs.com/react-ambilight

## 📂 Project Structure

The project is organized into the following directories:

- **`docs/`**: Contains demo projects showcasing the use of the Ambilight component in different environments.

  - **`canvas/`**: A demo using a simple HTML5 `` element.

  - **`images/`**: Contains images used in the demos.

  - **`nextjs/`**: A demo for integrating the component in a Next.js project.

  - **`youtube/`**: A demo for integrating the component with YouTube videos.

- **`packages/`**: Contains the `react-ambilight` component package for NPM distribution.

  - **`react-ambilight/`**: The React component package. This can be published to NPM and used in any React project.

  - It also includes configuration files for building and distributing the package.

- **`LICENSE`**: The project's license file.

## 📄 License

This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.

---

💻 **Made with love by [Bruno](https://github.com/brunos3d)**