Cursor

Bracket lock cursor

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

Selection tools

Hero banner

1,440 × 480 · PNG

Hover an element to lock the frame onto it. Idle, the reticle spins and trails the pointer.

Cómo usar Bracket lock cursor

Bracket lock cursor 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.

Control	Tipo	Valor inicial	Límites de la vista previa
`spinDuration`	`number`	`2`	De 0.5 a 8; paso 0.1
`accent`	`color`	`#F5F6F8`	Los metadatos no indican otro límite.
`lockColor`	`color`	`#FF6A1F`	Los metadatos no indican otro límite.
`cornerSize`	`number`	`12`	De 6 a 24; paso 1
`hideNativeCursor`	`boolean`	`true`	Los metadatos no indican otro límite.

¿Para qué frameworks está disponible Bracket lock cursor?

Bracket lock cursor 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 Bracket lock cursor?

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

¿Qué detalles de accesibilidad se observan en Bracket lock cursor?

El código React de Bracket lock cursor 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 Bracket lock cursor el movimiento reducido?

Bracket lock cursor consulta la preferencia de movimiento en su código React mediante useReducedMotion(). 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 Tile trail de Fieldbook, de la categoría Cursor.

1796Tile trailCursorUn 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.

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

1820Trailing cursorCursorUn cursor dibujado que persigue el puntero real sobre un resorte, dejando un rastro de brillo suave y desvaneciendo imágenes residuales mientras gira para mirar en la dirección en la que viaja.

Imagen fija del componente Zoned cursor tag de Fieldbook, de la categoría Cursor.

1824Zoned cursor tagCursorUn puntero personalizado cuya etiqueta final se reescribe y gira hacia el otro lado a medida que cruza las zonas de un panel dividido.

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.