# Stretch type headline

https://fieldbook.lizardi.mx/fr/components/stretch-type-headline

Catégorie: Typographie
![Image fixe du composant Stretch type headline de Fieldbook, dans la catégorie Typographie.](https://fieldbook.lizardi.mx/thumbs/stretch-type-headline.webp)
Preview video: https://ejpqcxcjbiyabxkx.public.blob.vercel-storage.com/previews/stretch-type-headline-c3094ee0fc.mp4 (5 s, silent)

Stretch type headline: Un titre gras et condensé dont les lettres s’élargissent près du pointeur et resserrent leurs voisines pour conserver la longueur de la ligne, puis reviennent en place avec un effet de ressort et une courbe nommée.

## 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 |
| --- | --- | --- | --- |
| text | text | Loose type, tight line. | Jusqu’à 60 caractères |
| stretch | number | 0.6 | De 0.2 à 1 ; pas de 0.05 |
| feel | select | elastic | Options : elastic, spring, snap |
| caps | boolean | true | Aucune autre limite dans les métadonnées. |
| accent | color | #FF3A22 | Aucune autre limite dans les métadonnées. |
| autoplay | boolean | true | Aucune autre limite dans les métadonnées. |
| showLabel | boolean | true | Aucune autre limite dans les métadonnées. |

## Conseils d’utilisation

Stretch type headline utilise le format d’aperçu « large » avec le thème « clair/sombre ».

### Quels frameworks sont disponibles pour Stretch type headline ?

Stretch type headline 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 Stretch type headline ?

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

### Quels détails d’accessibilité sont visibles dans Stretch type headline ?

Le code React de Stretch type headline contient : attributs et gestionnaires (aria-hidden, aria-label). 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 Stretch type headline gère-t-il la réduction des animations ?

Stretch type headline 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": "stretch-type-headline",
    "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)
- [Jello squash button](https://fieldbook.lizardi.mx/fr/components/jello-squash-button)
- [Letterpress proof card](https://fieldbook.lizardi.mx/fr/components/letterpress-proof-card)
- [Particle drift](https://fieldbook.lizardi.mx/fr/components/particle-drift)
- [Pointer angle sweep](https://fieldbook.lizardi.mx/fr/components/pointer-angle-sweep)
- [Pointer tilt photo card](https://fieldbook.lizardi.mx/fr/components/pointer-tilt-photo-card)