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

video-template-frame-electric-studio

Generate high-contrast motion video templates using HTML, CSS, and GSAP animation timelines.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill solves the challenge of creating consistent, high-quality motion graphics for testimonials and mission statements without requiring manual video editing software.

Core Features & Use Cases

  • Deterministic Rendering: Produces MP4 or WEBM video files from HTML/CSS compositions at 60fps.
  • Motion Composition: Implements a two-panel split reveal with synchronized text animation using GSAP.
  • Use Case: Use this template to generate a professional 15-second testimonial video for a brand presentation by simply updating the quote text and attribution details.

Quick Start

Use the video-template-frame-electric-studio skill to generate a 15-second 16:9 MP4 video featuring my custom quote and attribution.

Frequently Asked Questions about video-template-frame-electric-studio

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

FAQPage Schema
How do I generate a video using the Electric Studio template?▼

Provide your quote and attribution text to the skill, which then renders the HTML/CSS composition into an MP4 or WEBM file using the HyperFrames engine.

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

The animation timing is defined by CSS keyframes within the source files. You can modify the animation duration and delay properties in the CSS to adjust the motion signature.

What video formats does this template support?▼

The template supports rendering to MP4 and WEBM formats at a 16:9 aspect ratio, optimized for high-contrast editorial and presentation use cases.

Does this template support custom fonts?▼

Yes, the template includes a fonts.css file that defines the Manrope font family, ensuring consistent typography across the rendered video frames.

What are the limitations of this video template?▼

The template is designed for specific split-panel layouts and is not intended for complex multi-scene video editing or dynamic external asset integration.

Related Skills

Explore More Design & Creative Skills→
guia-matthieuguia-matthieu
145

video-testimonial

Guide customers through recording and publishing video testimonials.

Community
Intermediate
MRWillisTMRWillisT
7

high-end-website-design

Generate cinematic hero images, looping videos, and single-file HTML landing pages.

Community
Advanced
npc-livenpc-live
168

video-stitcher

Stitch video clips with transitions, audio, subtitles, and format options.

Official
Advanced
oakossoakoss
14

remotion

Generate programmatic videos from React components with frame-driven animations.

Official
Advanced