How does the heatmap determine segment colors?

The timeline uses a scoring logic where scores above 0.6 appear green (High), scores above 0.3 appear amber (Medium), and lower scores appear gray.

What are the prerequisites for installing this skill?

You need a Next.js App Router project and the add-shadcn skill already applied, as it relies on shadcn/ui utilities and Phosphor Icons.

Does this skill require a third-party video player library like Video.js?

No, it uses the browser's native HTML5 Video API directly to ensure the component remains lightweight and highly customizable.

Can I customize the scoring categories for the hotspots?

Yes, the component defines specific axes like Emotional Peak and Info Density in the VideoHotspot type, which can be easily modified in the TypeScript code.

Video Timeline & Heatmap

Name: Video Timeline & Heatmap
Author: mattwoodco

bymattwoodco

•

Design Tools

Builds a React-based video player featuring an interactive engagement heatmap and clickable hotspot markers for navigating key moments.

The Video Timeline skill enables developers to integrate a sophisticated, data-driven video player into Next.js applications without relying on heavy external libraries. It utilizes a custom React hook and the native HTML5 Video API to provide a seamless playback experience enriched with an engagement heatmap. This heatmap visually represents video segments using a color-coded gradient based on user-defined scores—such as emotional peaks or information density. Users can hover over hotspots for detailed metrics and click markers to jump directly to specific timestamps, making it an ideal solution for clip finders, educational platforms, and video analytics dashboards.

Key Features

01Custom React hook for state management using the native HTML5 Video API

02Clickable hotspot markers with detailed metadata tooltips and direct seeking

033 GitHub stars

04Zero external video library dependencies for a lightweight bundle size

05Integrated playback controls including volume sliders, fullscreen mode, and time formatting

06Interactive engagement heatmap with dynamic color-coded scoring (Gray/Amber/Green)

Use Cases

01Developing video analytics dashboards that visualize audience engagement patterns

02Building educational video players that highlight high-impact learning segments

03Creating 'Key Moments' or 'Clip Finder' interfaces for long-form video content

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add mattwoodco/skills video-timeline

For use in Claude.ai and ChatGPT

Download Skill