Como ele é
Imagine uma palavra enorme recortada numa folha de papel e, atrás dela, uma janela para um filme. Estêncil mostra o vídeo só dentro das letras, centralizadas na área, e deixa o resto transparente, sobre o fundo da sua página. O vídeo começa sozinho, sem som e em loop, então as letras parecem cheias de imagens em movimento. Por padrão, o tamanho da fonte acompanha a largura da tela, e o texto vem do conteúdo que você escreve dentro do componente. Na demo, uma palavra curta em negrito ocupa uma faixa larga e baixa.
Você pode estar procurando isto se pediu algo assim
- texto com vídeo passando por dentro das letras
- título vazado mostrando um vídeo atrás
- letras gigantes com imagem em movimento dentro, tipo abertura de filme
- colocar o vídeo institucional dentro do nome da empresa
- efeito de recorte de texto com vídeo para o topo do site
- aquele efeito de texto transparente com vídeo de fundo
- nome da marca enorme com cenas do produto dentro
Também chamado de
- texto com vídeo
- texto vazado
- máscara de texto
- letras com vídeo dentro
- video mask text
- text knockout
- video inside text
Quando usar
- Título de hero com vídeo institucional ou de produto
- Abertura de página de marca, evento ou lançamento com o nome em destaque
- Portfólio de produtora, fotógrafo ou agência de vídeo
- Seção de manifesto com uma palavra curta e forte
Quando evitar
- Textos longos ou frases inteiras, já que o efeito pede uma ou duas palavras grandes
- Páginas que precisam abrir rápido em conexões lentas, porque o vídeo é pré-carregado por padrão
Como pedir para a sua IA
Crie um título com vídeo dentro das letras no hero: o nome da marca em letras grandes recortando um vídeo do produto, mudo e em loop, com reprodução inline no iPhone, imagem estática para movimento reduzido e texto acessível a leitores de tela.
Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Estêncil
Posso usar a fonte da minha marca em Estêncil?
Pode, com um cuidado. Estêncil desenha as letras num SVG usado como máscara, e esse SVG não enxerga as fontes da web carregadas pela página, só as do sistema. Para usar a fonte da marca, peça à IA para incorporar a fonte ao SVG; tamanho e peso vêm das props fontSize e fontWeight, e fontFamily define a família.
Estêncil funciona no celular e no iPhone?
Estêncil usa um vídeo HTML com máscara CSS, recurso dos navegadores atuais. O código original não inclui o atributo playsinline, que o iPhone exige para tocar vídeo automático dentro da página, então peça à IA para incluir esse atributo. Por padrão, o tamanho da letra usa a unidade vw e acompanha a largura da tela.
Leitores de tela conseguem ler o texto de Estêncil?
Sim. Além da máscara visual, Estêncil repete o texto num elemento visível só para leitores de tela, então a palavra é lida normalmente. Para quem prefere menos movimento, o vídeo continua tocando; o prompt do THM Componentes pede à IA uma versão estática, como um quadro pausado ou uma imagem dentro das letras.
