Docs·Video Player 001

Video Player 001

Cursor-following play control with blur-fade thumbnails and optional ambient glow.

Installation

$pnpm dlx shadcn@latest add @spiderui/video-player-001

Installs video-player-001.tsx and video-player-shared.tsx. Requires motion, @hugeicons/react, and @hugeicons/core-free-icons.

Usage

Click anywhere on the frame to play or pause. On hover, a circular control also tracks your cursor from just below the pointer and crossfades between play and pause.

Pass thumbnailSrc for a poster that blur-fades in while paused and dissolves when playback starts. Set ambientIntensity between 0 and 1 for YouTube-style ambient glow — sampled from the poster while paused, then from live video frames during playback.

Need transport controls and scrubbing? See Video Player 002.

Demo video from MDN sample media. Poster image from Cosmos.

API Reference

PropTypeDefault
srcVideo file URL. Supports mp4, mov, and other browser-native formats.
stringDEFAULT_VIDEO_PLAYER_SRC
thumbnailSrcOptional poster image shown while paused. Blur-fades in on pause and out on play.
string—
defaultVolumeInitial volume from 0 (muted) to 1 (full).
number1
ambientIntensityAmbient glow from 0 (off) to 1 (max). Samples the poster while paused, then live video frames during playback.
number0
classNameClasses on the outer frame wrapper.
string—

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Have any questions?
Contact on@ctrlcat0x
import { VideoPlayer001 } from "@/components/ui/video-player-001"
import { VideoPlayer001 } from "@/components/ui/video-player-001"

export default function Page() {
  return (
    <VideoPlayer001
      src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
      thumbnailSrc="/posters/hero.jpg"
      defaultVolume={0.8}
      ambientIntensity={0.85}
      className="w-full max-w-4xl"
    />
  )
}