Cursor

Tile trail

Tile trail: Un sendero de puntero que deja caer pequeñas baldosas redondeadas a lo largo del camino, cada una de las cuales surge de una piscina reciclada y se aleja a medida que otras nuevas ocupan su lugar.

Cómo usar Tile trail

Tile trail se presenta con el formato de vista previa «ancho» y el tema «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
`tileCount`	`number`	`8`	De 4 a 14; paso 1
`spawnDistance`	`number`	`70`	De 30 a 160; paso 5
`lifetime`	`number`	`700`	De 300 a 1600; paso 50
`accent`	`color`	`#FF6A1F`	Los metadatos no indican otro límite.
`tilt`	`boolean`	`true`	Los metadatos no indican otro límite.

¿Para qué frameworks está disponible Tile trail?

Tile trail 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 Tile trail?

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

¿Qué detalles de accesibilidad se observan en Tile trail?

El código React de Tile trail 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 Tile trail el movimiento reducido?

Tile trail 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 Stamped cursor trail de Fieldbook, de la categoría Cursor.

1812Stamped cursor trailCursorTarjetas pequeñas estampadas a lo largo de la trayectoria del puntero a intervalos de distancia fijos, cada una de las cuales cae con una inclinación y envejece detrás del cursor.

Imagen fija del componente Swarm trail cursor de Fieldbook, de la categoría Cursor.

1815Swarm trail cursorCursorUna nube de manchas suaves orbita el puntero dentro de un panel, dejando rastros ahusados y fusionándose en una forma donde se superponen.

Imagen fija del componente Bracket lock cursor de Fieldbook, de la categoría Cursor.

1764Bracket lock cursorCursorUn puntero personalizado de cuatro soportes de esquina que gira mientras está inactivo y se abre alrededor de cualquier elemento marcado como objetivo.

Imagen fija del componente Fluid Splash de Fieldbook, de la categoría Cursor.

1776Fluid SplashCursorArrastrar por el panel empuja la tinta a través de una simulación fluida, por lo que el color ondea, se curva y se disipa lentamente detrás del puntero.

Imagen fija del componente Neon trail cursor de Fieldbook, de la categoría Cursor.

1788Neon trail cursorCursorUn haz de luz cónico atravesó la trayectoria reciente del puntero, cálido y ancho en la cabeza, adelgazando y cambiando de color hacia la cola.

Imagen fija del componente Smoke trail cursor de Fieldbook, de la categoría Cursor.

1806Smoke trail cursorCursorUna nube suave y agitada que sigue el puntero como si fuera humo, se enrosca sobre sí misma cuando cambias de dirección y se disuelve cuando te detienes.