Componentes
Grid Cell
Célula da coleção em modo grade. Capa quadrada de álbum com badges sobrepostos de rating e comentários. Tap simples → detalhe; tap duplo → curtir com animação de coração lime.
Visão geral
Coleção
Toque duplo em qualquer célula para ver a animação de curtir
Anatomia
1
Capa
background-image do álbum · aspect-ratio:1/1 · background-size:cover. Quando ausente: fundo #1a1a1a com ♪ centralizado.
2
Badge Rating
Canto inferior esquerdo · bg-black/70 · ★ + valor · font-size:10px font-weight:700 color:#C8F53C.
3
Badge Comentários
Canto superior esquerdo · ícone de chat + contagem · color:#f5f5f5. Só exibido se count > 0.
4
Ação de Like
Coração lime surge no centro ao tap duplo. Animação heart-burst: scale 0 → 1.5 → 1.1 → fade out em 0.7s.
Variantes
Com cover_url
Sem cover (fallback)
Com rating badge
Double-tap heart
Do / Don't
Faça
Use tap duplo (double-tap) para curtir. A animação do coração dura 0.7s e não bloqueia a navegação. O coração lime surge no centro e desaparece.
Evite
Não adicione botão de curtir visível fixo sobre cada capa. A ação deve ser descoberta por gesto. Botão fixo polui a grade e conflita com tap simples para abrir o detalhe.
Specs
| Propriedade | Valor |
|---|---|
| Proporção | aspect-ratio: 1/1 |
| Grid | grid-template-columns: repeat(3, 1fr), gap: 1px |
| Overflow | overflow: hidden, position: relative |
| Badge font-size | 10px, bold |
| Badge background | rgba(0,0,0,0.72) |
| Badge padding | 2px 5px, border-radius: 4px |
| Rating color | #C8F53C |
| Comment color | #f5f5f5 |
| Coração tamanho | 40×40px |
| Animação like | heart-burst 0.7s ease forwards |