OG Video Preview

Turn any approved og:image into a looping og:video, so your link previews move.

An open-source agent skill for Claude Code, OpenAI Codex, Cursor and every agent that supports Agent Skills.

Website · 20-second film · Eval · Skill reference

The og:images of nine well-known sites, each turned into an og:video by the skill (Y Combinator's, Deno's, v0's and Lovable's after its reading step, which says what a card shows before anything is cut):

Overview

A link preview is the first thing people see of your page in a chat. In iMessage, Discord and Telegram it can be a video, and almost nobody uses that. OG Video Preview takes the still image you already approved and turns it into a short, seamless loop:

• It reads the image. Every element is found and classified (headline, label, logo, pill, photo, stroke and six more kinds), cut out cleanly over a refilled background, and given motion that suits what it is.
• Frame 0 is your image, pixel for pixel. Apps that cannot play video show the same still they show today, so the preview is never worse than before.
• It is checked, not hoped for. Every render is tested for frame-0 identity, a seamless loop, real motion and file-size budgets, and the live server is tested for the HTTP Range support Apple's players require.

Quick start. Copy this sentence and paste it into Claude Code, Codex or any coding agent. It installs the skill and runs it on your site:

Install the og-video-preview skill with npx skills add hubeiqiao/og-video-preview, then use it to turn my site's og:image into a looping og:video and add the meta tags.

Or install it from a terminal:

npx skills add hubeiqiao/og-video-preview

Then ask your agent: "Use /og-video-preview to make my og:image move."

Contents

• Features
• Installation
• Usage
• How it works
• Where og:video plays
• Evaluation
• Examples
• Serving requirements
• Repository layout
• Credits and license

Features

Feature	What it does
Element-aware motion	Twelve element kinds, each with its own entrance, exit, idle movement and accent, on one set of easing curves and damped springs. Accents differ from card to card (a sweep, hopping letters, a coin flip, a swing), and a fine background texture moves as one surface. A line of type, a wordmark and an app screenshot always move whole
Works from the finished image	Any PNG or JPG, made in Figma, Canva or code (route A), or a configurable HTML card (route B)
Clean cut-outs	Each element owns its exact pixels; the background behind it is refilled, and visuals that cannot be refilled cleanly move in place instead of leaving
Seamless 4 s loops at 60 fps	Every idle, accent and camera move is exactly zero at the loop point
Measured quality gates	Frame-0 mean difference and local defects, seam size, MP4 and JPEG budgets, all scripted
Deploys correctly	Meta tags, versioned filenames, a Range check for the live server, and a Cloudflare Worker that adds 206 Partial Content

Installation

Ask your agent (no terminal needed): paste this into Claude Code, Codex or any agent that supports Agent Skills.

Install the og-video-preview skill with npx skills add hubeiqiao/og-video-preview, then use it to turn my site's og:image into a looping og:video and add the meta tags.

Agent Skills (any compatible agent):

npx skills add hubeiqiao/og-video-preview

Claude Code plugin:

/plugin marketplace add hubeiqiao/og-video-preview
/plugin install og-video-preview@og-video-preview-marketplace

Manual:

git clone https://github.com/hubeiqiao/og-video-preview.git ~/.claude/skills/og-video-preview

Requirements: Python 3 with playwright, Pillow, opencv-python and numpy; Google Chrome; ffmpeg and ffprobe. Tesseract is optional and improves text reading on photos.

Usage

Ask in your own words:

Use /og-video-preview to make my og:image move

Turn public/og/home.jpg into an OG video and wire up the tags

My og:video only shows a still in iMessage. Find out why.

The skill then:

1. Confirms the still is approved, or helps design one that strangers can read at thumbnail size.
2. Reads the image and proposes the layers and their motion (layers-preview.png shows every box and its kind).
3. Renders preview frames for review, then the full 60 fps loop.
4. Checks that frame 0 matches the approved image and that the loop has no visible jump.
5. Encodes the MP4 and JPEG, writes the meta tags, and checks that the live server answers Range requests.

以上为 README 的开头部分。其余内容请阅读原文。 查看完整 README ↗