video-template-frame-decision-tree

Generate animated flowchart videos with branching paths using HTML, CSS, and GSAP motion.

93.2k|10.8k|Updated Apr 28, 2026

Search Tags:#video #Flowchart #GSAP #Animation #Motion #explainer #Hyperframes

One-click install

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

Or copy as Structured Prompt for Agent▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and assets (resource) components.

What problem does it solve?

This Skill automates the creation of professional-grade motion graphics for process diagrams and decision trees, removing the need for manual animation keyframing in complex video editing software.

Core Features & Use Cases

Deterministic Rendering: Produces consistent 16:9 MP4 or WEBM video files at 30fps.
Motion Composition: Utilizes GSAP for smooth, synchronized animation of nodes, connectors, and cursor interactions.
Use Case: Create a 15-second explainer video for a product onboarding flow or a technical decision-making process by simply replacing the template's sample text.

Quick Start

Use the video-template-frame-decision-tree skill to generate a 15-second decision tree video with my custom process steps.

Frequently Asked Questions about video-template-frame-decision-tree

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

FAQPage Schema

How do I customize the text in the decision tree video?▼

Modify the content within the source/index.html file by updating the text inside the node elements. Ensure you maintain the existing CSS classes and structure to preserve the animation timeline.

What video formats are supported by this template?▼

The template supports rendering to MP4 and WEBM formats at a default 16:9 aspect ratio and 30fps, suitable for web and presentation use.

Can I change the animation duration of the decision tree?▼

Yes, you can adjust the duration by modifying the GSAP timeline logic within the script section of source/index.html, specifically the duration parameters for the node and connector animations.

What are the limitations of this motion template?▼

The template is designed for self-contained HTML/CSS compositions; it does not support external network assets or complex dynamic data fetching to ensure reliable headless rendering.