Passe o mouse por cima dos cards para ver a animacao, ou clique para ver o componente individualmente!
Efeitos e componentes interativos que uso nos meus projetos. Clique em qualquer um para ver o demo completo.

Texto que embaralha caracteres aleatoriamente antes de revelar a mensagem final. Ideal para headlines e hero sections.

Efeito de digitacao que simula alguem escrevendo o texto em tempo real, letra por letra.

Texto com gradiente animado que varre da esquerda pra direita, criando um efeito de brilho metalico.

Texto que alterna entre palavras com animacao de rotacao vertical suave.

Elementos que surgem flutuando conforme o usuario rola a pagina. Usa IntersectionObserver com fade + translate.

Cada palavra do texto aparece individualmente com stagger conforme o scroll, criando um efeito de revelacao progressiva.

Numeros que contam de zero ate o valor final quando entram na tela. Perfeito para metricas e estatisticas.

Card com efeito 3D que acompanha o movimento do mouse, inclinando suavemente na direcao do cursor.

Carrossel interativo com suporte a drag, autoplay e modo circular. Usa animacoes de mola (spring) para transicoes fluidas.

Terminal com efeito glitch que simula erros e falhas visuais. Adiciona personalidade tech ao hero.
Rastro de pixels que segue o cursor do mouse, criando um efeito visual de trilha pixelada.

Particulas flutuantes animadas que criam um fundo dinamico e imersivo sem pesar na performance.

Texto que surge com efeito de desfoque e deslizamento, revelando cada palavra ou letra com stagger.

Divide o texto em caracteres, palavras ou linhas e anima cada parte individualmente com GSAP ScrollTrigger.

Texto disposto em circulo que gira continuamente, com efeitos interativos ao passar o mouse.

Texto com efeito de brilho deslizante que percorre as letras, criando um visual metalico e sofisticado.

Texto que embaralha e revela caracteres com animacao direcional, suporte a loop e scramble customizado.

Fonte variavel que reage a posicao do cursor, alterando peso, largura e italico em tempo real.

Texto marquee em caminho curvo SVG que gira continuamente, com interacao de arrasto do mouse.

Texto renderizado em canvas com efeito de distorcao fuzzy que intensifica ao passar o mouse.

Texto com gradiente animado multi-cores que se move suavemente, com opcao de borda e direcao customizavel.

Palavras que caem com fisica realista usando Matter.js, com paredes e interacao de arrastar.

Emojis ou texto que seguem o cursor do mouse deixando um rastro animado com rotacao e flutuacao.

Texto que se revela com efeito de descriptografia, embaralhando caracteres antes de mostrar a mensagem.

Palavras que alternam foco com desfoque e brackets animados nos cantos, criando efeito de camera.

Texto que se revela com rotacao, opacidade e blur conforme o scroll, palavra por palavra com GSAP.

Texto com efeito glitch via pseudo-elementos CSS, com sombras coloridas e clip-path animado.

Texto marquee que muda velocidade e direcao conforme a velocidade do scroll do usuario.

Fonte variavel que muda peso e largura das letras baseado na proximidade do cursor.

Texto 3D renderizado como arte ASCII com Three.js, com ondulacao e efeito de cor hue-rotate.

Conteudo que entra na tela com transicoes suaves de opacidade, posicao e escala.

Conteudo que aparece e desaparece com fade suave, ideal para transicoes entre estados.

Faiscas animadas que explodem no ponto exato do clique, adicionando feedback visual ao usuario.

Efeito de adesivo sendo descascado com sombra e curvatura realista ao interagir.
Transicao entre elementos usando dissolucao pixelada com efeito retro e moderno ao mesmo tempo.

Borda animada com efeito de eletricidade percorrendo o contorno do elemento.

Borda com particulas brilhantes que orbitam o contorno do componente como estrelas.

Elemento que e atraido magneticamente na direcao do cursor quando se aproxima.

Efeito de brilho reflexivo que acompanha o cursor sobre o elemento no hover.

