video-template-frame-kinetic-type

Generate bold kinetic typography motion graphics for video promos using GSAP and HTML.

93.2k|10.8k|Updated Apr 28, 2026

Search Tags:#video #GSAP #promo #Motion #kinetic #Typography #Hyperframes

One-click install

npx skills add https://github.com/nexu-io/open-design --skill video-template-frame-kinetic-type

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: video-template-frame-kinetic-type
Source: https://github.com/nexu-io/open-design/tree/main/plugins/_official/video-templates/frame-kinetic-type
Command: npx skills add https://github.com/nexu-io/open-design --skill video-template-frame-kinetic-type

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill automates the creation of high-impact, professional-grade kinetic typography videos, removing the need for manual timeline editing in complex video software.

Core Features & Use Cases

Deterministic Rendering: Produces consistent 16:9 motion compositions at 30fps using GSAP animations.
Template-Driven Workflow: Allows users to swap copy and content while maintaining a pre-defined, high-quality motion signature.
Use Case: Ideal for creating punchy 15-second intros, bold headline promos, or social media statements where visual impact is critical.

Quick Start

Use the kinetic type template to generate a 15-second promo video with the headline 'HyperFrames is here' and render it as an MP4 file.

Frequently Asked Questions about video-template-frame-kinetic-type

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

FAQPage Schema

How do I create a kinetic typography video with this template?▼

Provide the desired copy and content to the Skill, which then updates the source HTML layers and triggers the GSAP animation timeline to render your video.

Can I change the duration or aspect ratio of the video?▼

The template is currently optimized for a 16:9 aspect ratio and a 15-second duration. Modifying these requires adjusting the CSS viewport and GSAP timeline settings in the source files.

What animation engine does this template use?▼

This template uses GSAP (GreenSock Animation Platform) 3.14.2 to manage the timing, sequencing, and motion properties of the typography and graphic elements.

Does this template support custom fonts?▼

Yes, the template includes a fonts.css file where you can define and link custom @font-face rules to ensure your typography renders correctly during the video generation process.