Video Card

v1.0.0

FreeVideoInteractiveReduced MotionTailwind

A cinematic video-player card — an autoplaying looped video wrapped in a glassy HUD with play/mute/volume controls, a segmented seek bar, live timecode, corner brackets, and a spring-driven 3D tilt on hover.

Video Card

Go fullscreen to customize props

Installation

npx vectorvesper add video-card

Run npx vectorvesper init once first to set up your project.

Dependencies

npm install framer-motion

framer-motion

Also requires tailwindcss to be configured in your project.

Usage

Import

import { VideoCard } from "@/components/vv/video-card";

Usage

<VideoCard />

Client-only component — disable SSR

This component requires browser APIs and must be rendered client-side only.

import dynamic from "next/dynamic";

const VideoCard = dynamic(
  () => import("@/components/vv/video-card").then((m) => m.VideoCard),
  { ssr: false }
);

This component respects prefers-reduced-motion and provides a graceful fallback.

Tailwind CSS must be configured in your project for styles to apply correctly.

Props

VideoCard wraps an autoplaying, looping video in a glassy cinematic HUD — play/mute/volume controls, a segmented seek bar, live timecode, corner brackets, and a holographic glow — with a spring-driven 3D tilt on hover. It's accessible (labelled controls, keyboard seek) and respects prefers-reduced-motion. Import it from @/components/vv/video-card.

<VideoCard />

A cinematic video-player card with a glassy control dock and a spring 3D tilt.

Prop	Type	Default	Description
`src*`	`string`	`—`	Video source URL.
`poster`	`string`	`—`	Poster image shown before the video loads.
`autoPlay`	`boolean`	`true`	Autoplay the video (muted autoplay is allowed by browsers).
`loop`	`boolean`	`true`	Loop the video.
`muted`	`boolean`	`true`	Start muted.
`enableTilt`	`boolean`	`true`	3D perspective tilt on hover (self-contained — no parent perspective needed).
`tiltMax`	`number`	`12`	Max tilt in degrees.
`showControls`	`boolean`	`true`	Show the bottom control dock (play / mute / volume / seek).
`segments`	`number`	`24`	Number of segments in the seek bar.
`className`	`string`	`""`	Extra classes for the card container.
`style`	`React.CSSProperties`	`—`	Inline style overrides for the card container.
`aria-label`	`string`	`"Video player"`	Accessible label for the player.
`accentColor`	`string`	`"#7EACB5"`	Accent color for UI HUD markers, glow, seek, and volume control highlights.
`cardBgColor`	`string`	`"rgba(0,0,0,0.4)"`	Background color of the card container.

Examples

Default

<VideoCard src="/clip.mp4" />

No tilt

<VideoCard src="/clip.mp4" enableTilt={false} />

Minimal (no dock)Hide the control dock for a clean autoplay card.

<VideoCard src="/clip.mp4" showControls={false} />

Stronger tilt

<VideoCard src="/clip.mp4" tiltMax={20} segments={32} />

Pass a src (and ideally a poster). For a clean look use a short, looping, muted clip. The control dock is interactive — autoplay starts muted so browsers allow it.

Requires Tailwind CSS — the card styles itself with utility classes. Customize the visual accents by passing a custom color to the accentColor prop.

Client component ('use client'). Renders on the client; tilt + controls hydrate there.

Respects prefers-reduced-motion — the 3D tilt is disabled automatically; the video still plays.

Source

export { default as VideoCard } from "./VideoCard";
export type { VideoCardProps } from "./VideoCard";

View on GitHub →Report an issue