Video Card

v1.0.1

FreeShowcase & Media

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

Pointera11y

Fullscreen to test full viewport

Framer Remix Link

https://framer.link/OZNZ4nm

Installation

Step 1. Initialize ProjectOne-time setup

Run once in your project root to configure paths and dependencies:

npx vectorvesper init

Step 2. Add ComponentInstalls source & assets

Downloads and registers the component in your project:

npx vectorvesper add video-card

Step 3. Required DependenciesAuto-installed with CLI

If installing manually or managing your package lock:

npm install framer-motion

Packages:framer-motion

Requires Tailwind CSS to be configured in your project.

Usage

Import

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

Usage

<VideoCard />

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

A video in a card that leans toward your cursor, with a ring of segments around the edge showing how far through it is. Scrub by dragging that ring.

<VideoCard />

The card. Sizes itself to its container.

Prop	Type	Default	Description
`src*`	`string`	`—`	The video. Required.
`poster`	`string`	`—`	Still shown until the video can play.
`autoPlay`	`boolean`	`true`	Starts on mount.
`loop`	`boolean`	`true`	Repeats when it ends.
`muted`	`boolean`	`true`	Required for autoplay to be allowed. Unmuting and autoplaying together will be blocked by the browser.
`showControls`	`boolean`	`true`	Shows the progress ring and its scrub handle.
`segments`	`number`	`24`	How many ticks make up the progress ring. More reads as a smooth arc, fewer as distinct marks.
`enableTilt`	`boolean`	`true`	Leans the card toward the cursor.
`tiltMax`	`number`	`12`	Furthest it leans, in degrees.
`accentColor`	`string`	`"#7EACB5"`	Colour of the progress ring and handle.
`cardBgColor`	`string`	`"rgba(0, 0, 0, 0.4)"`	Colour behind the video, visible around its edges.
`aria-label`	`string`	`"Video player"`	Label announced for the card. Replace it with something specific to the clip.
`className`	`string`	`""`	Applied to the card.
`style`	`React.CSSProperties`	`—`	Inline styles merged onto the card.

Examples

Basic card

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

<div className="h-[70vh]">
  <VideoCard src="/reel.mp4" poster="/reel-poster.webp" aria-label="Studio reel, 2026" />
</div>

Coarser ring, no tilt

<VideoCard
  src="/reel.mp4"
  segments={8}
  enableTilt={false}
  accentColor="#E07B9B"
  cardBgColor="rgba(10,10,14,0.8)"
/>

Click to play, with soundAutoplay and sound cannot be combined — turn autoplay off and let the visitor start it.

<VideoCard src="/reel.mp4" poster="/reel-poster.webp" autoPlay={false} muted={false} />

The tilt keeps following the cursor under reduced motion. Pass enableTilt={false} when the preference is set; the card and its controls are unaffected.

Browsers only allow autoplay while muted. Leaving autoPlay on and setting muted={false} results in a video that never starts.

Ship the clip near the size the card shows it at. A full-resolution video scaled into a card is the usual cause of a heavy page here.

Source

/**
 * Video Card — Vector Vesper
 * https://vectorvesper.dev/components
 *
 * Copyright (c) 2026 Vector Vesper
 * Released under the MIT License. This notice must be retained in copies and
 * substantial portions of the file. https://vectorvesper.dev/license
 */
export { default as VideoCard } from "./VideoCard";
export type { VideoCardProps } from "./VideoCard";

View on GitHub Report an issue