Efeito de desfoque gradual que revela ou oculta conteudo de forma progressiva.

Cursor customizado em forma de blob organico que se deforma suavemente ao se mover.

Cursor fantasma que deixa copias semi-transparentes no rastro do movimento.

Cursor que cria efeitos de splash liquido conforme se movimenta pela tela.

Cursor em formato de mira com linhas cruzadas que seguem o mouse pela tela.

Cursor em formato de alvo com circulos concentricos e animacao de pulso.

Trilha de imagens que surgem e desaparecem seguindo o caminho do cursor.

Objetos flutuantes que desafiam a gravidade com fisica e interacao de mouse.

Grid de cubos 3D animados que giram e reagem criando um fundo geometrico dinamico.

Feixes de laser coloridos que fluem e se cruzam criando um visual futurista.

Loop continuo de logos ou icones deslizando em faixa infinita estilo marquee.

Linhas que se dobram e atraem na direcao do cursor como campo magnetico visual.

Esferas organicas que se fundem e separam com efeito metaball fluido e colorido.

Efeito de tinta metalica liquida com reflexos iridescentes que reagem ao cursor.

Textura de ruido animada e sutil para adicionar granulacao e profundidade ao fundo.

Imagens que orbitam em torno de um ponto central com rotacao e perspectiva 3D.

Fitas coloridas que flutuam e ondulam no espaco com movimentos suaves e organicos.

Formas geometricas com desfoque intenso que se movem lentamente criando fundo abstrato.

Cards que surgem com animacao de bounce elastico, empilhados e se espalhando na tela.

Pilha de cards que troca o card do topo com animacao de descarte e rotacao.

Card com efeito de deterioracao visual que se intensifica na interacao.
Card com efeito de pixelizacao que se revela ou dissolve em blocos no hover.

Card com efeito de holofote que ilumina a area onde o cursor esta posicionado.

Card de perfil estilizado com foto, info e efeitos visuais para apresentacao pessoal.
Icones com efeito glassmorphism, transparencia e blur criando visual premium.

Superficie com efeito de vidro fosco, refracao e reflexo que reage ao ambiente.

Elemento com efeito de vidro fluido que distorce o conteudo por tras com movimento.

Pasta interativa que abre e revela conteudo com animacao de dobra realista.

Pilha de elementos empilhados com efeito de profundidade e interacao de arrastar.

Cards que se empilham e desempilham conforme o scroll, com efeito de sobreposicao.

Layout masonry responsivo com posicionamento automatico tipo Pinterest.

Grid bento box com cards que se expandem e reorganizam com animacoes fluidas.

Componente de etapas com transicoes animadas entre steps e indicador de progresso.

Lista com itens que entram e saem com animacoes de slide e fade sequenciais.

Grid de celulas coloridas com efeitos cromaticos que reagem ao hover e clique.

Barra de navegacao estilo macOS dock com icones que ampliam ao passar o mouse.

Menu de navegacao com efeito gooey elastico entre os itens ao trocar de secao.

Navegacao com indicador em formato de pilula que desliza suavemente entre os itens.

Menu com preview de imagem que acompanha o cursor ao passar sobre cada item.

Menu que revela itens com animacao escalonada, cada item entrando com delay progressivo.

Menu com botoes em formato de bolhas flutuantes que se expandem ao interagir.

Navegacao baseada em cards visuais com preview e transicoes entre secoes.

Menu com scroll infinito que gira em loop continuo sem fim aparente.

Galeria com imagens dispostas em circulo 3D que gira com interacao do usuario.

Galeria em formato de domo com imagens distribuidas em superficie curva 3D.

Slider com transicao elastica entre slides, com distorcao e snap suave.

Posters que voam e flutuam pelo espaco 3D com fisica e profundidade.

Contador animado com rolagem de digitos estilo odometro, ideal pra numeros em destaque.

Aurora boreal animada com cores vibrantes que ondulam suavemente como o fenomeno real.

