video-template-frame-light-leak-cinema

Generate cinematic video chapter cards using HTML, CSS, and GSAP motion compositions.

93.2k|10.8k|Updated Apr 28, 2026

Search Tags:#template #HTML #video #cinema #Motion #fiLM #Hyperframes

One-click install

npx skills add https://github.com/nexu-io/open-design --skill video-template-frame-light-leak-cinema

Or copy as Structured Prompt for Agent▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) components.

What problem does it solve?

This Skill automates the creation of high-quality, branded cinematic video assets, eliminating the need for manual video editing for repetitive tasks like chapter cards or cold opens.

Core Features & Use Cases

Deterministic Rendering: Produces consistent MP4 or WEBM video files from HTML/CSS templates.
Cinematic Styling: Includes built-in film grain, light leaks, 16:9 letterboxing, and serif typography.
Use Case: Use this to generate a series of consistent, branded documentary-style chapter cards for a video project by simply updating the text content in the template.

Quick Start

Use the video-template-frame-light-leak-cinema skill to generate a 15-second cinematic chapter card with the title 'A Quiet Year in Berlin'.

Frequently Asked Questions about video-template-frame-light-leak-cinema

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

FAQPage Schema

How do I generate a video using this template?▼

Use the video-template-frame-light-leak-cinema skill by providing your content to the template's text layers. The system renders the HTML/CSS composition into an MP4 or WEBM file using the HyperFrames engine.

Can I customize the animation timing in the template?▼

Yes, you can modify the GSAP animation timeline within the source/index.html file. Ensure that any changes maintain the composition's self-contained structure to support headless rendering.

Does this template support different aspect ratios?▼

The current template is optimized for 16:9 aspect ratio. You can adjust the CSS container dimensions in source/index.html, but ensure the layout and motion elements are responsive to the new ratio.

What are the limitations of using this video template?▼

The template is designed for self-contained HTML/CSS/GSAP compositions. It does not support external network assets or dynamic video file imports that would break the headless rendering process.