30 efeitos disponíveis

Pack de Efeitos

Biblioteca de efeitos, animações e componentes prontos para deixar sua página de vendas com visual profissional.

Escolha um efeito, clique em "Copiar Prompt" e cole na IA que está criando sua página.

30
Efeitos
8
Categorias
24
Leves
21
Sem Deps
Pontos 3D formando ondas

Dotted Surface

Fundos Automático Médio

Fundo com vários pontinhos que formam ondas em 3D, como se fossem uma superfície de água. Se move sozinho em loop, passando sensação de tecnologia.

📍 Onde usar: Primeira seção (hero), abertura da página, seções de tecnologia.
📦 Deps: three
Linhas neon reativas ao mouse

Neon Flow

Fundos Interativo Pesado

Linhas neon brilhantes em 3D que reagem ao movimento do mouse. Quando você mexe o cursor, o efeito acompanha. Visual futurista e interativo.

📍 Onde usar: Hero, abertura, seção promocional de destaque.
📦 Deps: threejs-components
Headline
Texto de apoio
Luz iluminando o título

Lamp

Hero Uma vez Leve

Efeito de uma "lâmpada" iluminando o título principal — um feixe de luz desce de cima e cria um brilho elegante no texto. Dá um ar premium e sofisticado.

📍 Onde usar: Primeira seção (hero), abertura, cabeçalho de seção importante.
📦 Deps: Nenhuma
✨ Novidade
Título Principal
Descrição da sua oferta aqui
Começar

Grid Fade Hero

Hero Uma vez Leve

Seção de abertura completa com gradiente no fundo, grade sutil, um badge animado, título grande com cores em gradiente, texto de apoio e botão de ação. Tudo aparece com animação suave.

📍 Onde usar: Primeira seção da página (hero), abertura de landing page.
📦 Deps: Nenhuma
Grade suave com fade

Grid Fade Background

Fundos Estático Leve

Grade de linhas finas no fundo que vai desaparecendo suavemente. Dá um visual limpo e moderno. Sem animação — totalmente estático.

📍 Onde usar: Hero, abertura, seção de produto, qualquer seção da página.
📦 Deps: Nenhuma
Garantir Vaga

Shiny Button

Botões Mouse por cima Leve

Botão de ação (CTA) que fica normal quando parado, mas quando o mouse passa por cima aparece uma borda girando, brilho interno e efeito de luz. Chama bastante atenção.

📍 Onde usar: Botão principal de compra, hero, seção de preço, oferta.
📦 Deps: Nenhuma
Comprar Agora

Gradient Button

Botões Automático Leve

Botão de ação (CTA) com cores em gradiente que ficam girando continuamente, criando um brilho chamativo. Ideal pra botão principal de compra ou inscrição.

📍 Onde usar: Botão principal de compra, hero, seção de preço, oferta, countdown.
📦 Deps: Nenhuma
M
J
A
C
R
C
L
P
L

Testimonials Columns

Prova Social Automático Leve

Três colunas de depoimentos que ficam rolando automaticamente em velocidades diferentes, criando um efeito de "mural vivo" de avaliações de clientes.

📍 Onde usar: Seção de depoimentos, prova social, antes do botão de compra.
📦 Deps: Nenhuma
Painel 1
Painel 2
Painel 3
Painéis empilham ao rolar

Infinite Looped Panels

Scroll Ao rolar Médio

Painéis em tela cheia que se empilham conforme você rola — cada um fica fixo enquanto o próximo sobe e cobre o anterior. No final, volta pro início. Loop infinito.

📍 Onde usar: Storytelling, "como funciona", benefícios, página de apresentação.
📦 Deps: gsapScrollTrigger
🖼️
📸
🎨
🏞️
Galeria horizontal ao rolar

Horizontal Scrolling Gallery

Scroll Ao rolar Médio

Galeria de itens que se move horizontalmente enquanto você rola a página verticalmente. A seção fica presa na tela até todos os itens passarem.

