video-template-frame-liquid-bg-hero
Faz seu agente criar um vídeo com um fundo fluido e uma citação sobreposta. Bom para introduções de vídeo, heróis de landing pages ou pôsteres.
O que ela faz
Cria um vídeo curto e animado com um fundo que parece líquido e em movimento. Ele também pode exibir um texto sobre esse fundo, sendo ideal para introduções de vídeos ou páginas iniciais.
Quando usar
- ✓Para criar a introdução de um vídeo.
- ✓Para fazer um banner animado para a página principal de um site.
- ✓Para gerar um pôster digital com visual moderno.
Exemplo do que pedir para a IA
“Crie um vídeo de fundo líquido com a frase 'O futuro é agora'.”
Quer saber mais? Abra as seções abaixo.
Como usar
O jeito mais fácil: copie a mensagem abaixo e cole no Claude, ChatGPT, Cursor ou outra IA. Ela lê a skill e segue as instruções.
Link da skill
Mensagem pronta para colar
Como funciona
O sistema usa um código especial (HTML, CSS, JavaScript) para gerar o efeito de líquido e animar o texto. Você só precisa dizer o que quer e ele cria o vídeo.
Instalação
Jeito mais fácil: copie o link da skill e cole no Claude, ChatGPT ou Cursor pedindo para seguir as instruções.
No terminal (Claude Code, Codex, Cursor), na pasta do projeto:
npx skills add nexu-io/open-design --skill video-template-frame-liquid-bg-heroOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/plugins/_official/video-templates/frame-liquid-bg-hero/SKILL.md -o SKILL.mdConteúdo técnico (SKILL.md)
Tradução do texto original do autor no GitHub. Os comandos e códigos estão como no original.
Fundo Líquido Hero
Fundo com deslocamento de fluido estilo WebGL com sobreposição de citação, adequado para introduções de vídeo, seções hero de landing pages ou pôsteres.
O que este template é
Uma composição de movimento HTML + CSS + GSAP pronta para HyperFrames, empacotada sob source/. Ele renderiza deterministicamente para MP4 / WEBM em 16:9, 9:16, 1:1, padrão de 15s, 60fps.
Ideal para: Seção hero de lançamento de produto · Vídeo de landing page SaaS · Capa editorial
Fluxo de Trabalho
- Leia
source/index.htmlpara entender as camadas nomeadas e a linha do tempo da animação. - Substitua o texto de exemplo (títulos, números, rótulos) pelo conteúdo real do usuário; mantenha o timing do movimento e a assinatura visual intactos.
- Mantenha a composição autônoma sob
source/; não introduza ativos de rede externos que possam quebrar uma renderização headless. - Renderize para MP4 via html-video / renderizador HyperFrames.
Atribuição
Fonte: html-video templates/frame-liquid-bg-hero (licença Apache-2.0).
Perguntas frequentes
Que tipos de vídeo posso criar?
Você pode criar vídeos com fundos que parecem líquidos em movimento, com texto sobreposto, ideais para introduções, páginas iniciais ou pôsteres.
O vídeo terá um tamanho específico?
Os vídeos são criados em formatos comuns como 16:9 (para TVs e computadores) e 9:16 (para celulares), com 15 segundos de duração e 60 quadros por segundo.
Preciso me preocupar com a qualidade do vídeo?
Não, o sistema foi feito para gerar vídeos com boa qualidade e animação fluida, mantendo o estilo visual original.
Detalhes
Descrição original do autor
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.
repo: nexu-io/open-design
Popularidade
- Estrelas no GitHub
- 101 mil
- Posição no ranking
- #626
- Licença
- Apache-2.0
- Atualizada em
- 16/10/2026
Comentários
- …
Mais skills deste repositório
sample-plugin
Faz seu agente criar um arquivo de metadados para testes. Ele ajuda a garantir que o código funcione corretamente em diferentes situações.
nexu-io/open-design
aster-atelier
Ajuda seu agente a criar um site artístico com visual clássico. Ele usa imagens elegantes, céus azuis e fontes serifadas para um visual cinematográfico.
nexu-io/open-design
audio-jingle
Faz seu agente gerar áudio como jingles e efeitos sonoros. Ele pode criar músicas e vozes, salvando o resultado em um arquivo de áudio.
nexu-io/open-design
blog-post
Ajuda seu agente a escrever artigos longos ou posts de blog. Ele inclui espaços para imagens, citações e informações do autor.
nexu-io/open-design
Skills parecidas
blender-motion-state-inspection
Permite inspecionar detalhes de animações em 3D. É útil para verificar poses, movimentos e o alinhamento de personagens em animações.
affaan-m/ECC
manim-video
Faz seu agente criar vídeos explicativos animados. Ele usa o Manim para gerar gráficos e diagramas claros para conceitos técnicos.
affaan-m/ECC
remotion-video-creation
Orienta seu agente na criação de vídeos usando React com a biblioteca Remotion. Ele cobre boas práticas para animações, áudio, legendas e outros elementos visuais.
affaan-m/ECC