8 trechos que demonstram o efeito repelente no web design

Experimentos com telas são o assunto da cidade nos dias de hoje. Eles podem ser vistos não apenas como conceitos nos playgrounds populares de desenvolvedores da Web, mas também como soluções para projetos da vida real. A variedade é, sem dúvida, surpreendente: desde animações de partículas primitivas baseadas em plugins populares até ideias únicas que são uma interfusão de ferramentas modernas e comprovadas pelo tempo.

Hoje, chamamos sua atenção para o efeito repelente. Apesar de ter um comportamento repulsivo, certamente tem uma natureza atraente. Incentivar os usuários a brincar com os detalhes do cenário empurrando-os em várias direções, ou em alguns casos, até explodindo tudo, instantaneamente se torna o principal entretenimento. Isso torna a experiência do usuário agradável e emocionante.

Vamos explorar uma coleção de demonstrações inspiradoras com trechos de código para que você possa ver a tendência exclusiva por si mesmo.

Linhas de Repulsão

À primeira vista, esta demo lembra um conjunto de cordas de guitarra. Mova o cursor sobre eles e você verá a mágica. As linhas começam a dobrar e deformar, formando uma pequena esfera.

O painel de opções à direita permite controlar o efeito. Você pode definir o raio do alcance do mouse, adicionar ou reduzir o número de linhas ou alterar a distância entre as strings. Observe a física. É bem pensado e cuidadosamente reproduzido.

Veja as Linhas Repelentes da Caneta de Daniel Velasquez

30.000 Partículas

O efeito repelente parece simplesmente incrível quando aplicado a milhares de pontos em vez de linhas. Justin Windle prova isso na prática. Seu projeto icônico e muito popular no CodePen apresenta um painel onde 30.000 minúsculas partículas se acomodam confortavelmente.

Eles são bem embalados juntos para criar uma superfície densa. Passe o cursor do mouse sobre ele e você verá como os pontos fogem de você. Embora eles não desapareçam de vista, eles são retidos pelo alcance do mouse. Portanto, você pode ver um círculo oco relativamente grande onde os pontos formam a borda.

Veja a caneta 30.000 partículas de Justin Windle

Partículas interativas

Se a simples moldura retangular não inspirar sua criatividade, você sempre pode juntar todos esses pontos em caracteres como Tamino Martinius fez em seu projeto Interactive Particles.

Sua demo inclui uma palavra, onde cada letra é construída a partir de centenas de pontos. Sopre-os com o cursor do mouse para apimentar as coisas. Há um pequeno centro de controle onde você pode alterar os parâmetros do experimento e ajustá-lo às suas preferências.

Veja o logotipo da partícula interativa da caneta por Tamino Martinius

Texto para partículas

Vamos brincar com cor e tamanho para enriquecer os dois conceitos anteriores com algumas reviravoltas animadas como Louis Hoebregts fez em seu projeto Text to Particles.

Ao contrário da solução de Tamino Martinius, aqui os pontos têm raios diferentes e cores diferentes. Além disso, você pode alterar o texto definindo-o usando a entrada. O cursor do mouse tem um comportamento suave e gentil que dispersa a multidão e leva a um pequeno distúrbio no playground. Esta é uma demonstração verdadeiramente agradável aos olhos.

Veja o texto da caneta para partículas por Louis Hoebregts

Bolas e gravidade

O efeito repelente pode ser facilmente combinado com outras soluções baseadas em física para obter resultados excelentes. Considere bolas e gravidade.

O nome do projeto diz tudo. A gravidade, assim como o efeito repelente, estão no centro do conceito – tornando a experiência intrigante.

Ao contrário dos exemplos anteriores, aqui você precisa pegar o círculo e usá-lo como instrumento para afastar os outros círculos. Você quase pode acertar essas bolas planas coloridas, forçando-as a se mover. Além disso, você precisa lutar contra a gravidade, o que torna a experiência ainda mais emocionante.

Veja a caneta BOLAS&GRAVIDADE de Marco Dell'Anna

Atrator

Este projeto de Marco Dell'Anna também é construído em torno da gravidade. Você pode controlá-lo com o cursor do mouse. Use-o para mover partículas e reorganizar sua posição.

Observe que, embora as partículas mudem de posição, elas ainda se esforçarão para voltar ao círculo. Então aqui, você pode ver um cursor do mouse que desempenha o papel de um ímã e, ao mesmo tempo, uma ferramenta para afastar os pontos (pelo menos temporariamente).

Veja o Pen Attractor – MatterJS por Marco Dell'Anna

Ativar

Activate é uma excelente caneta criada por Gerard Ferrandez. Assim como no exemplo anterior, o autor também optou pela gravidade. Desta vez, é combinado com o comportamento fluido e, claro, o efeito repelente. Como resultado, o projeto nos atrai com sua aparência divertida e natureza lúdica.

Veja a Caneta ativada por Gerard Ferrandez

Plasma Moar

O efeito repelente também pode ser de grande ajuda para animações de partículas. Você pode torná-los ainda mais emocionantes. Dê uma olhada no Moar Plasma.

Aqui, você pode ver uma animação caótica onde o cursor do mouse assusta todas as partículas, empurrando-as para lados diferentes. Você não apenas pode desfrutar da demonstração, mas também interagir com ela.

Veja a caneta Moar Plasma de John Chin-Jew

Partículas de neve

Snowy Particles é outro excelente exemplo onde a animação tradicional de partículas ganha um impulso. Nat, o autor da caneta, usou dois truques.

Primeiro, o cursor do mouse tem o poder de transformar pontos simples em flocos de neve, para que a cena pareça genuinamente mágica. Em segundo lugar, é adicionado um pequeno efeito repelente que dispersa levemente a massa nevada para que você possa ver flocos de neve distintos. Simplesmente fantástico.

Veja a neve Pen partículas.js por Nat

Repelentes

Outra área em que o efeito repelente traz benefícios e converte facilmente uma cena monótona em uma extravagância são os efeitos de texto. Já vimos como as palavras criadas com mil pontos parecem excelentes. É hora de transformar os pontos em linhas e apimentar tudo com o efeito repelente. Considerar Repellers como um ponto no caso.

O projeto apresenta uma palavra onde os símbolos são feitos de linhas curtas e finas que são direcionadas aos espectadores. Desta forma, você quase pode sentir sua natureza volumétrica. Pegue o cursor do mouse e arraste-o pelo texto, e você verá como as linhas começam a dançar.

Seu comportamento é suave e agradável aos olhos, embora o texto em si pareça um pouco nítido e agudo. Além disso, as linhas também se movem sozinhas, então parece que há uma pequena brisa que balança partes da composição. Como resultado, você pode desfrutar de uma verdadeira obra-prima onde o texto simples comanda o show.

Veja os repelentes de canetas de Rein van der Woerd

Atração por repulsão

Mesmo que o efeito repelente seja usado para afastar os detalhes da composição, ainda é totalmente magnético. Você não pode tirar os olhos disso. Ele chama a atenção instantaneamente com seu comportamento lúdico e estimula os usuários a interagir com a cena.

O efeito repulsivo não está sozinho em sua luta para conquistar o público. Colabora perfeitamente com outros tipos de animações e efeitos, trazendo soluções únicas e que chamam a atenção.