# Easing curve lab

https://fieldbook.lizardi.mx/fr/components/easing-curve-lab

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

Easing curve lab: Six courbes d’accélération font courir des points de A à B face à une horloge régulière, avec des traînées et des valeurs en direct qui montrent accélérations, ralentissements et dépassements ; choisissez une courbe pour la rejouer.

## 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 |
| --- | --- | --- | --- |
| title | text | How should it land? | Jusqu’à 48 caractères |
| selected | select | expo-out | Options : linear, ease-in-out, expo-out, back-out, bounce, elastic |
| duration | number | 1100 | De 300 à 2400 ; pas de 50 |
| accent | color | #1F45FF | Aucune autre limite dans les métadonnées. |
| trails | boolean | true | Aucune autre limite dans les métadonnées. |
| loop | boolean | true | Aucune autre limite dans les métadonnées. |

## Conseils d’utilisation

Easing curve lab utilise le format d’aperçu « large » avec le thème « clair/sombre ».

### Quels frameworks sont disponibles pour Easing curve lab ?

Easing curve lab 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 Easing curve lab ?

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

### Quels détails d’accessibilité sont visibles dans Easing curve lab ?

Le code React de Easing curve lab contient : éléments natifs (button); attributs et gestionnaires (aria-checked, aria-hidden, aria-label, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, tabIndex); rôles explicites (radio, radiogroup, 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 Easing curve lab gère-t-il la réduction des animations ?

Easing curve lab 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": "easing-curve-lab",
    "framework": "react"
  }
}
```

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

## Composants ouverts similaires

- [Archetype morph shape](https://fieldbook.lizardi.mx/fr/components/archetype-morph-shape)
- [Easing preview tile](https://fieldbook.lizardi.mx/fr/components/easing-preview-tile)
- [Spring easing toggle](https://fieldbook.lizardi.mx/fr/components/spring-easing-toggle)
- [Interruptible hover swell](https://fieldbook.lizardi.mx/fr/components/interruptible-hover-swell)
- [Resonant sand plate](https://fieldbook.lizardi.mx/fr/components/resonant-sand-plate)
- [Burst particle emitter](https://fieldbook.lizardi.mx/fr/components/burst-particle-emitter)