video-js

Generates short animated motion-graphics videos in the browser using React, Framer Motion, GSAP, and Three.js.

2|Updated Apr 11, 2026
One-click install
npx skills add https://github.com/kvm9-dev/susanoo --skill video-js-kvm9-dev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: video-js
Source: https://github.com/kvm9-dev/susanoo/tree/main/.local/skills/video-js
Command: npx skills add https://github.com/kvm9-dev/susanoo --skill video-js-kvm9-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It removes the manual, time-consuming work of creating high-quality short animated videos by generating motion graphics directly in the browser with code-first tooling.

Core Features & Use Cases

  • Animated motion-graphics video generation: Produces short (up to 5 minutes) autoplay, seamless-loop videos using React with Framer Motion, GSAP, and Three.js.
  • Marketing and explainers without editor workflows: Ideal for motion-clips, animated explainers, social content, product-demo visuals, and broadcast-ready browser playback.
  • Asset-driven choreography: Lets you attach images and video clips and have them used as elements inside the animation.

Quick Start

Use the video-js skill to generate an autoplay, seamless-loop animated marketing clip based on your attached images for a 16:9 browser output.

Frequently Asked Questions about video-js

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

FAQPage Schema
How do I generate animated motion graphics videos in the browser using React?▼

Yes, you can create animated marketing videos without editor workflows by generating them directly in the browser with code. This skill uses React, Framer Motion, GSAP, and Three.js to produce agency-quality motion graphics, bypassing traditional timeline editing entirely.

Can I build 3D animated explainers using Three.js and Framer Motion together?▼

Yes, you can build 3D animated explainers using Three.js and Framer Motion together. This skill combines both frameworks with React to choreograph 3D elements and motion graphics into a structured, broadcast-quality autoplay video clip.

What is the maximum duration for browser autoplay motion graphics generated with code?▼

The maximum duration for browser autoplay motion graphics generated with code is up to 5 minutes. The output is a non-interactive, seamless-loop video featuring reliable scene structure and loop-safe frame containment for social media and product demos.

Can I use my own images and video clips as elements inside a GSAP animation?▼

Yes, you can use your own images and video clips as elements inside a GSAP animation. This skill supports asset-driven choreography, allowing attached media to be used as elements within the animated motion-graphics video rather than edited on a timeline.

Does this approach support trimming and splicing video footage on a timeline?▼

No, this approach does not support trimming and splicing video footage on a timeline. It produces a non-interactive, auto-playing video where footage is used as elements inside the animation, making it unsuitable for traditional non-linear video editing tasks.