# Crank sea automaton

https://fieldbook.lizardi.mx/fr/components/crank-sea-automaton

Catégorie: Animation
Miniature: https://fieldbook.lizardi.mx/thumbs/crank-sea-automaton.webp

Crank sea automaton: Un automate en contreplaqué dont la manivelle entraîne une rangée de cames qui soulèvent des poissons en bois au-dessus de vagues coulissantes, avec assez d’inertie pour poursuivre sa rotation après une impulsion.

## 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 |
| --- | --- | --- | --- |
| fish | number | 7 | De 3 à 11 ; pas de 1 |
| profile | select | swell | Options : swell, chop, leap |
| phaseStep | number | 40 | De 0 à 120 ; pas de 5 |
| friction | number | 0.6 | De 0.1 à 2 ; pas de 0.1 |
| wood | select | birch | Options : birch, walnut |
| paint | color | #FF4D8D | Aucune autre limite dans les métadonnées. |
| showMechanism | boolean | true | Aucune autre limite dans les métadonnées. |
| ghost | boolean | true | Aucune autre limite dans les métadonnées. |

## Conseils d’utilisation

Crank sea automaton utilise le format d’aperçu « carte » avec le thème « sombre ».

### Quels frameworks sont disponibles pour Crank sea automaton ?

Crank sea automaton 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 Crank sea automaton ?

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

### Quels détails d’accessibilité sont visibles dans Crank sea automaton ?

Le code React de Crank sea automaton contient : éléments natifs (button); attributs et gestionnaires (aria-describedby, aria-hidden, aria-label); rôles explicites (img). 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 Crank sea automaton gère-t-il la réduction des animations ?

L’analyse n’a trouvé aucune lecture directe de la préférence par useReducedMotion() ou matchMedia dans le fichier index.tsx de Crank sea automaton. 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": "crank-sea-automaton",
    "framework": "react"
  }
}
```

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

## Composants ouverts similaires

- [Resonant sand plate](https://fieldbook.lizardi.mx/fr/components/resonant-sand-plate)
- [Gooey blob field](https://fieldbook.lizardi.mx/fr/components/gooey-blob-field)
- [Ring bloom](https://fieldbook.lizardi.mx/fr/components/pulse-ring-bloom)
- [Burst particle emitter](https://fieldbook.lizardi.mx/fr/components/burst-particle-emitter)
- [Composable Reveal](https://fieldbook.lizardi.mx/fr/components/composable-reveal)
- [Directional Slide In](https://fieldbook.lizardi.mx/fr/components/directional-slide-in)