# Resonant sand plate

https://fieldbook.lizardi.mx/fr/components/resonant-sand-plate

Catégorie: Animation
Miniature: https://fieldbook.lizardi.mx/thumbs/resonant-sand-plate.webp

Resonant sand plate: Du sable fin sur une plaque d'acier qui vibre saute hors des zones agitées et se dépose le long des lignes immobiles, redessinant une nouvelle figure à chaque changement de note.

## Frameworks

react, vue, svelte, astro, html

## Contrôles de l’aperçu

Ces réglages sont transmis à la démo. Les valeurs et limites décrivent l’aperçu ; consultez l’implémentation pour connaître l’ensemble des props.

| Nom | Type | Valeur initiale | Options ou contraintes |
| --- | --- | --- | --- |
| accent | color | #38BDF8 | Aucune autre limite dans les métadonnées. |
| sandColor | color | #E8DCC4 | Aucune autre limite dans les métadonnées. |
| toneHold | number | 5.5 | De 2 à 15 ; pas de 0.5 |
| density | select | medium | Options : fine, medium, coarse |
| vigor | number | 1 | De 0.4 à 2 ; pas de 0.1 |
| autoTone | boolean | true | Aucune autre limite dans les métadonnées. |

## Conseils d’utilisation

Resonant sand plate utilise le format d’aperçu « carte » avec le thème « sombre ».

### Quels frameworks sont disponibles pour Resonant sand plate ?

Resonant sand plate est disponible pour React, Vue, Svelte, Astro, HTML. L’aperçu utilise React ; les observations sur le code concernent index.tsx. Vérifiez les interactions dans le portage choisi avant de vous y fier.

### Quelles sont les dépendances de Resonant sand plate ?

Les métadonnées React indiquent ces dépendances npm en plus de React : clsx.

### Quels détails d’accessibilité sont visibles dans Resonant sand plate ?

Le code React de Resonant sand plate contient : attributs et gestionnaires (aria-hidden, aria-label, onKeyDown, tabIndex); rôles explicites (group); comparaisons de touches (ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Enter, Space). Il s’agit d’observations du code. Vérifiez les noms accessibles, l’ordre du focus et le comportement au clavier dans la page assemblée.

### Comment Resonant sand plate gère-t-il la réduction des animations ?

Resonant sand plate lit la préférence de mouvement dans son code React via matchMedia(prefers-reduced-motion). Vérifiez l’implémentation complète, les styles partagés et le portage choisi avec la réduction des animations activée ; ces observations ne garantissent pas l’arrêt de toutes les animations.

## Installer via MCP

Connectez votre client, appelez get_component pour récupérer l’implémentation, puis get_install_command pour les instructions d’installation. Choisissez un framework proposé, intégrez le code et vérifiez son fonctionnement dans votre application.

```json
{
  "tool": "get_component",
  "arguments": {
    "slug": "resonant-sand-plate",
    "framework": "react"
  }
}
```

[Pour les agents](https://fieldbook.lizardi.mx/fr/docs/agents)
[MCP](https://fieldbook.lizardi.mx/api/mcp)

## Composants ouverts similaires

- [Crank sea automaton](https://fieldbook.lizardi.mx/fr/components/crank-sea-automaton)
- [Burst particle emitter](https://fieldbook.lizardi.mx/fr/components/burst-particle-emitter)
- [Gooey blob field](https://fieldbook.lizardi.mx/fr/components/gooey-blob-field)
- [Particle spray](https://fieldbook.lizardi.mx/fr/components/particle-spray-on-hold)
- [Ring bloom](https://fieldbook.lizardi.mx/fr/components/pulse-ring-bloom)
- [Composable Reveal](https://fieldbook.lizardi.mx/fr/components/composable-reveal)