Bolha de Vidro Ultra

Sobre este efeito

Slider de tela cheia com lista de nomes: cada slide fica 5 s na tela enquanto a barra do nome enche e troca sozinho. As letras do título saem subindo uma a uma, a foto nova chega dentro de uma bolha de vidro que nasce no meio e cresce até cobrir a tela (a lente aumenta o meio, dobra a borda e a borda brilha iridescente com franja de cor) e o título novo sobe no lugar com um repique. O título velho termina de sair antes do novo entrar, pedido feito no meio da troca fica guardado, setas e deslizar pro lado também trocam, os nomes são botões com foco, o leitor de tela lê o título inteiro e é avisado na troca feita pela pessoa, e a barra para com o mouse na lista, com foco, fora da tela, com a aba escondida e no botão de pausa. a preferência de menos movimento começa sem trocar sozinho e troca num esmaecer; sem WebGL a bolha é um círculo que abre; sem JS os slides ficam um embaixo do outro. Fora da troca, nenhum quadro é desenhado. Tempos, origem, lente, franja, brilho, distância das letras e véu ajustáveis. WebGL puro, sem biblioteca.

Ficha

Categoria

Galeria

Onde combina

topo (hero), recursos

Alcance

Área: vive dentro de um bloco da página.

Plano

Exclusivo de quem assina o Ultra (R$ 39,90/mês).

Peso

14 KB de código comprimido. Sem biblioteca externa.

No celular

Leve: usa 19% do processador de um celular intermediário enquanto anima.

Placa de vídeo

Desenha com a placa de vídeo; em celular muito simples a fluidez depende dela.

Na loja desde

15/09/2026

Como colocar no seu site

1. Criando o site com IA (Claude Code, Codex e parecidas): baixe o kit, extraia na pasta do projeto e cole o pedido pronto que a loja entrega. Não precisa saber programar.
2. Usando um construtor (Elementor, Shopify, Webflow e outros): a loja mostra o passo a passo de cada um.
3. Programando: importe o efeito.css e o efeito.js e marque o elemento com a classe fx-bolha-de-vidro.

Assuntos

• slider
• carrossel
• galeria
• webgl
• shader
• transicao
• lente
• texto
• tela-cheia
• js