video-template-frame-liquid-bg-hero
Use this plugin when the user wants a "Liquid Background Hero" HyperFrames motion video — WebGL-style fluid displacement background with a quote overlay, suited to video intros, landing heroes, or posters.
65
78%
Does it follow best practices?
Run evals on this skill
Adds up to 20 points to the overall score
View guide
Passed
No findings from the security scan
Fix and improve this skill with Tessl
tessl review fix ./plugins/_official/video-templates/frame-liquid-bg-hero/SKILL.mdLiquid Background Hero
WebGL-style fluid displacement background with a quote overlay, suited to video intros, landing heroes, or posters.
What this template is
A HyperFrames-ready HTML + CSS + GSAP motion composition, bundled under source/. It renders deterministically to MP4 / WEBM at 16:9, 9:16, 1:1, default 15s, 60fps.
Best for: Product launch hero · SaaS landing video · Editorial cover
Workflow
- Read
source/index.htmlto understand the named layers and the animation timeline. - Replace the sample copy (headlines, figures, labels) with the user's real content; keep the motion timing and visual signature intact.
- Keep the composition self-contained under
source/; do not introduce external network assets that would break a headless render. - Render to MP4 via the html-video / HyperFrames renderer.
Attribution
Source: html-video templates/frame-liquid-bg-hero (license Apache-2.0).
- Repository
- nexu-io/open-design
- Commit
1a7a23d
- Last updated
- First committed
Is this your skill?
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.