# Estêncil Um título em letras grandes com um vídeo tocando por dentro, como se as letras fossem janelas para a cena. > Estêncil é um componente do THM Componentes que recorta um vídeo no formato de um texto: a imagem em movimento aparece só dentro das letras, e o resto fica transparente. O vídeo toca sozinho, mudo e em loop, e a letra acompanha a largura da tela. Serve para heros de marca, aberturas de evento e portfólios de vídeo. - Categoria: Texto e tipografia - Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM - Peso no carregamento: Médio: canvas ou animação contínua; bom para uma seção - Tecnologia: Vue 3, TypeScript, Tailwind CSS v4 - Interação: Nenhuma: o efeito roda sozinho - URL: https://vibecode.thmtecnologia.com/componentes/estencil/ ## 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 ```text 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. ## Componentes relacionados - [Parêntese](https://vibecode.thmtecnologia.com/componentes/parentese/): Uma frase em duas partes que se afastam para abrir espaço a uma foto ou a um vídeo pequeno no meio. - [Grafite](https://vibecode.thmtecnologia.com/componentes/grafite/): Uma palavra gigante só em contorno aparece quando o mouse passa e ganha, perto do cursor, as cores que você definir. - [Lustro](https://vibecode.thmtecnologia.com/componentes/lustro/): Texto em cinza suave com uma faixa de brilho que atravessa as letras de tempos em tempos. - [Pupila](https://vibecode.thmtecnologia.com/componentes/pupila/): Um círculo que segue o mouse e, sobre o título, cresce para revelar uma segunda mensagem escondida. - [Matinê](https://vibecode.thmtecnologia.com/componentes/matine/): Player com barra de progresso, miniatura ao passar o mouse, capítulos, legendas, velocidade e tela cheia. --- THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.