📍 Onde usar: Portfólio, galeria de produtos, funcionalidades, timeline.
📦 Deps: gsapScrollTrigger
Primeira linha do título
Segunda linha sobe
Terceira linha aparece
Texto revelado linha por linha

Masked Lines Reveal

Texto Uma vez Leve

O texto aparece linha por linha, subindo de baixo pra cima com uma animação elegante. Cada linha aparece com um pequeno atraso, criando um efeito de "revelação" premium.

📍 Onde usar: Título principal, hero, headline de destaque, abertura de seção.
📦 Deps: gsapSplitText
📋
📊
📈
Cards em pilha — hover abre

Cards Empilhados com Hover Reveal

Cards Mouse por cima Leve

Cards empilhados de lado como um baralho. Ao passar o mouse em um, ele sobe e os outros se abrem pra direita, revelando todos. Animação 100% CSS.

📍 Onde usar: Passos/etapas, módulos, benefícios, portfólio compacto.
📦 Deps: Nenhuma
Feixe de energia pulsante

Energy Beam

Fundos Automático Pesado

Um feixe de luz/energia brilhante que pulsa no fundo. Efeito bem futurista e impactante — ideal pra quem quer um visual "tech" pesado.

📍 Onde usar: Hero, abertura, seção de destaque do produto, CTA final.
📦 Deps: unicorn-studio-sdk
Círculos com luz girando

Neon Orbs

Fundos Automático Leve

Quatro círculos grandes com um pontinho de luz girando ao redor de cada um, como ponteiros de relógio brilhantes. Funciona no modo claro e escuro.

📍 Onde usar: Hero, abertura, tela de abertura, CTA final.
📦 Deps: Nenhuma
Logo·Link·Link·CTA
🚀 Badge
Hero Completo
Descrição + imagem de fundo
Comprar
Saber mais
P1
P2
P3
P4

Responsive Hero Banner

Hero Uma vez Leve

Seção de abertura completa e responsiva com imagem de fundo, menu transparente, badge, título elegante, descrição, dois botões de ação e logos de parceiros. Tudo entra com animação.

📍 Onde usar: Primeira seção da página (hero), abertura de landing page.
📦 Deps: Nenhuma
Rápido
🎯
Preciso
🔒
Seguro
📊
Dados

Dark Grid

Cards Mouse por cima Leve

Grade de cards escuros onde, ao passar o mouse, aparecem quadradinhos nos cantos e um brilho sutil por cima. Visual minimalista e elegante.

📍 Onde usar: Lista de funcionalidades, benefícios, módulos do produto, recursos.
📦 Deps: Nenhuma
Card 1
Card 2
Card 3

Scroll Float Cards

Cards Ao rolar Leve

Três cards lado a lado onde os das pontas se inclinam e flutuam conforme você rola a página. O do meio aparece subindo suavemente. Efeito de profundidade.

📍 Onde usar: Benefícios, funcionalidades, diferenciais, "por que escolher".
📦 Deps: Nenhuma
Barras pulsantes tipo equalizador

Gradient Bars Background

Fundos Automático Leve

Barras coloridas verticais que pulsam no fundo, crescendo e diminuindo como um equalizador de música. Cor e velocidade são personalizáveis.

📍 Onde usar: Hero, abertura, splash, CTA final, landing page completa.
📦 Deps: Nenhuma
Tubos neon seguem o cursor

Neon Light Tubes

Cursor Interativo Pesado

Tubos de luz neon coloridos que seguem o mouse pela tela, criando rastros fluidos e brilhantes. Efeito visual muito impactante e futurista.

📍 Onde usar: Hero, abertura, seção de destaque, CTA final.
📦 Deps: tubes1.min.js

Cards Glow Hover

Cards Mouse por cima Leve

Cards escuros que, ao passar o mouse, ganham um brilho suave vindo de cima, como se tivesse uma luz apontando pra eles. Efeito premium e elegante.

📍 Onde usar: Benefícios, funcionalidades, entregas, seção de preços, serviços.
📦 Deps: Nenhuma
Passo 1
Passo 2
Passo 3
Cards grudam ao rolar

