Arco que Abre Espaço Ultra

Sobre este efeito

Uma abertura de página com um arco de fotos por cima do título. Na chegada, as fotos saem de trás do título e se abrem em leque até o arco, do meio pras pontas, e o título aparece depois. Com o mouse perto do arco, a foto mais próxima cresce, sai um pouco pra fora e endireita, enquanto as vizinhas se afastam pra abrir espaço pra ela, como a barra de apps do Mac, só que ao longo da curva. As outras fotos escurecem um pouco, uma luz na cor da foto em foco acende atrás dela e o arco inteiro inclina de leve na direção do mouse. Sem mouse por perto, o foco passeia sozinho de uma ponta à outra. No celular, o arco fica mais alto pra usar a tela em pé, e tocar numa foto põe ela em foco. Foto dentro de link também entra em foco pelo teclado. Com a preferência de menos movimento, o arco fica parado e pronto. Funciona com qualquer número de fotos. Tamanho das fotos, abertura do arco, inclinação das fotos, quanto a foto cresce, quantas vizinhas reagem, luz, escurecimento, inclinação com o mouse e velocidade do passeio ajustáveis. CSS e JavaScript puros.

Ficha

Categoria

Galeria

Onde combina

topo (hero), recursos, prova social

Alcance

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

Plano

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

Peso

8,7 KB de código comprimido. Sem biblioteca externa.

No celular

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

Na loja desde

25/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-arco-que-abre-espaco.

Assuntos

• galeria
• fotos
• arco
• hero
• mouse
• hover
• dock
• zoom
• leque
• luz