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.
- License 许可
- Apache-2.0
- 最近更新
- 2026-11-15
- Stars
- ★ 0
- Forks
- 0
01 前言 Front Matter
- od
- { "mode": "video", "surface": "hyperframes", "scenario": "video" }
- name
- video-template-frame-liquid-bg-hero
- license
- Apache-2.0
- metadata
- { "author": "nexu-io", "version": "0.1.0" }
- description
- 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.
02 资源文件 13
- 参考文档open-design.json3.4 KB
- 资产文件preview.mp4673.3 KB
- 资产文件preview.png698.9 KB
- 其他source/fonts.css12.3 KB
- 资产文件source/fonts/f48712e776f666632.woff26.5 KB
- 资产文件source/fonts/f62412e776f666632.woff220.7 KB
- 资产文件source/fonts/f65382e776f666632.woff243.9 KB
- 资产文件source/fonts/f66672e776f666632.woff219.8 KB
- 资产文件source/fonts/f6d672e776f666632.woff226.0 KB
- 资产文件source/fonts/f75322e776f666632.woff26.4 KB
- 参考文档source/index.html3.4 KB
- 其他source/tailwind.css5.9 KB
- 参考文档template.json837 B
03 SKILL.md 正文
Liquid 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).
04 同仓库更多 Skills
ui-styling
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.
design
Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini or Atlas Cloud AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social/ads/web/print), icon design (15 styles, SVG, Gemini 3.1 Pro), social photos (HTML→screenshot, multi-platform). Actions: design logo, create CIP, generate mockups, build slides, design banner, generate icon, create social photos, social media images, brand identity, design system. Platforms: Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads, Google Ads.
design-system
Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations.
banner-design
Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with AI-generated visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, website hero, print. Styles: minimalist, gradient, bold typography, photo-based, illustrated, geometric, retro, glassmorphism, 3D, neon, duotone, editorial, collage. Uses ui-ux-pro-max, frontend-design, ai-artist, ai-multimodal skills.
ui-ux-pro-max
UI/UX intelligence database for UX rules, accessibility standards (WCAG AA), typography pairings, color palette reasoning, and interaction guidelines. Activate when searching for design tokens, font pairings, UX best practices, or auditing component usability. DO NOT use for high-level art direction ($design) or brand-mimicking templates (open-design).
ui-styling
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.