Animação
Resonant sand plate
Resonant sand plate: Areia fina sobre uma placa de aço vibrando salta das áreas que tremem e se assenta ao longo das linhas paradas, redesenhando uma nova figura a cada mudança de tom.
Como usar Resonant sand plate
Resonant sand plate usa o formato de prévia “cartão” com o tema “escuro”.
Personalizar a prévia
Estes controles são passados para a demo. Os valores e limites descrevem a prévia; consulte a implementação para conhecer todas as props.
| Controle | Tipo | Valor inicial | Limites da prévia |
|---|---|---|---|
accent | color | #38BDF8 | Os metadados não indicam outro limite. |
sandColor | color | #E8DCC4 | Os metadados não indicam outro limite. |
toneHold | number | 5.5 | De 2 a 15; passo 0.5 |
density | select | medium | Opções: fine, medium, coarse |
vigor | number | 1 | De 0.4 a 2; passo 0.1 |
autoTone | boolean | true | Os metadados não indicam outro limite. |
Para quais frameworks Resonant sand plate está disponível?
Resonant sand plate está disponível para React, Vue, Svelte, Astro, HTML. A prévia usa React; as observações sobre o código se referem a index.tsx. Confira as interações na versão escolhida antes de depender delas.
Quais são as dependências de Resonant sand plate?
Os metadados React indicam estas dependências npm além de React: clsx.
Quais detalhes de acessibilidade aparecem em Resonant sand plate?
O código React de Resonant sand plate inclui: atributos e manipuladores (aria-hidden, aria-label, onKeyDown, tabIndex); papéis explícitos (group); comparações de teclas (ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Enter, Space). Estas são observações do código. Verifique os nomes acessíveis, a ordem do foco e o comportamento do teclado na página completa.
Como Resonant sand plate trata a redução de movimento?
Resonant sand plate consulta a preferência de movimento no código React por meio de matchMedia(prefers-reduced-motion). Confira a implementação completa, os estilos compartilhados e a versão escolhida com a redução de movimento ativada; estas observações não garantem que todas as animações parem.
