Hyperframes Motion

Make After Effects-style motion graphics in plain HTML + GSAP — 3D camera moves, kinetic typography, cinematic transitions and four ready-to-edit 1080x1920 templates. Use when the user wants an animated product reveal, social-media ad, brand story or kinetic-text video built as a web page, or asks for "motion graphics", "animated title", "cinematic text" or a 9:16 video template.

8 starsImages, Video & Audio

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add 2boysfromtown/hyperframes-motion --skill hyperframes-motion

Manual install

git clone --depth 1 https://github.com/2boysfromtown/hyperframes-motion.git /tmp/hyperframes-motion
mkdir -p ~/.claude/skills
cp -r /tmp/hyperframes-motion/. ~/.claude/skills/hyperframes-motion

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# HyperFrames Motion Design Skill

After Effects-style motion graphics as plain HTML + GSAP. Turn a web page into a cinematic vertical video — 3D camera moves, kinetic typography, particle and film looks — with no After Effects and no build step.

## What this skill does

Makes HTML videos look like professional motion graphics instead of basic slideshows.

| Before | After |
|--------|-------|
| Simple fades | Motion blur + elastic bounce |
| Static text | Kinetic typography |
| Flat 2D | 3D camera moves (pan, tilt, zoom) |
| Hard cuts | Smooth scene transitions |

## Templates included

Each is a self-contained 1080×1920 HTML page under `templates/`.

1. **`cinematic-product.html`** — 4-scene product reveal: spotlight logo open, 3D product showcase, feature grid with stagger, gradient-text CTA.
2. **`kinetic-typo.html`** — aggressive typography: glitch, character-by-character reveals, elastic bounces.
3. **`brand-story.html`** — elegant narrative: smooth gradients, parallax, clip-path reveals.
4. **`social-ad.html`** — quick flash-sale ad: bold type, fast cuts, conversion CTA.

## Motion effects library

### CSS effects (`css/motion-effects.css`)

**3D camera moves:** `camera-dolly`, `camera-pan`, `camera-tilt`, `camera-orbit`
**Visual effects:** `motion-blur`, `light-leak`, `lens-flare`, `chromatic-aberration`, `film-grain`, `vignette`
**Scene transitions:** `transition-iris`, `transition-wipe`, `transition-morph`, `transition-glitch`

Read the full skill on GitHub

Details

Skill name: hyperframes-motion
Repository: 2boysfromtown/hyperframes-motion
License: MIT
Repo updated: 24 October 2026

FAQ

What does the Hyperframes Motion skill do?

How do I install the Hyperframes Motion skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add 2boysfromtown/hyperframes-motion --skill hyperframes-motion. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Hyperframes Motion popular?

It lives in 2boysfromtown/hyperframes-motion, which has 8 GitHub stars and 0 forks.

Related skills

Img2img Studio

Dogwind221/img2img-studio

图生图工作室：先识图分析输入图片，再按风格模式生成新图。触发：用户给出/上传图片并要求「生成类似风格的新图」「换个风格重绘」「图生图」「以这张图为基础出图」「做成电商图/套图/主图/详情页」「杂志编辑风/抽象艺术/手绘插画/废片焕新」。不触发：只是「描述/分析图片」而不要求生成新图（那属于 dsh-vision-skill）。模式：photo-art（editorial 编辑杂志风 / revival 白纸手绘风 / 融合风）与 ecommerce（商品主图、卖点图、场景图、详情页、PDP、Amazon/Shopify 图包）。生图通道一级优先 ChatGPT 网页（image 2.5）：免费网页账号先用，额度用尽后自有账号（Codex/Plus）优先，再降级 API（DashScope qwen-image-3.0-pro、OpenAI gpt-image、Z.AI、Seedream、MiniMax）；支持 t2i/i2i、批量并发、质量预设。

Images, Video & Audio

Diagram to Image

zju-zhanglu/diagram-to-image

Convert Markdown documents containing ASCII or Unicode text diagrams into faithful draw.io PNG images. Use when the user provides a Markdown file or Markdown text and asks to extract architecture diagrams, flowcharts, or sequence diagrams from fenced or indented text blocks, generate draw.io XML through the drawio MCP, review and lint XML, gate export through browser-based human approval, and export PNGs.

Images, Video & Audio

Openclaw Genpark Envoy

Alpha-Park/openclaw-genpark-envoy

Autonomous relationship management. Not just CRM, but agentic gift giving, conflict resolution, and calendar-synced hospitality execution via GenPark rails.

Images, Video & Audio

Claude 3d Harness

MAX-786/claude-3d-harness

Entry point for every 3D or Blender task - modeling, materials, lighting, cameras, rendering, animation, product shots, environments, cinematic scenes, exports. Classifies the job (fast, standard or cinematic), picks a workflow, asks the harness registry which library skills to load, then drives Blender through the harness's single Blender MCP server with render, inspect and refine checkpoints. Use it whenever the user asks to create, change, light, render, animate or export anything in 3D, even if they never say "Blender".

Images, Video & Audio

Personalizer

KaramveerSidhu/personalizer

Write and edit prose in the user's voice. Use when asked to personalize or humanize writing, or learn, update, or diagnose a voice profile. Excludes code, configuration, raw data, and exact formulaic text.

Images, Video & Audio

Book Distill

ilia-pluzhnikov/book-distill

Перегоняет длинный материал — книгу, транскрипт видео, подкаст, курс, интервью, лонгрид — в набор атомарных вызываемых скиллов: фреймворки, принципы, чек-листы, решающие процедуры и границы их применения. Вызывать, когда просят «разбери книгу на скиллы», «сделай скилл из этой книги», «вытащи методичку из курса», «turn this book into skills», «distill this podcast into reusable skills», «extract frameworks from this course» — то есть нужны рабочие методы из источника, а не его пересказ. НЕ для саммари и рецензий, НЕ для отыгрыша автора, НЕ для восстановления книги по памяти без текста.

Images, Video & Audio

Browse the most popular Claude skills, all images, video & audio skills, or write your own with the skills generator.