skills.rest
nexu-io
nexu-ioOFFICIAL
Explore all skills by this author →
WebsiteGitHub

video-template-frame-liquid-bg-hero

Generate WebGL-style fluid displacement motion videos with text overlays for marketing and editorial content.

93.2k|10.8k|Updated Apr 28, 2026
Search Tags:#video#Marketing#hero#Motion#html-video#webGL#Hyperframes
One-click install
npx skills add https://github.com/nexu-io/open-design --skill video-template-frame-liquid-bg-hero
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: video-template-frame-liquid-bg-hero
Source: https://github.com/nexu-io/open-design/tree/main/plugins/_official/video-templates/frame-liquid-bg-hero
Command: npx skills add https://github.com/nexu-io/open-design --skill video-template-frame-liquid-bg-hero

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) components.

What problem does it solve?

This Skill automates the creation of high-quality, motion-based video assets, eliminating the need for manual video editing or complex animation software for standard marketing hero sequences.

Core Features & Use Cases

  • WebGL Motion Composition: Renders fluid displacement backgrounds using GSAP and HTML/CSS.
  • Deterministic Rendering: Produces consistent MP4 or WEBM video files at specified durations and aspect ratios.
  • Use Case: Quickly generate a 15-second product launch hero video by injecting custom headlines and figures into the pre-configured motion template.

Quick Start

Use the video-template-frame-liquid-bg-hero skill to generate a 15-second MP4 video with my custom headline and brand copy.

Frequently Asked Questions about video-template-frame-liquid-bg-hero

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

FAQPage Schema
How do I generate a video using the Liquid Background Hero template?▼

Use the video-template-frame-liquid-bg-hero skill by providing your custom copy and specifying the desired duration and output format. The renderer will process the HTML/CSS source and export a high-quality video file.

What video formats are supported by this template?▼

The template supports rendering to MP4 and WEBM formats, ensuring compatibility with most web browsers and video hosting platforms.

Can I customize the animation timing in the video template?▼

Yes, you can modify the animation timeline and named layers within the source/index.html file to adjust the motion signature while maintaining the template's visual structure.

Does this template require external assets for rendering?▼

The template is designed to be self-contained within the source/ directory. Avoid introducing external network assets to ensure the headless renderer can process the composition reliably.

What is the recommended duration for this hero video?▼

The template defaults to a 15-second duration at 60fps, which is optimized for product launch heroes, SaaS landing videos, and editorial covers.

Related Skills

Explore More Design & Creative Skills→
irahardiantoirahardianto

brand-identity-creator

Generate brand identity guidelines documents from brand core data.

Community
Basic
modu-aimodu-ai
267

target-script

Generate multi-channel marketing scripts with A/B testing variations for customer segments.

Official
Intermediate
inference-shinference-sh
688

youtube-thumbnail-design

Generate YouTube thumbnails optimized for 1280x720 dimensions and safe zones.

Official
Intermediate
ZkAGIZkAGI

Motion Graphics Components

Create data-driven motion graphics scenes with Remotion components.

Official
Intermediate