Largura/altura da tela (somente CSS)

Temani Afif geralmente aparece nesta lista com demos CSS. Desta vez, por causa de algo impressionante: combinando propriedades personalizadas com funções trigonométricas e de propriedade, ele pode exibir a altura e a largura da tela… sem qualquer tipo de JavaScript!

Blobs interativos WebGL

Passe o mouse sobre essas bolhas fofas para vê-las reagir e se mover (ainda mais do que já fazem). Esta é uma demonstração divertida com WebGL de Ksenia Kondrashova que pode ser usada como plano de fundo interativo (e perturbador) em um site.

Hack de citações de filmes

Se você gosta de citações de filmes e jogos da forca em ritmo acelerado, esta demo de Alexandre Vacassin é para você: adivinhe a citação do filme clicando nas letras (sem opção de teclado, afaik). Mas tenha cuidado: você terá um minuto para concluir a tarefa e cada tentativa fracassada subtrairá 5 segundos.

Labirinto de Anel

Outro jogo, desta vez da ZIM. Este labirinto tridimensional, criado com ThreeJS, tem o formato de um anel. Nesta divertida demonstração codificada para um desafio CodePen, a bola seguirá o mouse pelo labirinto (às vezes pode ser desafiador).

Efeito de navegação flutuante

Veronica Hristova codificou esta navegação interativa. Ele usa os pseudoelementos ::before e ::after para duplicar o texto especificado em um atributo de dados e gerar um efeito 3D colorido ao passar o mouse. Simples e legal.

Três.Js Blobby Apple

Esta é outra demonstração de Ksenia Kondrashova. Gire em torno desta maçã que se move fluidamente enquanto gira, perdendo sua forma e recuperando uma nova - um belo experimento com ThreeJS.

Aplicativo divisor de contas

Inspirado por um design encontrado no Dribbble (link na descrição do codepen), Dilum Sanjaya codificou uma versão ao vivo deste divisor de notas usando React e Tailwind. Parece legal.

Pardal

Tem havido pouca arte CSS nesta série ultimamente, e este lindo desenho de pardal de Alina é um retorno notável. Baseado em um desenho do Behance (linkado no código), a simplicidade do código contrasta com a limpeza do desenho. Trabalho incrível.

Criatura da lagoa IK

Mova o mouse pela tela e veja como esta criatura/bolha o segue. Inicialmente preso ao topo, esse verme (? sanguessuga? criatura!) se separará e crescerá à medida que se move. Liam Egan desenvolveu esta demonstração.

Jenga 3D — CSS

Um jogo CSS 3D programado por Josetxu. Embora o Jenga não seja totalmente jogável, você pode clicar nas peças do meio, que serão animadas e movidas (você pode empurrá-las de volta para dentro em "Jenga reverso").

Se você gosta dessas demos, confira o artigo anterior com 10 demos Cool CodePen de junho de 2024!