Composición

Progressive edge blur

Progressive edge blur: Una banda fijada a un borde de un panel de desplazamiento que difumina y desvanece su contenido gradualmente hacia el fondo en lugar de cortarlo en una línea dura.

Ridgeline trail report

Ridgeline closed above the second switchback until the crew clears last week's blowdown. Everything below that point is dry and in good shape.

Water is running at the creek crossing near mile 2.4, ankle deep and cold. Bring trekking poles if you are unsteady on wet rock.

The overlook at mile 4 lost its guardrail section to the spring runoff. Stay back from the edge; the crumbling is worse than it looks from the trail.

Rangers report two black bear sightings near the lower meadow this week, both in the early morning. Store food properly at the backcountry sites.

Permit quotas for the north loop reset on the first of the month. Walk-up spots open at the trailhead kiosk starting at 6am on a first-come basis.

Cell service is unreliable past the ridge junction. The emergency phone at the junction shelter is solar powered and tested monthly.

Cómo usar Progressive edge blur

Progressive edge blur se presenta con el formato de vista previa «tarjeta» 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.

Control	Tipo	Valor inicial	Límites de la vista previa
`position`	`select`	`bottom`	Opciones: top, bottom, left, right
`strength`	`number`	`2`	De 0.5 a 6; paso 0.5
`thickness`	`number`	`96`	De 32 a 200; paso 8
`layers`	`number`	`6`	De 2 a 12; paso 1
`curve`	`select`	`linear`	Opciones: linear, easeIn, easeOut, smooth

¿Para qué frameworks está disponible Progressive edge blur?

Progressive edge blur 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 Progressive edge blur?

Los metadatos de React indican estas dependencias npm además de React: motion, clsx.

¿Qué detalles de accesibilidad se observan en Progressive edge blur?

El código React de Progressive edge blur incluye: atributos y manejadores (aria-hidden). 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 Progressive edge blur el movimiento reducido?

Progressive edge blur consulta la preferencia de movimiento en su código React mediante useReducedMotion(). Expresiones de index.tsx que dependen de la preferencia: transitionMs: reduceMotion ? 0 : 220. 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 Overlay scroll panel de Fieldbook, de la categoría Composición.

2396Overlay scroll panelComposiciónUn panel delimitado que oculta la barra de desplazamiento de la plataforma y dibuja su propia pista superpuesta delgada, del tamaño del pulgar según el contenido.

Imagen fija del componente Focus scroll list de Fieldbook, de la categoría Composición.

2357Focus scroll listComposiciónUna cola desplazable cuyas filas aparecen en tamaño completo y opacity cuando llegan al centro de la vista, con selección de teclado y desplazamiento.

Imagen fija del componente Masked reveal disclosure de Fieldbook, de la categoría Composición.

2384Masked reveal disclosureComposiciónUna divulgación cuyo panel crece hasta su propia altura natural mientras un borde de gradiente suave borra el contenido a la vista desde la parte superior y luego corre hacia atrás al cerrarse.

Imagen fija del componente Masonry flow de Fieldbook, de la categoría Composición.

1532Masonry flowComposiciónUn muro de mampostería que empaqueta azulejos de diferentes alturas en columnas, levanta cada uno a medida que se desplaza a la vista y vuelve a asentar toda la cuadrícula cuando cambia el número de columnas.

Imagen fija del componente Blur fade reveal de Fieldbook, de la categoría Desplazamiento.

1843Blur fade revealDesplazamientoContenido que llega desenfocado y transparente, luego se enfoca en su lugar la primera vez que se desplaza a la vista sin mover un solo píxel.

Imagen fija del componente Curved Scroll Wall de Fieldbook, de la categoría Composición.

2330Curved Scroll WallComposiciónUna pared de fotografías que se desplaza horizontalmente representadas en un plano suavemente curvado y arqueado que sigue desplazándose infinitamente en cualquier dirección.