Faixa que se Abre Plus

Cartão de vidro com uma faixa de cor inclinada atrás: no hover, no toque ou no teclado ela se endireita e abre, o vidro cresce em volta do texto e duas lascas saem dos cantos.

Ver na loja e baixar

Sobre este efeito

Um cartão de vidro com uma faixa de cor inclinada atrás, e uma cópia desfocada dela por cima fazendo o brilho. Com o mouse em cima, a faixa se endireita e abre por trás do vidro, o cartão desliza para o lado e cresce em volta do texto, e duas lascas de vidro saem dos cantos e ficam flutuando; saiu, tudo volta. Leve; as lascas ficam pausadas até o cartão abrir, então parado não gasta nada. No celular o toque abre, tocar de novo ou fora fecha, e tocar num link de dentro segue o link; o foco do teclado no link de dentro abre o cartão e passa para o seguinte com o Tab. Quando o cartão cresce, o vidro cresce em volta do texto, que fica parado onde a pessoa está lendo. Com menos movimento o estado troca na hora e nada flutua. Cores da faixa por cartão, inclinação, brilho, tempo, deslize, folga, tamanho e flutuação das lascas, tudo ajustáveis.

Ficha

Categoria: Cards
Onde combina: recursos, prova social
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,4 KB de código comprimido. Sem biblioteca externa.
No celular: Leve: usa 10% do processador de um celular intermediário enquanto anima.
Na loja desde: 18/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-faixa-que-se-abre.

Assuntos

cartao
vidro
degrade
hover
toque
teclado
glassmorphism