Fundo animado com visual psicodelico e padrao distorcido estilo jogo Balatro.

Piscina de bolinhas interativa com fisica realista de colisao e gravidade.

Feixes de luz radiantes que se movem e cruzam criando um fundo luminoso e dinamico.

Gradientes que se dobram e distorcem criando formas abstratas e coloridas em movimento.

Veu escuro com transparencia sutil e textura que adiciona profundidade ao fundo.

Efeito dithering retro com padrao de pontos que cria transicoes de cor estilo pixel art.

Grid de pontos minimalista com animacao sutil que reage ao mouse ou scroll.

Linhas flutuantes que se movem organicamente criando um fundo sutil e elegante.

Fundo estelar com estrelas, nebulosas e efeito de profundidade espacial.

Persianas de gradiente que abrem e fecham com transicao de cores e blur.

Gradiente animado com textura de grao que combina cor suave com ruido visual.

Grid que se distorce e deforma na posicao do cursor com efeito de lente.

Grid com celulas que se movem e reorganizam com animacoes fluidas e continuas.

Efeito de hiperespaco com estrelas passando em alta velocidade estilo Star Wars.

Superficie iridescente com cores que mudam conforme o angulo de visao e o cursor.

Fundo com letras e caracteres que sofrem glitch visual continuo e aleatorio.

Pilares de luz vertical que sobem e descem com brilho e transparencia animados.

Raios de luz que emanam de um ponto central com efeito volumetrico e blur.

Relampagos eletricos que cruzam a tela com flash e ramificacoes aleatorias.

Superficie cromada liquida com reflexos metalicos que se movem de forma organica.

Fluido etereo com cores que se misturam e fluem como tinta na agua.

Orbe luminoso flutuante com gradiente radial e efeito de pulsacao suave.
Explosao de pixels que se dispersam e recompoem com efeito de particulas retro.
Neve pixelada caindo suavemente com flocos quadrados em tamanhos variados.

Efeito de plasma colorido com ondas senoidais que criam padroes organicos em movimento.

Efeito de prisma com decomposicao de luz em espectro de cores animado.

Explosao prismatica com feixes de luz coloridos irradiando do centro.

Grid com efeito de ondulacao que se propaga a partir do ponto de interacao.

Tecido de seda digital com dobras e reflexos que ondulam suavemente ao vento.

Quadrados animados em grid que mudam cor e escala criando padroes geometricos.

Fios coloridos que se entrecruzam e movem criando uma teia visual dinamica.

Ondas animadas com gradiente que fluem horizontalmente com amplitude e velocidade variaveis.

Grid interativo com efeito de onda stagger ao clicar. Construido com Anime.js.

Animacao de desenho de linhas SVG com efeito de traçado progressivo.

Forma que transiciona suavemente entre circulo, quadrado e formas organicas.

Texto que aparece caractere por caractere com stagger e efeito de entrada.

Logo animado com efeito de desenho SVG e preenchimento sequencial.

Fileira de circulos animados em onda senoidal continua com Anime.js.

Explosao de particulas ao clicar com angulos e distancias aleatorias.

Demonstracao de timeline sequencial do Anime.js com multiplas animacoes encadeadas.

Texto que decodifica de caracteres embaralhados para o texto final com efeito cyberpunk.

Texto dividido por caractere com animacao 3D de entrada e stagger.

Desenho geometrico SVG que se desenha progressivamente com GSAP DrawSVGPlugin.

Formas SVG que se transformam entre circulo, estrela e triangulo em loop.

Cards que alternam entre grid e lista com animacao de transicao FLIP.

Circulos arrastaveis com inercia e limites de container.

Botao que atrai magneticamente em direcao ao cursor ao passar o mouse.

Texto infinito rolando horizontalmente com pausa ao hover.

Ponto que segue um caminho SVG em formato de infinito com rastro.

Cards que aparecem com stagger ao rolar a pagina usando ScrollTrigger.