Aller au contenu
Fieldbook
Menu
Se connecter
FR

Typographie

Stretch type headline

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.

Utiliser Stretch type headline

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

Personnaliser 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.

RéglageTypeValeur initialeLimites de l’aperçu
texttextLoose type, tight line.Jusqu’à 60 caractères
stretchnumber0.6De 0.2 à 1 ; pas de 0.05
feelselectelasticOptions : elastic, spring, snap
capsbooleantrueAucune autre limite dans les métadonnées.
accentcolor#FF3A22Aucune autre limite dans les métadonnées.
autoplaybooleantrueAucune autre limite dans les métadonnées.
showLabelbooleantrueAucune autre limite dans les métadonnées.
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.

Connectez votre agent

Composants ouverts similaires

Image fixe du composant Easing curve lab de Fieldbook, dans la catégorie Animation.
2918Easing curve labAnimationSix 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.
Image fixe du composant Jello squash button de Fieldbook, dans la catégorie Boutons.
2556Jello squash buttonBoutonsUn bouton décrit qui inonde de couleur au survol et vacille à travers une séquence d'écrasement et d'étirement avant de se stabiliser.
Image fixe du composant Letterpress proof card de Fieldbook, dans la catégorie Effets de texte.
2912Letterpress proof cardEffets de texteUne épreuve typographique d’un titre court que la presse encre et tire à nouveau, où un appui prolongé dépose plus d’encre et creuse davantage le papier, chaque tirage étant numéroté.
Image fixe du composant Particle drift de Fieldbook, dans la catégorie Arrière-plans.
1536Particle driftArrière-plansUn champ de toile de particules à la dérive lente qui s'enroulent sur les bords, se lient avec des lignes pâles et s'éloignent là où passe le pointeur.
Image fixe du composant Pointer angle sweep de Fieldbook, dans la catégorie Arrière-plans.
1732Pointer angle sweepArrière-plansUn panneau éclairé par un balayage conique dont l'origine se trouve sous le pointeur et dont le bord brillant pointe vers lui, passant à une lente rotation au ralenti lorsque le pointeur s'en va.
Image fixe du composant Pointer tilt photo card de Fieldbook, dans la catégorie Cartes.
1877Pointer tilt photo cardCartesUne carte photo sous-titré qui pointe vers le pointeur sur un ressort, avec une lumière douce glissant sur le visage lorsqu'il tourne.