react-ambiance v0.1.3

React Ambiance

Components that create ambiance from image or video. This was inspired by YouTube's Ambient Mode.

Demos and docs.

import { AmbientVideo } from 'react-ambiance';

<AmbientVideo>
  <video
    muted
    controls
    height={320}
    width={480}
    loop
    autoPlay
    src="example-video.mp4"
  />
</AmbientVideo>;

Props

• scale: The ambiance scale
• blur: Blur level in px
• opacity: The ambiance opacity
• borderRadius: The Ambiance border radius
• frameRate: Controls the frame rate (may affect performace if set to a low value)
• initialFrameAlpha: The initial alpha of each frame (the lower the value the smoother the transition between frames)
• appear: Apply a transition on the initial render
• watchSourceResize: Watches source size changes