Animation

Archetype morph shape

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.

button

Drag sideways to scrub the morph. Click to step.

Utiliser Archetype morph shape

Archetype morph shape 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églage	Type	Valeur initiale	Limites de l’aperçu
`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.

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.

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.

2193Morphing icon toggleAnimationUne petite icône transforme continuellement son contour entre deux formes et deux couleurs sur une boucle régulière.

Image fixe du composant Spring easing toggle de Fieldbook, dans la catégorie Animation.

1808Spring easing toggleAnimationUne tuile qui glisse entre deux arrêts sur une courbe à ressort cuite dans une transition simple CSS, avec la courbe générée tracée à côté.

Image fixe du composant Composable Reveal de Fieldbook, dans la catégorie Animation.

1676Composable RevealAnimationUn emballage de révélation dont les parties diapositive, fondu, zoom et défocalisation peuvent chacune être activées et combinées en une seule transition à ressort.

Image fixe du composant Easing preview tile de Fieldbook, dans la catégorie Animation.

1772Easing preview tileAnimationUne tuile qui joue la même échelle sous n'importe quelle courbe d'assouplissement que vous choisissez, avec la courbe dessinée à côté et un marqueur qui la chevauche de manière synchronisée.

Image fixe du composant Interruptible hover swell de Fieldbook, dans la catégorie Animation.

1780Interruptible hover swellAnimationUne tuile dont le gonflement en deux étapes commence toujours à partir de sa taille actuelle, donc l'activation et la désactivation du pointeur ne la font jamais se casser.