# Geada

A imagem ou o conteúdo vai ficando embaçado aos poucos até a borda, como um vidro cada vez mais fosco.

> Geada é um componente do THM Componentes que embaça o que está atrás dele de forma gradual: começa nítido e fica cada vez mais desfocado na direção escolhida. Usa camadas de backdrop-filter em CSS, sem animação, e funciona bem na base de fotos com texto por cima e no topo ou rodapé de listas roláveis.

- Categoria: Efeitos especiais
- Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM
- Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível
- Tecnologia: Vue 3, TypeScript, Tailwind CSS v4, Motion for Vue
- Interação: Nenhuma: o efeito roda sozinho
- URL: https://vibecode.thmtecnologia.com/componentes/geada/

## Como ele é

Parece um vidro que vai ficando fosco aos poucos. Sobre uma foto, por exemplo, a parte de cima continua nítida e, descendo, a imagem embaça cada vez mais até a borda, numa passagem suave, sem linha de corte. Isso vem de oito camadas empilhadas por padrão, cada uma com um pouco mais de desfoque que a anterior. A direção pode ser para baixo, para cima ou para os lados. O componente não tem cor própria: ele só desfoca o que está atrás, por isso serve no modo claro e no escuro. Ele não anima por conta própria.

## Você pode estar procurando isto se pediu algo assim

- “foto que vai ficando embaçada embaixo para colocar texto por cima”
- “desfoque gradual no topo da lista quando o conteúdo rola”
- “aquele blur de iPhone que aumenta aos poucos até a borda”
- “vidro fosco em degradê no rodapé do card”
- “deixar a borda da imagem desfocada sem um corte seco”
- “efeito de profundidade com desfoque atrás do menu fixo”

## Também chamado de

desfoque progressivo, progressive blur, variable blur, gradient blur, desfoque gradual, backdrop blur, desfoque em degradê

## Quando usar

- Base de fotos e cards com texto branco por cima
- Topo e rodapé de listas e carrosséis roláveis
- Atrás de cabeçalhos fixos, para separar o menu do conteúdo
- Capas de álbum, perfis e vitrines com legenda sobre a imagem

## Quando evitar

- Celulares mais simples, se você aumentar muito o número de camadas
- Quando o conteúdo atrás precisa continuar legível

## Como pedir para a sua IA

```text
Quero um desfoque progressivo em camadas na metade de baixo das fotos dos cards, para o texto branco ficar legível: nítido em cima e cada vez mais embaçado até a borda, com backdrop-filter em CSS, sem bloquear cliques e leve no celular.
```

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 Geada

### Geada pesa no celular?

Costuma ser leve: Geada é só CSS e tem classificação Leve no THM Componentes. Cada camada, porém, é um backdrop-filter que o navegador calcula sobre o que está atrás, e o padrão usa oito. Em aparelhos simples, menos camadas ajudam; compare o LCP e o INP antes e depois.

### Como mudar a direção e a força de Geada?

A prop direction de Geada define para onde o desfoque aumenta: bottom, o padrão, top, left ou right. A prop blurLayers define o número de camadas, e blurIntensity, quantos pixels de desfoque cada camada soma, com 0,25 por padrão. A demo usa 6, para um efeito bem mais forte.

### Os cliques passam por Geada?

As camadas de desfoque de Geada ignoram o ponteiro, mas o contêiner que as envolve não. Por isso a demo acrescenta pointer-events-none na classe do componente, e assim links e botões atrás dele continuam clicáveis. Vale manter isso sempre que ele ficar sobre conteúdo interativo.

## Componentes relacionados

- [Florada](https://vibecode.thmtecnologia.com/componentes/florada/): Títulos e parágrafos que aparecem um depois do outro, saindo de um borrão e subindo de leve até ficarem nítidos.
- [Escotilha](https://vibecode.thmtecnologia.com/componentes/escotilha/): Um painel de vidro que entorta o conteúdo que passa por trás, com bordas que refratam e separam as cores.
- [Comboio](https://vibecode.thmtecnologia.com/componentes/comboio/): Uma fileira de logos, depoimentos ou etiquetas que desliza em loop contínuo, na horizontal ou na vertical.
- [Recado](https://vibecode.thmtecnologia.com/componentes/recado/): Avisos que surgem um de cada vez no topo da lista e empurram os anteriores para baixo, como um feed ao vivo.
- [Cadência](https://vibecode.thmtecnologia.com/componentes/cadencia/): Um texto grande em que cada palavra sai do desfoque e fica nítida conforme você rola, no ritmo da leitura.

---
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.