Fundação

Motion

O Spinlist usa movimento mínimo e intencional. Toda animação tem um propósito — feedback de toque, carregamento ou transição de estado. Toque nos exemplos abaixo.

Active state

Toda superfície tocável recua levemente ao toque. Feedback imediato sem animação de saída.

Kind of Blue

Miles Davis

Opacidade

active:opacity-70
transition (opacity 0.15s)

Escala (botões)

active:scale-[0.98]
transition (transform 0.15s)

Background (list rows)

active:bg-[#111]
transition (background 0.1s)

Regra

Nunca use ambos opacity + scale
no mesmo elemento — escolha um.

Transição de scroll

Header do Disco Detalhe: fundo e título fazem fade ao passar o threshold da capa.

scrollY < threshold

Dark Side of the Moon

scrollY > threshold

Dark Side of the Moon

Transição

transition-all duration-200

Propriedades animadas

background (transparent → #0f0f0f)
border-bottom (none → 1px solid #1a1a1a)
opacity do título (0 → 1)
background dos botões pill
(rgba(0,0,0,0.6) → transparent)

Threshold

COVER_HEIGHT − 80px

Heart burst

Aparece ao dar duplo toque na capa do Feed. Roda uma vez e desaparece.

toque duas vezes

Keyframe

@keyframes heart-burst {
  0%   { scale(0);   opacity:1 }
  40%  { scale(1.5); opacity:1 }
  70%  { scale(1.1); opacity:1 }
  100% { scale(1.1); opacity:0 }
}
animation: heart-burst 0.8s ease forwards

Gatilho

Duplo toque em < 300ms
Apenas quando não está curtido

Ícone

w-24 h-24 fill="#C8F53C"
drop-shadow-lg

Shimmer (Skeleton)

Varre da esquerda para direita infinitamente enquanto o conteúdo carrega.

Keyframe

@keyframes shimmer {
  0%   { translateX(-100%) }
  100% { translateX(100%)  }
}
animation: shimmer 1.4s ease-in-out infinite

Gradiente

linear-gradient(90deg,
  transparent 0%,
  rgba(255,255,255,0.04) 50%,
  transparent 100%)

Toast entrada

Disco adicionado à coleção

Keyframe

@keyframes toast-in {
  from { opacity:0; translateY(8px) }
  to   { opacity:1; translateY(0)   }
}
animation: toast-in 0.25s ease

Resumo de durações

Animação	Duração	Easing	Onde
Active press	0.15s	ease	Todos os botões
List row press	0.1s	ease	List items
Toast entrada	0.25s	ease	ToastProvider
Header scroll	0.2s	ease	Disco Detalhe
Heart burst	0.8s	ease forwards	Feed card
Shimmer	1.4s	ease-in-out ∞	Skeleton