Ambient Player

InstallationCopy Anchor Link

Minimal UsageCopy Anchor Link

import { AmbientPlayer } from "@/components/ambient-player/player"

const src =
  "https://ad391cc0d55b44c6a86d232548adc225.mediatailor.us-east-1.amazonaws.com/v1/master/d02fedbbc5a68596164208dd24e9b48aa60dadc7/singssai/master.m3u8"

export function Player() {
  return <AmbientPlayer source={src} />
}

Tune the ambient layer with ambientConfig:

<AmbientPlayer
  source={src}
  ambientConfig={{
    blurStrength: 56,
    opacity: 0.45,
    saturation: 1.35,
  }}
/>

FeaturesCopy Anchor Link

• Builds on the free VideoPlayer block.
• Adds a pro MediaAmbient layer behind the video.
• Uses slow frame sampling and long crossfades for a cinematic ambience.
• Preserves the same source, loading, mediaProps, playlist, captions, PiP, and playback controls as VideoPlayer.

NotesCopy Anchor Link

• AmbientPlayer depends on the free video-player registry item and the pro media-ambient registry item.
• Use ambientConfig for visual tuning without changing the base player API.
• For the full block loading model, see Usage.

API ReferenceCopy Anchor Link