Componentes
Splash Screen
Tela de loading inicial do app. Logo Spinlist girando, nome do app e texto "Spinando..." com pontos piscando. Fade-out em 1.8s, desmonta em 2.2s.
Visão geral
Anatomia
1
Logo vinyl girando
SVG path do Spinlist · fill:#C8F53C · w-20 h-20 (80×80px) · animation: vinyl-spin 2s linear infinite.
2
Nome do app
"Spinlist" · font-size:22px font-weight:700 color:#f5f5f5 · letter-spacing:-0.5px.
3
Loading text
"Spinando..." · color:#888 font-size:13px. Pontos animam com dot-blink com delay escalonado (0, 0.2s, 0.4s).
4
Overlay de fundo
position:absolute inset:0 background:#0f0f0f. Full-screen, não scrollável. Fade-out: splash-fade-out 0.4s ease em 1.8s, desmonta em 2.2s.
Animações
vinyl-spin · 2s linear infiniteSpinando...
dot-blink · 1.4s · delay escalonadoDo / Don't
Spinlist
Spinando...
Faça
Mantenha a splash por no máximo 2–3s. Use somente o logo vinyl girando e "Spinando..." com dots. Fundo preto, sem textos extras ou ilustrações.
Evite
Não adicione ilustrações de fundo, slogans ou mensagens de versão à splash. Ela é identidade, não marketing. Fundo gradiente e textos extras distraem e atrasam o carregamento.
Specs
| Propriedade | Valor |
|---|---|
| Fundo | #0f0f0f, full-screen |
| Logo tamanho | 80×80px |
| Logo cor | #C8F53C |
| vinyl-spin duração | 2s linear infinite |
| Título font-size | 22px |
| Título color | #f5f5f5 |
| Loading color | #888 |
| dot-blink | 0%,20%:opacity 0 → 50%:opacity 1 → 100%:opacity 0 |
| dot delays | 0s, 0.2s, 0.4s |
| Fade-out início | 1.8s |
| Desmonta (unmount) | 2.2s |