Componentes

Milestone Sheet

Celebração automática ao atingir marcos de coleção (10, 25, 50, 100, 250, 500, 1000 discos). Sheet sobe do rodapé com número gigante lime, mensagem personalizada e confetti animado.

Visão geral

100

discos na coleção

Três dígitos. Respeito.

Anatomia

100

discos na coleção

Três dígitos. Respeito.

Handle

Barra de drag no topo da sheet · w-9 h-1 bg-[#333] rounded-full. Swipe down fecha a sheet.

Número do marco

font-size:80px font-weight:900 color:#C8F53C line-height:1. Centralizado. O número exato atingido.

Label "discos na coleção"

font-size:14px color:#888. Sempre este texto, independente do marco.

Mensagem personalizada

font-size:18px font-weight:700 color:#f5f5f5. Texto específico por marco. Auto-fecha em 4s.

Confetti

Partículas absolutas com animation: confetti-fall linear infinite. Cores: lime, branco, #888. Tamanhos variados.

Marcos e mensagens

Marco	Mensagem
10	A coleção começou.
25	Já dá pra fazer uma festa.
50	Meia centena. Vai fundo.
100	Três dígitos. Respeito.
250	Isso já é acervo de verdade.
500	Quinhentos. Lendário.
1000	Mil discos. Que fase.

discos na coleção

A coleção começou.

500

discos na coleção

Quinhentos. Lendário.

1000

discos na coleção

Mil discos. Que fase.

Do / Don't

100

discos na coleção

Três dígitos. Respeito.

Faça Mostre a sheet apenas uma vez ao atingir o marco. Inclua o número gigante, confetti e CTA para compartilhar. Marcos válidos: 10, 25, 50, 100, 250, 500, 1000.

discos na coleção

Você tem 3 discos!

Evite Não exiba a sheet em marcos arbitrários como 3 discos. Não repita a celebração ao reabrir o app. O momento perde o impacto se aparecer em qualquer número.

Specs

Propriedade	Valor
Sheet background	`#1a1a1a`
Sheet border-radius	`24px 24px 0 0`
Sheet padding	`0 20px 48px`
Número font-size	`80px`
Número font-weight	`900`
Número color	`#C8F53C`
Overlay fundo	`rgba(0,0,0,0.6)`
Auto-close	4s (ou swipe down)
Entrada	`translateY(100%) → translateY(0)`, `ease-out 0.5s`
Confetti duração	1.6–2.4s, `linear infinite`