video-js

Generate 16:9 motion graphics in the browser with React, Framer Motion, GSAP, and Three.js.

Updated Feb 10, 2026
One-click install
npx skills add https://github.com/AugustEmna/FlexMatch --skill video-js-augustemna
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: video-js
Source: https://github.com/AugustEmna/FlexMatch/tree/main/.local/skills/video-js
Command: npx skills add https://github.com/AugustEmna/FlexMatch --skill video-js-augustemna

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Programmatically generate agency-quality motion graphics in a browser using React, Framer Motion, GSAP, and Three.js, enabling teams to craft marketing clips, explainers, social content, product demos, and broadcast-ready visuals without manual video editing.

Core Features & Use Cases

  • Programmatic animation pipeline that orchestrates multi-layer scenes, backgrounds, midground shapes, and foreground typography
  • Supports React-based workflows with Framer Motion, GSAP, and Three.js to create 2D/3D motion graphics in the browser
  • Attach media assets (images/videos) to be used as elements in animations; exports are non-interactive and auto-play in a 16:9 canvas
  • Use cases include marketing clips, animated explainers, social content, product demos, and high-production visuals for web
  • Delegation model enforces a DESIGN subagent for creative work and asset generation

Quick Start

Delegate the animated video project to a DESIGN subagent to craft the scenes, assets, and motion language for a browser-based 16:9 video.

Frequently Asked Questions about video-js

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I programmatically generate motion graphics in the browser using React?

Programmatically generate motion graphics in the browser by using React, Framer Motion, GSAP, and Three.js to orchestrate multi-layer scenes, backgrounds, midground shapes, and foreground typography for marketing and product visuals.

Can I use GSAP and Three.js together to create animated marketing clips without manual video editing?

Yes, you can use GSAP and Three.js within a React-based workflow to create animated marketing clips, social content, and product demos without manual video editing.

What is the best way to structure a scene choreography pipeline for 2D and 3D motion graphics?

The best way to structure a scene choreography pipeline for 2D and 3D motion graphics is by delegating creative work to a design subagent that crafts scenes, assets, and motion language for a 16:9 canvas.

Does programmatic browser-based video generation support interactive elements or attached media?

Programmatic browser-based video generation supports attached media assets like images and videos, but exports are non-interactive and auto-play strictly in a 16:9 canvas format.

What are the limitations of using Framer Motion and React for broadcast-ready motion graphics?

Limitations of using Framer Motion and React for motion graphics include non-interactive auto-play exports restricted to a 16:9 aspect ratio, requiring a structured design-subagent workflow for scene choreography.

When do I need a design subagent workflow for creating product demo visuals?

You need a design subagent workflow for creating product demo visuals when programmatically generating agency-grade motion graphics that require structured scene choreography and dedicated asset generation.