Drag

Ao arrastar um item, os outros deslizam para abrir espaço e se acomodam na nova ordem.

Adicione uma "Drag-to-Reorder List" (também chamada sortable list) em [onde].
O item arrastado deve seguir o ponteiro diretamente e se erguer um pouco, enquanto os outros itens deslizam suavemente para sair do caminho; ao soltar, ele deve se acomodar rápido no espaço mais próximo.
Aceite toque além de mouse, e ofereça um jeito de mover itens pelo teclado, com a nova posição anunciada para leitores de tela.

Deslizar uma linha da lista para o lado revela botões de ação como excluir ou arquivar.

Adicione uma interação "Swipe to Delete" (também chamada swipe actions ou swipe to reveal) em [onde].
Ao arrastar uma linha para o lado, ela deve acompanhar o dedo diretamente para revelar por trás botões de ação como arquivar e excluir, parando quando estiverem totalmente visíveis, e ao soltar deslizar suavemente para o lugar, sem quique.
Mantenha a rolagem vertical funcionando durante o deslize horizontal, e deixe as mesmas ações acessíveis por teclado e leitor de tela sem precisar deslizar.

Arrastar uma lista para baixo revela um indicador de carregamento e recarrega o conteúdo ao soltar.

Adicione uma interação de puxar para atualizar (Pull to Refresh) (também chamada swipe to refresh) em [onde].
Ao puxar a lista para baixo a partir do topo, ela deve seguir o dedo com certa resistência e revelar um indicador de carregamento que gira enquanto é puxado; ao soltar, ele continua girando enquanto o conteúdo recarrega, e então a lista sobe suavemente de volta.
Só ative quando a lista já estiver no topo, e ofereça também um botão de atualizar comum para usuários de teclado e leitor de tela.

Um divisor arrastável revela uma imagem de um lado e outra do outro.

Adicione um "Before-After Slider" (também chamado image comparison slider ou compare slider) em [onde].
Duas imagens ficam sobrepostas e, ao arrastar um divisor vertical, aparece mais de uma e menos da outra; o divisor segue o ponteiro diretamente, sem atraso.
Comece com o divisor no meio e faça funcionar com toque e com as setas do teclado.

O rótulo do placeholder sobe e diminui acima do campo quando ele recebe foco ou é preenchido.

Adicione um label flutuante (Floating Label) em [onde], também chamado float label ou animated placeholder.
Quando o campo receber foco ou tiver um valor, o label que fica dentro dele deve deslizar para cima e diminuir até a borda superior do campo, de forma suave e rápida, e só voltar quando o campo estiver vazio e sem foco.
Mantenha como um label de verdade ligado ao input e garanta que a altura do campo não mude, para que o formulário nunca se desloque.

Um ícone de coração se enche de cor e solta pequenas partículas ou pulsa ao ser clicado.

Adicione uma animação "Like / Heart Burst" (também chamada heart animation ou favorite toggle) em [onde].
Ao curtir, o coração deve se encher de cor e saltar com um quique elástico enquanto um anel e pequenos pontos explodem para fora e somem, tudo rápido e divertido; ao descurtir, o coração só se esvazia discretamente.
Mantenha como um botão de alternância real com estado pressionado e reproduza a explosão só ao ativar.

Segurar um item pressionado por um instante dispara ações extras ou um preenchimento de progresso.

Adicione uma interação de toque longo (Long Press) (também chamada press and hold ou touch and hold) em [onde].
Enquanto o item estiver pressionado, ele deve afundar um pouco enquanto um preenchimento de progresso o percorre em ritmo constante; ao completar, ele volta com um leve quique e abre o menu, e soltar antes cancela e zera o preenchimento.
Dê aos usuários de teclado e leitor de tela outra forma de chegar às mesmas ações, e não deixe o toque selecionar texto nem abrir o menu de contexto do navegador.