Video with Sound

A video player with parallax depth, separate audio track, and animated sound wave button.

Move your cursor and watch the video shift with a smooth parallax effect - the video and sound button move independently at different intensities, creating a layered sense of depth. The component also handles autoplay intelligently, pausing when scrolled out of view and resuming when back in.

Features:

• Mouse parallax on video (intensity 3) and sound button (intensity 1) - independent depth layers

• Animated sound wave button - amplitude eases between muted and active states

• Separate audio track support (file or URL), synced to the video

• Autoplay with scroll-based pause and resume via IntersectionObserver

• Mobile-friendly: parallax disabled on touch devices, button repositions to fixed corner

• Full property controls: video source, audio, volume, default sound state, button style and position

• Accessible: aria labels, semantic button

Designed and developed with the help of a star @Oliwia Mikołajczak