Saltar al contenido
Fieldbook
Menú
Iniciar sesión
ES

Tipografía

Stretch type headline

Stretch type headline: Un titular grueso y condensado cuyas letras se ensanchan cerca del puntero y comprimen a sus vecinas para mantener la longitud de la línea, antes de volver a su posición con un efecto de resorte y una curva con nombre.

Cómo usar Stretch type headline

Stretch type headline se presenta con el formato de vista previa «ancho» y el tema «claro/oscuro».

Personalizar la vista previa

Estos controles se pasan a la demo. Los valores y límites describen la vista previa; consulta la implementación para conocer todas sus props.

ControlTipoValor inicialLímites de la vista previa
texttextLoose type, tight line.Hasta 60 caracteres
stretchnumber0.6De 0.2 a 1; paso 0.05
feelselectelasticOpciones: elastic, spring, snap
capsbooleantrueLos metadatos no indican otro límite.
accentcolor#FF3A22Los metadatos no indican otro límite.
autoplaybooleantrueLos metadatos no indican otro límite.
showLabelbooleantrueLos metadatos no indican otro límite.
¿Para qué frameworks está disponible Stretch type headline?

Stretch type headline está disponible para React, Vue, Svelte, Astro, HTML. La vista previa usa React; las observaciones sobre el código corresponden a index.tsx. Revisa la versión elegida antes de asumir que ofrece las mismas interacciones.

¿Qué dependencias tiene Stretch type headline?

Los metadatos de React no indican dependencias npm adicionales a React.

¿Qué detalles de accesibilidad se observan en Stretch type headline?

El código React de Stretch type headline incluye: atributos y manejadores (aria-hidden, aria-label). Son observaciones del código. Comprueba los nombres accesibles, el orden del foco y el comportamiento del teclado en la página completa.

¿Cómo maneja Stretch type headline el movimiento reducido?

Stretch type headline consulta la preferencia de movimiento en su código React mediante matchMedia(prefers-reduced-motion). Revisa la implementación completa, los estilos compartidos y la versión elegida con movimiento reducido activado; estas observaciones no garantizan que se detengan todas las animaciones.

Conecta tu agente

Componentes abiertos relacionados

Imagen fija del componente Easing curve lab de Fieldbook, de la categoría Animación.
2918Easing curve labAnimaciónSeis curvas de aceleración llevan puntos de A a B frente a un reloj constante, con estelas y valores en vivo que muestran dónde aceleran, frenan o rebasan el destino; elige una curva para repetirla.
Imagen fija del componente Jello squash button de Fieldbook, de la categoría Botones.
2556Jello squash buttonBotonesUn botón delineado que se inunda de color al pasar el mouse y se tambalea a través de una secuencia de aplastamiento y estiramiento antes de asentarse.
Imagen fija del componente Letterpress proof card de Fieldbook, de la categoría Efectos de texto.
2912Letterpress proof cardEfectos de textoUna prueba tipográfica de un titular breve que la prensa vuelve a entintar e imprimir, donde mantener pulsado más tiempo aporta más tinta y una huella más profunda en el papel, y cada impresión lleva su número.
Imagen fija del componente Particle drift de Fieldbook, de la categoría Fondos.
1536Particle driftFondosUn campo de lienzo de partículas a la deriva lenta que se envuelven en los bordes, se unen con líneas tenues y se alejan por donde pasa el puntero.
Imagen fija del componente Pointer angle sweep de Fieldbook, de la categoría Fondos.
1732Pointer angle sweepFondosUn panel iluminado por un barrido cónico cuyo origen se encuentra debajo del puntero y cuyo borde brillante apunta hacia él, disminuyendo a un giro lento inactivo cuando el puntero se aleja.
Imagen fija del componente Pointer tilt photo card de Fieldbook, de la categoría Tarjetas.
1877Pointer tilt photo cardTarjetasUna tarjeta fotográfica con subtítulos que se inclina hacia el puntero sobre un resorte, con un suave resaltado que se desliza por la cara a medida que gira.