The Best Hot Dog

O que é

Uma cena animada de praia em Copacabana, com barcos, nuvens, uma barraquinha de hot dog e seu vira-lata caramelo, desenhada quase inteiramente em CSS puro: sem imagem raster, sem SVG. Toda a arte, cachorro-quente, ingredientes, cenário e mascote, é pixel art feita com box-shadow (uma declaração por pixel), complementada por gradientes CSS e clip-path. Interação por clique/toque: abrir e fechar a barraquinha, alternar o cachorro entre sentado e em pé, e 10 zonas clicáveis sobre o hot dog revelando cards com ingredientes brasileiros reais (ovo de codorna, bacon, queijo, batata palha, molho de tomate com cebola, purê de batata, passas, maionese, milho).

Publicado ao vivo em the-best-brazilian-hot-dog-css.vercel.app, código em github.com/icaromol/the-best-brazilian-hot-dog-css.

O desafio

Submissão para o DEV Frontend Challenge: Comfort Food Edition, trilha CSS Art, que julga uso efetivo de CSS e exige que JavaScript fique restrito a um "sprinkle" de interação, nunca o mecanismo principal de renderização visual. A primeira tentativa cresceu para um minigame de arrastar-e-segurar, incompatível com essa regra, e virou um repositório separado; esta peça foi reconstruída do zero, só com clique/toque, especificamente para valer como submissão.

Motivação

A escolha de hot dog partiu de uma dupla conexão: a cultura brasileira de hot dog "carregado" (ovo de codorna, batata palha, milho, purê, até uva passa) e o fato da esposa do candidato apelidar o cachorro da família de "hot dog", por ser quente feito aquecedor. A cena foi ambientada em Copacabana para apresentar essa versão brasileira do prato ao público internacional do desafio.

Como a arte foi gerada

O CSS compilado final tem cerca de 1,76 MB, aproximadamente 121 mil linhas de SCSS de pixel art, um volume inviável de escrever à mão. Toda essa arte foi gerada pelo Free CSS Sprite Generator, editor e CLI construído especificamente para viabilizar esse projeto.

Galeria