Componentdata-display

Shimmering Text

Stable

Texto cujos caracteres clareiam em sequência. Serve para dizer que algo ainda está acontecendo, onde um spinner seria alto demais e um rótulo estático pareceria travado — é irmão do Skeleton, não decoração. A fonte usava um controlador de animação por caractere via `motion`; a revisão arquitetural que o DS009 pediu terminou onde costuma terminar: uma varredura de cor em laço com início escalonado é um keyframe e um atraso, então a dependência saiu e a duração passou a viver em --motion-loop-duration, onde prefers-reduced-motion a alcança.

Instalação

npx up-web-ds add shimmering-text

Preview

Default

With Skeleton

Stopped

Slower

All states

Default

With Skeleton

Stopped

Slower

Metadata

Classificação

Layer: Component
Domínio: Application
Categoria: data-display
Status: Stable

Origem e distribuição

Fonte: ncdai registry / shimmering-text
Licença: MIT
URL: https://chanhdai.com/r/shimmering-text.json
Distribuição: Interna

Acessibilidade

Teclado: revisado
Leitor de tela: revisado
Touch: revisado
Reduced motion: revisado

Não é interativo: não entra na sequência de tabulação e não tem estado, então teclado e alvo de toque não têm superfície onde falhar. Leitor de tela verificado por teste: os caracteres animados são aria-hidden e a frase inteira é repetida uma vez em sr-only, porque uma palavra dividida em onze spans é uma palavra anunciada como onze letras; a divisão é por code point, então caracteres fora do plano básico não são partidos ao meio; e o texto visível não ganha separadores, para que copiar e colar devolva a frase e não uma coluna de letras. Reduced motion verificado em navegador com prefers-reduced-motion: reduce — a varredura é ambiente, então roda em --motion-loop-duration, que vai a 0s, e motion-reduce:animate-none remove a animação por completo: o texto para em vez de acelerar e permanece exatamente onde estava. O estado parado também derruba a animação em vez de congelá-la no meio, para que um processo concluído não deixe uma linha com cara de travada.

Dependências

Pacotes: Nenhuma
Ícones: Nenhum
Construído sobre: Skeleton
Usado por: Nenhum ainda