Video Player

Component 22

About

A retro sci-fi HUD-style video player frame with bracket corners, scanline overlay, transport controls, and an elapsed-time readout.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Video Player to your project and fits it to your theme.

Code

How Video Player is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import * as React from "react"
import { VideoPlayer } from "@/components/ui/video-player"

export default function VideoPlayerDemo() {
  const [status, setStatus] = React.useState<"playing" | "paused">("paused")

  return (
    <div className="flex min-h-[540px] w-full items-center justify-center bg-background p-8">
      <div className="w-full max-w-xl">
        <VideoPlayer
          status={status}
          currentTime="00:04:32"
          onPlay={() => setStatus("playing")}
          onPause={() => setStatus("paused")}
          onRewind={() => {}}
          onFastForward={() => {}}
        >
          <div className="flex h-full w-full items-center justify-center bg-gradient-to-br from-primary/20 via-background to-background">
            <span className="font-mono text-sm uppercase tracking-[0.3em] text-primary/70">
              [ SIGNAL FEED ]
            </span>
          </div>
        </VideoPlayer>
      </div>
    </div>
  )
}