Demonstrações favoritas de Jack Rugile no CodePen

O CodePen é uma fonte incrível de inspiração para código e design. Fico impressionado todos os dias com as demonstrações que os usuários criam. Como o senhor verá abaixo, tenho uma afinidade com coisas que se movem. Foi difícil restringir minhas favoritas, mas aqui estão elas!

VelocityJS

(por Oleg Solomka)

Esta caneta mostra o poder da Velocity.js, um mecanismo de animação JavaScript. Os conceitos de animação e o timing são executados muito bem, ao mesmo tempo em que mantêm um toque lúdico. Oleg nunca economiza nos detalhes e no polimento de suas canetas.

Templo (3D, CSS puro, animado)

(por Ana Tudor)

Ana é uma criatura altamente avançada que existe em um plano separado do resto de nós. Essa caneta em particular sempre foi a minha favorita dela. É uma recriação da este GIF usando apenas CSS. Absolutamente lindo.

Recriação do Rough Seas para a composição

(por Jason Brown)

Esta é outra das minhas recriações favoritas de um GIF animado com código. Este é baseado no este GIF. Jason capricha nos detalhes do original com esta caneta.

Eu particularmente gosto dessas recriações porque elas me permitem ver por trás da cortina como o artista original pode ter criado seu trabalho.

Respire

(por Mombasa)

Essa caneta pode ser a demonstração mais relaxante que já vi. A animação suave e o esquema de cores tranquilas se complementam muito bem. Experimente clicar e arrastar para ajustar a visualização 3D das formas e vê-las de uma perspectiva diferente.

Bezier Sim

(por Tim Holman)

Tim revela a mágica matemática por trás das curvas de Bezier aqui. Gosto de demonstrações que possam ilustrar conceitos mais complicados, e esta faz isso perfeitamente. Também é muito divertido brincar com ela.

Magnético

(por Hakim El Hattab)

As demonstrações e os jogos interativos de Hakim sempre me inspiraram. Este me dá a ilusão de criar meu próprio sistema solar, completo com planetas e asteroides. Poder configurar e ajustar um sistema e vê-lo funcionar é muito divertido.

Isosuperfície plasmática

(por Justin Windle)

Essa demonstração é tão visualmente atraente que tive que incluí-la. As cores, a mescla, as formas inchadas e as linhas de varredura se unem para criar uma festa visual em seu navegador.

Bactérias

(por Grégoire Divaret)

Grégoire arrasou com o movimento orgânico e a estética dessa caneta. Ela parece viva, me dá arrepios, é nojenta e eu a adoro.

Gameboy (CSS completo)

(por heero)

Tenho visto muitas animações no estilo construção do nada ultimamente, mas esta supera todas as outras. Para mim, há uma grande dose de nostalgia com o tema, e a construção fluida de cada peça parece incrível.

Texto um tanto realista

(por Lucas Bebber)

De vez em quando, fico realmente surpreso com o que pode ser feito com a tecnologia front-end da Web, e essa é uma dessas vezes. Essa é a única demonstração da minha lista que não tem nenhuma animação, e isso é dizer alguma coisa. Quando a vi pela primeira vez, achei que era uma imagem de fundo. O realismo que Lucas conseguiu com essa caneta é insano.