skills.rest
AmirEmad11
AmirEmad11COMMUNITY
Explore all skills by this author →
GitHub

video-js

Create short animated videos programmatically using React, Framer Motion, GSAP, and Three.js.

Updated Apr 20, 2026
Search Tags:#react#motion graphics#three.js#video generation#gsap#framer motion#animated video
One-click install
npx skills add https://github.com/AmirEmad11/instabot --skill video-js-amiremad11
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: video-js
Source: https://github.com/AmirEmad11/instabot/tree/main/.local/skills/video-js
Command: npx skills add https://github.com/AmirEmad11/instabot --skill video-js-amiremad11

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires framer-motion, gsap, @react-spring/web, three, @react-three/fiber, @react-three/drei, lucide-react, tailwindcss, clsx, tailwind-merge, lottie-react, and includes references (resource) components.

What problem does it solve? Producing professional-looking animated videos normally requires motion design expertise and editing software. This Skill lets you generate short, auto-playing animated videos (up to 5 minutes) entirely in code, using React and animation libraries, without a video editor. ## Core Features & Use Cases - Code-driven motion graphics: Builds scene-based animated videos with React, Framer Motion, GSAP, and Three.js, with choreographed transitions, kinetic typography, and layered visual depth. - Asset integration: Incorporates user-attached images and video clips, plus AI-generated images, stock photos, and AI-generated video clips as backgrounds and foreground elements. - Design subagent delegation: Routes all creative work to a design subagent that handles art direction, scene building, and finalization for frame containment and seamless looping. - Use Case: Ask for a 30-second product launch teaser for your brand; the Skill produces a 16:9 auto-playing, looping motion piece with your logo, generated visuals, and cinematic transitions. ## Quick Start Create a 30-second animated promo video for my product using the attached logo and brand images.

Frequently Asked Questions about video-js

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

FAQPage Schema
How do I create an animated video with React and Framer Motion?▼

Define scenes as React components and choreograph them with Framer Motion animations, staggered delays, and transitions. This Skill scaffolds the project, delegates creative work to a design subagent, and produces an auto-playing, looping 16:9 video.

Can I use this to edit or trim existing video footage?▼

No. This Skill creates animated videos from code and is not a video editor. It cannot trim, splice, or do timeline-based editing of footage; attached video clips can only be used as visual elements inside animations.

What animation libraries does the video skill use?▼

The scaffold pre-installs Framer Motion, GSAP, React Spring, Three.js with React Three Fiber and Drei, Lottie, and Tailwind CSS. These libraries handle scene transitions, kinetic typography, springs, and 3D visual effects.

Can I include my own images and logos in the animated video?▼

Yes. User-attached assets such as logos, product shots, and brand images are treated as primary visual material and featured prominently in scenes. The Skill can also generate AI images, video clips, and search stock photos to supplement them.

Why do my video assets show 404 errors in the generated video?▼

The app is served at a subpath, so bare absolute paths like /videos/hero.mp4 fail. Reference public assets with import.meta.env.BASE_URL prefixed to the path, and use the exact file extension returned by the generation tool.

What are the limitations of code-generated animated videos?▼

Videos are limited to about 5 minutes, must be non-interactive with no buttons or forms, and are composed for 16:9 aspect ratio. They auto-play and loop continuously, so they suit motion graphics rather than interactive or long-form content.

Related Skills

Explore More Design & Creative Skills→
Pika-LabsPika-Labs
38

build-a-brand

Build a complete brand identity and 15-page brand guidelines PDF.

Official
Advanced
EvolutionAPIEvolutionAPI
520

mkt-content-creation

Draft marketing content across blogs, social media, emails, and landing pages.

Official
Intermediate
nielskaspersnielskaspers
2

/generate-visuals

Generate production-ready prompts for AI image and video generation.

Community
Advanced
kvm9-devkvm9-dev

video-js

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

Community
Advanced