Peças que se Encaixam Ultra

Sobre este efeito

Um título ou uma fileira que se monta com a rolagem. No título, cada letra é uma peça: chega girada no próprio eixo, em perspectiva, afastada do centro, e a letra de costas pra quem lê fica apagada; conforme a página desce, todas giram de volta e se encaixam na palavra. Numa fileira de ícones, logos, cartões ou fotos, os itens chegam abertos em V e menores, ou girando e erguidos num arco. Quanto mais longe do centro da linha, mais a peça se afasta e gira, e títulos de duas linhas montam cada linha a partir do meio dela. A montagem acompanha a rolagem nos dois sentidos, com um atraso macio, sem sequestrar a rolagem da página: descendo encaixa, subindo desmonta. Ao fechar, cada peça dá um pulso curto e um brilho sai do centro pras pontas. Nenhuma peça passa da borda da tela, então a página não ganha rolagem de lado no celular. Parado, o efeito não gasta nada. O leitor de tela lê o texto original. Com a preferência de menos movimento, tudo aparece encaixado. Afastamento, giro, profundidade, sombra, ponto em que termina de encaixar, suavidade e pulso ajustáveis. JavaScript e CSS puros, sem biblioteca.

Ficha

Categoria

Scroll

Onde combina

topo (hero), recursos, prova social

Alcance

Página inteira: depende da rolagem ou do cursor da página toda.

Plano

Exclusivo do Ultra (R$ 39,90/mês) até 28/10/2026; depois entra no Plus.

Peso

6,1 KB de código comprimido. Sem biblioteca externa.

No celular

Moderado: usa 37% do processador de um celular intermediário enquanto anima.

Na loja desde

28/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-pecas-que-se-encaixam.

Assuntos

• scroll
• rolagem
• texto
• título
• letras
• 3d
• ícones
• logos
• integrações
• encaixe
• montagem
• entrada