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
| 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:
- Confirms the still is approved, or helps design one that strangers can read at thumbnail size.
- Reads the image and proposes the layers and their motion (
layers-preview.png shows every box and its kind).
- Renders preview frames for review, then the full 60 fps loop.
- Checks that frame 0 matches the approved image and that the loop has no visible jump.
- Encodes the MP4 and JPEG, writes the meta tags, and checks that the live server answers Range requests.
여기까지가 README 앞부분입니다. 나머지는 원문에서 읽을 수 있습니다. README 전문 보기 ↗
