Vexy Vlip treats a WebVTT track not as subtitles but as on-screen cards — styled, positioned, and timed. Play straight through, or click to step from one explanation to the next.
Zero runtime dependencies · ESM · Web Component · <9 kB gzippedIn stop-motion mode, click the video (or press Space) to advance to the next card. This is the real Vexy Playlines editor, captured and narrated with one .vtt file.
WebVTT cues render as real HTML panels — solid or translucent backdrops, custom fonts, colours, radius, borders, shadows. Crisp, accessible, responsive.
Use native WebVTT position/line/size hints, or put JSON in the cue payload for exact x/y/w and anchor control.
Play to the next cue, pause, show the card; click to continue. Perfect for explainers and product walk-throughs.
Glide between stops with an ease-in-out curve — no MediaBunny, no WebCodecs, just native seeking.
Import the ESM module, drop in the <vexy-vlip> element, or load one global script. Same engine underneath.
Every knob is a CSS custom property (--vv-card-bg, --vv-accent…). Style it to match your site.
Timing, text, placement and style live together in the WebVTT track:
WEBVTT
00:02.000 --> 00:03.500 position:18% line:30% size:34% align:start
A plain card, placed with native WebVTT cue settings.
00:06.000 --> 00:07.500
{ "text": "A JSON card with a custom backdrop.",
"x": 50, "y": 50, "anchor": "center",
"bg": "#10243a", "fg": "#eaf2ff", "radius": 16 }