Curva que Troca de Lado Plus

Dois lados de um cartão que trocam de lugar: uma mancha de cor com a borda curva atravessa, e o conteúdo espera ela ganhar caminho antes de deslizar pro outro lado e trocar de assunto.

Ver na loja e baixar

Sobre este efeito

Dois lados de um cartão que trocam de lugar. Uma mancha de cor com a borda curva atravessa o cartão, e o conteúdo não sai junto: ele fica parado enquanto a curva ganha caminho e só então desliza, pousando pouco antes de ela assentar. É essa defasagem que faz a troca parecer uma travessia em vez de dois blocos trocando de lugar ao mesmo tempo. A folha que sai passa POR BAIXO da cor e some nela. Em tela estreita o cartão empilha e a curva atravessa de cima para baixo. Leve, e parado não gasta nada. O lado inativo sai da tabulação e da árvore de acessibilidade, o botão de troca é o primeiro do Tab, e com menos movimento a troca acontece na hora, sem animar. No toque funciona em celular e tablet, com o cartão cabendo inteiro. Serve para qualquer par: dois planos, antes e depois, duas versões de um texto. Cores, altura, tempo, barriga da curva e desvio do centro ajustáveis.

Ficha

Categoria: Interação
Onde combina: transições, utilitário
Alcance: Área: vive dentro de um bloco da página.
Plano: Incluso no Plus (R$ 19,90/mês) e no Ultra (R$ 39,90/mês).
Peso: 5,0 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: 16/09/2026

Como colocar no seu site

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.
Usando um construtor (Elementor, Shopify, Webflow e outros): a loja mostra o passo a passo de cada um.
Programando: importe o efeito.css e o efeito.js e marque o elemento com a classe fx-curva-que-troca-de-lado.

Assuntos

troca
painel
curva
transicao
acessivel
teclado
planos