Skip to content
Pinky UI

media

Hover Video Scrubber

Pointer position previews video time with keyboard and touch alternatives.

  • media
  • video
  • scrub
  • portfolio

Live preview

Scrub · play

Quick usage

usage
import { HoverVideoScrubber } from "@pinky-ui/systems";

<HoverVideoScrubber src={reel} poster={poster} label="Product reel" />

Presets

Default

Restrained production behaviour.

Default behaviour

Quiet

Reduced intensity for dense product screens.

preload={"none"} clickToPlay={false}

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

PropTypeDefaultDescription
preload"none" | "metadata" | "auto""metadata"Host-controlled download strategy.
classNamestring—Styles the outer interaction surface.

Accessibility

  • Keyboard and touch paths match the pointer interaction.
  • Stable labels and values remain available without motion.

Performance

  • Seeks the video element directly without React per pointer frame.
  • Defaults to metadata rather than full preload.

Reduced motion

Motion resolves immediately while semantics, focus and state remain unchanged.

When to use

  • A few creative or product video previews

When not to use

  • Large autoplay grids or long-form playback

Skill

Purpose

HoverVideoScrubber maps horizontal pointer or drag position to a preview video timeline. Use it for a few portfolio reels, product demos or creative clips where rapid inspection matters.

Always provide a poster and a keyboard alternative; use preload="metadata" or none in lists. Avoid autoplaying galleries, long-form video, essential audio or dozens of simultaneous video downloads.

Touch uses drag or explicit play, and Arrow keys seek while Space/Enter can toggle playback. Seeking writes directly to the video element rather than React per frame. Pause or unmount offscreen media in the host gallery.

Open this skill on its own page