Minimizar Gelatina Plus

Painel de tela cheia que encolhe se deformando até virar um ícone no canto.

Sobre este efeito

Um painel de tela cheia encolhe se deformando até virar um ícone no canto, e volta a crescer com rebote quando o ícone é clicado. A deformação é de desenho animado, com oscilação amortecida: antecipa, estica ao ser sugado e, na volta, balança perdendo força, como uma janela sendo minimizada. Abre e fecha por gatilhos no HTML ou por código, e Esc fecha de vez. Cores e tempos ajustáveis.

Ficha

Categoria: Interação
Onde combina: utilitário, menu/navegação
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,6 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/07/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-minimizar-gelatina.

Assuntos

painel
modal
minimizar
dock
gelatina
overlay