Cards Sticky Stack

Cards Ao rolar Leve

Cards que vão se empilhando conforme você rola a página, como se estivesse montando um baralho de cima pra baixo. Cada card gruda na tela e o próximo sobe por cima.

📍 Onde usar: Benefícios, funcionalidades, módulos, entregas, preços.
📦 Deps: Nenhuma
📷
🖼️
🎨
📸
🏞️
📷
🖼️
🎨

Carousel Fade Infinito

Scroll Automático Leve

Carrossel horizontal que desliza automaticamente sem parar, com as bordas desbotando suavemente. Ideal pra mostrar logos, imagens ou screenshots.

📍 Onde usar: Galeria de logos, portfólio, showcase de modelos, prova social.
📦 Deps: swiper
Partículas flutuantes com brilho

Bokeh Particles

Fundos Automático Leve

Bolinhas pequenas flutuam suavemente pelo fundo, piscando como luzes fora de foco de uma câmera. Fica bonito e sutil sem atrapalhar a leitura.

📍 Onde usar: Seções de preço, urgência, CTA final, ou qualquer bloco com fundo escuro.
📦 Deps: Nenhuma
Elementos surgem ao rolar (GSAP)

Scroll Reveal GSAP

Scroll Uma vez Leve

Faz os elementos da página aparecerem com animação conforme você rola (subindo, vindo da esquerda, crescendo, etc). Você escolhe o tipo de animação por bloco.

📍 Onde usar: Qualquer seção: títulos, cards, botões, imagens, textos.
📦 Deps: gsap
Bolas coloridas flutuando + grade

Hero Orbs

Fundos Automático Leve

Três bolas grandes coloridas flutuam lentamente pelo fundo, criando um visual moderno. Também tem uma grade sutil atrás. Fica elegante sem ser pesado.

📍 Onde usar: Primeira seção (hero), abertura, primeira dobra da landing page.
📦 Deps: Nenhuma
Frase de impacto
Segunda frase
Frases alternam ao rolar

Story Text Swap

Scroll Ao rolar Leve

Duas frases que se alternam conforme você rola — a primeira aparece, depois desfoca e sai enquanto a segunda entra no lugar. Ideal pra criar impacto emocional.

📍 Onde usar: Problema/solução, storytelling, transição entre blocos, frase de impacto.
📦 Deps: Nenhuma
☀️ Passo 1
🌤 Passo 2
🌙 Passo 3

Steps BG Morph

Scroll Ao rolar Leve

O fundo da seção muda de cor suavemente (claro → escuro) conforme você rola por cada passo/etapa. Os cards se adaptam automaticamente ao tom do fundo.

📍 Onde usar: "Como funciona", passo a passo, módulos, etapas do processo.
📦 Deps: Nenhuma
🎁Bônus Exclusivo
📘E-book Completo
🎓Certificado

Cards Overlap Stack

Cards Mouse por cima Leve

Cards empilhados como cartas de baralho, um sobre o outro com sobreposição. Quando você passa o mouse em um, ele sobe e se destaca dos demais.

📍 Onde usar: Lista de entregáveis, benefícios, módulos, "o que você recebe".
📦 Deps: Nenhuma
Elementos surgem ao rolar (leve)

Scroll Reveal Vanilla

Scroll Uma vez Leve

Versão leve do Scroll Reveal — os elementos aparecem suavemente conforme você rola a página. Sem dependências externas, funciona sozinho.

📍 Onde usar: Qualquer seção: títulos, cards, botões, imagens, textos.
📦 Deps: Nenhuma
Luzes coloridas suaves no fundo

Ambient Glow

Fundos Estático Leve

Adiciona luzes coloridas suaves e desfocadas no fundo da seção. Dá um visual sofisticado e profissional sem chamar muita atenção. Não tem animação — é estático.

📍 Onde usar: Qualquer seção escura da página: blocos de preço, garantia, FAQ, depoimentos.
📦 Deps: Nenhuma
✅ Prompt copiado! Cole na sua IA para aplicar o efeito.