# Archetype morph shape

https://fieldbook.lizardi.mx/fr/components/archetype-morph-shape

Catégorie: Animation
![Image fixe du composant Archetype morph shape de Fieldbook, dans la catégorie Animation.](https://fieldbook.lizardi.mx/thumbs/archetype-morph-shape.webp)
Preview video: https://ejpqcxcjbiyabxkx.public.blob.vercel-storage.com/previews/archetype-morph-shape-ea81e2b409.mp4 (5 s, silent)

Archetype morph shape: Une forme se transforme en bouton, interrupteur, curseur, carte et case à cocher, avec des mesures en direct de sa largeur, de sa hauteur, du rayon de ses angles et de ses éléments pendant la transformation.

## 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 | #1F45FF | Aucune autre limite dans les métadonnées. |
| detail | color | #EEEAE2 | Aucune autre limite dans les métadonnées. |
| hold | number | 1.1 | De 0.4 à 4 ; pas de 0.1 |
| morph | number | 0.9 | De 0.3 à 2.5 ; pas de 0.1 |
| readouts | boolean | true | Aucune autre limite dans les métadonnées. |
| autoplay | boolean | true | Aucune autre limite dans les métadonnées. |

## Conseils d’utilisation

Archetype morph shape utilise le format d’aperçu « large » avec le thème « clair/sombre ».

### Quels frameworks sont disponibles pour Archetype morph shape ?

Archetype morph shape 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 Archetype morph shape ?

Les métadonnées React n’indiquent aucune dépendance npm supplémentaire à React.

### Quels détails d’accessibilité sont visibles dans Archetype morph shape ?

Le code React de Archetype morph shape contient : attributs et gestionnaires (aria-hidden, aria-label, aria-readonly, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, tabIndex); rôles explicites (slider). 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 Archetype morph shape gère-t-il la réduction des animations ?

Archetype morph shape 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": "archetype-morph-shape",
    "framework": "react"
  }
}
```

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

## Composants ouverts similaires

- [Easing curve lab](https://fieldbook.lizardi.mx/fr/components/easing-curve-lab)
- [Morphing icon toggle](https://fieldbook.lizardi.mx/fr/components/morphing-icon-toggle)
- [Spring easing toggle](https://fieldbook.lizardi.mx/fr/components/spring-easing-toggle)
- [Composable Reveal](https://fieldbook.lizardi.mx/fr/components/composable-reveal)
- [Easing preview tile](https://fieldbook.lizardi.mx/fr/components/easing-preview-tile)
- [Interruptible hover swell](https://fieldbook.lizardi.mx/fr/components/interruptible-hover-swell)