react-ambilight

🌈 Video Ambilight

A lightweight React component to create a stunning Ambilight effect for YouTube videos. This package is inspired by the visual effects seen in modern video presentations, adding an immersive ambient glow that synchronizes with your content.

✨ Features

• Works seamlessly with YouTube videos using the YouTube IFrame API.
• Supports synchronized playback between the video and the Ambilight effect.
• Customizable and easy to integrate into any React project.

📦 Installation

Install the package via npm:

npm install react-ambilight

or using Yarn:

yarn add react-ambilight

🔧 Usage

Here's a quick example of how to use the component:

import React from 'react'
import { VideoAmbilight } from 'react-ambilight'
import 'react-ambilight/dist/style.css'

export default function App() {
  return (
    <div style={{ maxWidth: '800px', margin: '0 auto' }}>
      <VideoAmbilight videoId='dQw4w9WgXcQ' />
    </div>
  )
}

Customize the component by passing a className or classNames object with custom class names:

// tailwind example
import React from 'react'
import { VideoAmbilight } from 'react-ambilight'
import 'react-ambilight/dist/style.css'

export default function App() {
  return (
    <div className='max-w-4xl mx-auto'>
      <VideoAmbilight
        videoId='dQw4w9WgXcQ'
        classNames={{
          videoWrapper: 'relative',
          ambilightWrapper: 'absolute inset-0',
          aspectRatio: 'aspect-w-16 aspect-h-9',
          ambilight: 'bg-black opacity-50',
          ambilightVideo: 'hidden',
        }}
      />
    </div>
  )
}

Props

Prop	Type	Description	Required
videoId	string	The YouTube video ID to display.	Yes
className	string	Optional class name for styling.	No
classNames	object	Optional object for custom class names.	No

classNames Object

The classNames object can have the following properties:

Property	Type	Description
videoWrapper	string	Class name for the video wrapper.
ambilightWrapper	string	Class name for the ambilight wrapper.
aspectRatio	string	Class name for the aspect ratio container.
ambilight	string	Class name for the ambilight effect container.
ambilightVideo	string	Class name for the ambilight video container.

🚀 Demo

Check out a live demo of the Ambilight effect: Live Demo

🛠 How It Works

The component leverages the YouTube IFrame API to create two synchronized players:

• Primary Player: Displays the video.
• Ambilight Player: Runs a low-quality version of the same video in the background to generate the glowing effect.

🧩 Contributing

Contributions are welcome! If you encounter any issues or have suggestions, feel free to open an issue or submit a pull request.

• Fork the repository.
• Create a feature branch: git checkout -b feature-name.
• Commit your changes: git commit -m 'Add feature-name'.
• Push to the branch: git push origin feature-name.
• Open a pull request.

📄 License

This project is licensed under the MIT License. See the LICENSE file for details.

🙌 Acknowledgements

Inspired by the Ambilight effect seen during the Next.js Conf presentations.

💻 Made with ❤️ by Bruno Silva